AFFINGER

アフィンガー(WING)で使えるタグ一覧【使い方説明付き】

2020年7月6日

アフィンガーで使えるタグ一覧

 

アフィンガー５でブログを編集するときに使うタグ一覧を作りました。

 

別記事で詳しい使い方の説明をしているものもあります。

 

 

 

タグ→テキストパーツ

目次

テキストパーツ→クリップメモ

メモ

外部リンク

ブックマーク

おしらせ

はてな

コメント

コード

ポイント

ユーザー

初心者

注意文

注意文（グレー）

テキストパーツ→クリップメモ
(テキスト)

メモ

参考

関連

注意

Check

次へ進む

前へ戻る

質問

回答

 

テキストパーツ→ミニふきだし

基本

オレンジ

ピンク

ブルー

グリーン

レッド

テキスト

マイボックス

 

 

テキストパーツ→複合

自由なメモ

ココがポイント

ココがおすすめ

ココがダメ

ココに注意

さらに詳しく

◯才女性

◯才男性

テキストパーツ→複合（アイコンなし）

自由なメモ

ココがポイント

ココがおすすめ

ココがダメ

ココに注意

もっと詳しく

つまづきポイント

 

 

テキストパーツ→まるもじ（小）

基本

 

オレンジ

 

ピンク

 

ブルー

 

うすい注意

 

注意

 

テキストパーツ→まるもじ（大）

基本

オレンジ

ピンク

ブルー

はてな

チェック

うすい注意

注意

 

テキストパーツ→HTML(カスタム)

・ルビ（ふりがな）

たけだしんげん
武田信玄

 

・Pタグ

（例）

こんにちわ

コード→[st-p add_style="color: #3366ff;"]こんにちわ[/st-p]

 

・spanタグ

（例）こんにちわ

コード→[st-span add_style="padding:5px;background:#3366ff;"]こんにちわ[/st-span]

 

上２つはCSSのスタイルを直接書いて、デザインできるショートコードです。

CSSが書ける人向けのタグになります。

 

テキストパーツ→カスタムフォント

・デフォルト

CSSでフォントサイズを任意の大きさにできるタグ(デフォルトは150)

・白影

こんばんわ

テキストパーツ→ステップ

step
1ジャガイモを切ります

step
2人参を切ります

step
3玉ねぎを切ります

 

テキストパーツ→ポイント

ココがポイント！

テキストパーツ→ラベル

おすすめ

 

 

テキストパーツ→流れる文字（marquee風）

あいうえお・かきくけこ・さしすせそ

 

 

タグ→ボックスデザイン

バナー風ボックス

アフィンガーの購入はココをクリック

稼ぎたいならアフィンガー！

 

＼詳しい使い方は下記の記事からどうぞ／

アフィンガーで使える【バナー風ボックス】をデザインする
【AFFINGER5】バナー風ボックスを使ったデザイン【簡単ショートコード】

  今日はアフィンガー５でバナー風ボックスを使ったデザインをしていきます。     作るデザインのサンプル   サイトマップ こてつの自由帳のサイトマップになり ...

続きを見る

 

ボックスデザイン→マイボックス

ポイント

参考

関連

 

メモ

ポイント

注意ポイント

はてな

ふきだしテキスト

 

 

ボックスデザイン→マイボックス
(＋CCSクラス)

メモ

メモ

メモ

メモ

ここに注意

必要なモノ

  • テキスト
  • テキスト
  • テキスト

必要なモノ

  • テキスト
  • テキスト
  • テキスト

チェックリスト

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

チェックリスト

  • テキスト
  • テキスト
  • テキスト

簡単な流れ

  • テキスト
  • テキスト
  • テキスト

簡単な流れ

  • テキスト
  • テキスト
  • テキスト

 

 

ボックスデザイン→見出しつきフリーボックス

基本

注意

はてな

ポイント

メモ

基本（タイトル幅100％）

注意（タイトル幅100％）

はてな（タイトル幅100％）

ポイント（タイトル幅100％）

メモ（タイトル幅100％）

 

 

ボックスデザイン→メモボックス

メモ

 

ボックスデザイン→スライドボックス

+ クリックして下さい

 

ボックスデザイン→チェックボックス(番号なしリスト)

  • これはダミーのテキストです
  • これはダミーのテキストです

ボックスデザイン→こんな方におすすめ(v)

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

 

ボックスデザイン→こんな方におすすめ[v]

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

ボックスデザイン→ガイドマップメニュー

 

  • ボックスデザイン→pre:

     html

  • ボックスデザイン→pre:terminal

     command

  • ボックスデザイン→pre:shortcode

    [/] shortcode

 

 

タグ→カスタムボタン

カスタムボタン→ノーマル

ボタン

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

お問合せ

もっと詳しく

もっと詳しく

もっと詳しく

人気ランキング

ランキングはコチラ

 

カスタムボタン→角丸

角丸ボタン

角丸ボタン

角丸ボタン

角丸ボタン

角丸ボタン

カスタムボタン→ミニ

ボタン

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

 

 

カスタムボタン→MCボタン

AFFINGER5はコチラから

今すぐ使ってみる

※使って後悔なし

AFFINGER5はコチラから

今すぐ使ってみる

※使って後悔なし

AFFINGER5はコチラから

今すぐ使ってみる

※使って後悔なし

AFFINGER5はコチラから

今すぐ使ってみる

※使って後悔なし

 

カスタムボタン→ボックスメニュー

＼基本(４列)／

＼サブあり(４列)／

＼縦並びタイプ／

＼縦並びタイプ(サブあり)／

＼縦並びタイプ(単品)／

 

＼詳しい使い方は下記の記事からどうぞ／

アフィンガーで使えるボックスメニューの上手な使い方
【AFFINGER5】ボックスメニューの使い方【サイドバーにも使える】

  アフィンガーで気に入っている機能の一つがボックスメニューで、アイコン付きのリンクボックスを作成できるショートコードになります。   こてつの自由帳でもトップページのサイドバーに ...

続きを見る

 

 

カスタムボタン→ボタンA・B

ボタンA

 

ボタンB

 

タグ→会話吹き出し
おはよう！

 

もう昼だよ！

 

＼詳しい使い方は下記の記事からどうぞ／

アフィンガーで使える【会話吹き出し】の使い方
【AFFINGER5】会話ふきだしの使い方と画像設定方法

  アフィンガーを使っていると大活躍するのが会話ふきだしタグ。   こてつです   いろんなブログで使っているのを見かけます。   おはよう！   も ...

続きを見る

 

タグ→ランキング

ランキング１位（基本）

ランキング２位

ランキング３位

ランキング４位

 

 

タグ→レイアウト

全サイズ→左右３０:７０％

ABCDEFG・HIJKLNM・OPQRSTU・VWXYZ

あいうえお・かきくけこ・さしすせそ・たちつてと・なにぬねの・はひふへほ・まみむめも・やゆよ・らりるれろ・わをん

 

 

全サイズ→左右５０％

 

全サイズ→左右free％

任意のサイズに変更可能(20%)

任意のサイズに変更可能(80％)

 

全サイズ→均等横並び

  • １
  • ２
  • ３
  • ４
  • ５

 

自分でコードをいじらなくても、エンターキーで均等なコンテンツを増やせるのが良いところ。

 

PCとTab(959px以上)→３分割

 

この他にも

・左右30：70％

・左右70：30％

・左右40：60％

・左右60：40％

・左右50％

があります。

画像を３つ並べて表示させたいときなどに便利なレイアウトです。

 

レイアウト→メイン

任意のクラスを設定し、divを作成して囲むショートコード。

[st-div class="任意のクラス" margin="0 0 20px 0" padding="0 0 0 0" add_style=""]テキスト[/st-div]

 

レイアウト→背景ワイド

 

レイアウト→タブ（切替ボタン）






 

レイアウト→タブ→３つ






 

＼詳しい使い方は下記の記事からどうぞ／

アフィンガーで使える【タブ】をレイアウトする
【AFFINGER5】便利なタブのレイアウトを紹介

  アフィンガー５のタグって種類が多くて使い切れていなかったり、知らなかったものがあったりしますよね。 こてつも全部は把握していなし、まだ使ったことすらないタグがたくさんあります。 &nbs ...

続きを見る

 

タイムライン→基本


  • タイトル１

    コンテンツ


  • タイトル２

    コンテンツ


  • タイトル３

    コンテンツ


タイムライン→基本（センター）


  • タイトル１

    コンテンツ


  • タイトル２

    コンテンツ


  • タイトル３

    コンテンツ


 

タイムライン→基本（ステップ）


  • step.1

    コンテンツ


  • step.2

    コンテンツ


  • step.3

    コンテンツ


タイムライン→センター
（ステップ）


  • step.1

    コンテンツ


  • step.2

    コンテンツ


  • step.3

    コンテンツ


 

タイムライン→ブログカード

 

タイムライン（カウント）→基本


  • タイトル１

    コンテンツ


  • タイトル２

    コンテンツ


  • タイトル３

    コンテンツ


タイムライン（カウント）→センター


  • タイトル１

    コンテンツ


  • タイトル２

    コンテンツ


  • タイトル３

    コンテンツ


 

タイムライン→ブログカード（カウント）

 

タグ→その他パーツ

Googleアイコン

desktop_mac phone_iphone tablet_mac timer location_on directions_bike directions_run directions_car directions_transit subway flight local_parking restaurant store_mall_directory cake smoking_rooms arrow_back arrow_downward arrow_forward arrow_upward radio_button_unchecked close mood mood_bad sentiment_satisfied sentiment_very_dissatisfied thumb_up_alt thumb_down_alt error new_releases

 

スター

 

 

 

その他パーツ→画像付きコメント

タイトル

◯代男性

 

その他パーツ→アドセンス

ダッシュボード  →  外観  →  ウィジェット →「広告・Googleアドセンス用 336px」に設定したコンテンツをショートコードで呼び出せるタグになります。

その他パーツ→オリジナルショートコード

ダッシュボード  →  外観  →  ウィジェット  → 「オリジナルのショートコード作成ウィジェット」に設定したコンテンツをショートコードで呼び出せるタグになります。

 

その他パーツ→YouTube

タグ一つでYoutube動画リンクを静止画で表示するショートコード。

そのまま動画を貼るとページが重たくなるので、なるべくこのタグを使うことをオススメします。

 

＼詳しい使い方は下記の記事からどうぞ／

アフィンガーで使える【YouTubeリンク】をより軽くする
【AFFINGER5】意外と知らないYoutube動画リンクを軽くできるタグ

  AFFINGERを使っているのに、Youtube動画リンクをそのまま記事に貼っていませんか？   WordPressはYoutubeのURLを貼るだけで動画リンクが自動表示され ...

続きを見る

 

その他パーツ→三角（下矢印）

その他パーツ→スクロールナビ

 

その他パーツ→目次カスタム

 

 

＼詳しい使い方は下記の記事からどうぞ／

アフィンガーで使える【目次】の作り方
【AFFINGER5】目次の作り方【図解】

  今日はアフィンガーで使える目次を設定していきます。 今回作る目次はコチラ。 目次 タイトル1 タイトル2 タイトル3   １度覚えてしまえば簡単なので安心してください。 &nb ...

続きを見る

 

その他パーツ→目次カスタム（TOC＋）

ワードプレスの目次プラグイン「Table of Contents Plus」をショートコードで呼び出せるタグになります。

 

タグ→記事一覧

記事一覧/カード→記事一覧

歯列矯正

【歯列矯正】ドルツジェットウォッシャー【2機種比較&レビュー】

2020/6/29  

  歯列矯正をしていると気になるのが、食後口の中が食べかすだらけになる事。 こてつは食後の歯磨きが習慣化されたら、人前に出る時に前歯に青のりがついているなんてことはない。 ないんだけど、実は ...

歯列矯正

【大人の歯列矯正】現在までの治療費【3年3ヶ月】

2020/4/6  

  歯列矯正を始めて３年２ヶ月２３日（１１７８日）経過しました！ こてつです。 ようやく器具が外せる目処が立ったので、これまでの治療費を合計してみました！   歯列矯正にかかる費用 ...

 

記事一覧/カード→カテゴリ一覧

アフィンガーで使えるサイトのロゴをセンターに寄せる方法

AFFINGER

【AFFINGER5】サイトのロゴをセンター寄せにする方法

  こんにちわ、こてつです。 今日はアフィンガー５を使って、サイトのロゴをセンター寄せにする方法を紹介していきます。     最終的にはこんな感じになります。 &nbsp ...

アフィンガーで使えるボックスメニューの上手な使い方

AFFINGER

【AFFINGER5】ボックスメニューの使い方【サイドバーにも使える】

  アフィンガーで気に入っている機能の一つがボックスメニューで、アイコン付きのリンクボックスを作成できるショートコードになります。   こてつの自由帳でもトップページのサイドバーに ...

 

記事一覧/カード→カテゴリ一覧(スライドショー)

ガジェット 無職

2023/1/23

【ニート】Wi-Fi中継機で家中どこでも快適ネット生活

前より広い家に引っ越ししたらWi-Fiが繋がりにくい部屋がある。 それがよりによってPC部屋だからとっても困った。   目次Wi-Fiの電波が届かないデスクトップPCが有線接続できない無線LAN中継機というものがあるらしい無線LAN中継機 バッファロー WEX-G300ルーターと中継機を自動接続させる何回やってもエラーが出るiPhoneを使って手動接続する中継機とデスクトップPCを有線接続する通信速度まとめ Wi-Fiの電波が届かない 無線ルーターからPC部屋まで、とにかく電波を遮る障害物が多い ...

ReadMore

ガジェット コラム 無職

2023/2/1

【CoCグリッパー】握力を大幅アップさせる方法

2022年の11月。 引越しするので部屋の片付けをしていたら昔買った激安握力グリッパー20kgと40kgが出てきた。 不燃ゴミでポイしようと思ったんだけど、踏ん切りがつかなくてニギニギしてたらそのまま沼ってしまいました。 ていうか引越ししたことある人はわかると思うんだけど、部屋を片付けてると信じられない量のゴミが出るのなんなんだろうね。 次の家には必要ないものと思い出をバンバン捨てていくと、6畳間＋クローゼットの中だけでも90Lのゴミ袋4枚分の量になった。 とまぁ無心でポイポイしてて、実はグリッパーも1度 ...

ReadMore

ガジェット コラム

2020/6/14

【BRAVIA】一部機種Huluサービス終了

  2020年7月24日以降、SONY製品の一部機種でHuluのサービスが終了します。 こてつさん家のブラビアがこれに該当してしまったので、これを機にAmazon Fire TVの導入を検討しています。   目次Huluが観られなくなるAmazon Fire TVまとめ Huluが観られなくなる リビングのメインテレビ、SONYのBRAVIA40インチなんですけど 無線LAN機能内蔵なのでテレビでインターネットができます。 2014年発売のテレビだから、製品としては新しくないです。 当 ...

ReadMore

ガジェット

2020/6/5

BenQの色味をMacBookProに合わせる方法

  BenQ GW2480を購入して24インチの画面に綺麗な映像を映すことができて大満足なこてつさんですが、モニターの初期設定がかなり明るいなと感じました。 普段暗い部屋でMacの輝度を下げて使用しているので、モニターの初期設定だと明るすぎます。 それに、若干ですがBenQの白がMacと比べて黄色がかって見えるのも気になってきました。 モニターの詳細設定をいじったところ、BenQの色味をMacにかなり近づけることができたので今回はその設定値を公開したいと思います。   目次 はじめに ...

ReadMore

 

記事一覧/カード→スライドショー画像のみ（❇︎クラス）

BLOG キッチン フィットネス 無職

2023/1/27

筋トレ初心者のおれさま、ブロッコリーを食べて力強く立派な筋肉を育てる

野菜の王様ケールの改良種であり、明治時代初期にカリフラワーとともに日本に導入されたブロッコリーはタンパク質含有量が他の野菜と比べて圧倒的に多い。 食物繊維、ビタミン、ミネラル、スルフォラファンなど、体を健康に保つために必要な栄養成分も多く含まれ、数多のトレーニー達から愛されている。 アニメドラゴンボールに登場する伝説の超サイヤ人ブロリーの名前の由来でもあり、ブロリーもまた作中最強の純血サイヤ人として圧倒的なパワーを有している。 ブロリーは幼い頃、保育器で悟空に泣かされたことを20年以上恨んでいる陰キャラで ...

ReadMore

ブログでお金を稼ぐにはどうすればいいのか？

BLOG wordpress

2021/6/6

ブログでお金を稼ぐにはどうすればいいのか？

  ブログで収益をあげたいと思っている人に、お金が発生する流れを大まかに紹介します。   目次１、GoogleAdSense推定収益が見やすい２、Amazonアソシエイト３、アフィリエイトサービスプロバイダ（ASP）を利用する重要なのはアクセスを増やすこと誰かの役に立つ情報を継続して書き続けるブログでお金を稼ぐにはどうすればいいのか？ １、GoogleAdSense よくある目にするGoogle広告も、実は審査があります。 とりあえずテーマを決めて10記事程度できたら申請し、通過すると ...

ReadMore

BLOG

2020/8/1

【メディバンペイント】でヘッダー画像を作る

  実は毎月トップページのヘッダー画像を変えています。 気分転換です。   6月 7月 8月   8月のイメージイラストの候補がいっぱいあって（スイカ、ひまわり、花火、風鈴などなど） 悩んだ結果、夏の虫にしてみました。   セミとカブトムシ、可愛いでしょ。   【2200px*500px】のサイズで作っているので、トリミングの必要もなくアフィンガーのヘッダー画像として使えます。 ちなみに使用しているソフトはメディバンペイントです。 イラストやマンガ制作ツー ...

ReadMore

BLOG

2020/6/28

ブログ運営報告４ヶ月目〜９千PV突破〜

ブログを始めて４ヶ月が経ちました。 はっきり言って大きな変化はまだありません。 ブログってとにかく続けることが大事で、今何十万と稼いでる先人たちも最初の１年は収益０とかよく聞くので気長にやっていこうと思っています。 では、４ヶ月目の運営報告を見ていきましょう。   ブログ運営４ヶ月目の結果 ・期間：６月１日〜６月３０日 ・記事数：１８記事 ・アクセス数：総数９６１６PV（＋1261） ・収益：４２８円（＋208円） ・Twitterフォロワー数：２６人（変化なし） （）は内は先月比   ...

ReadMore

BLOG

2020/7/1

ブログを開設したときにどこにも答えが無くて地味に困ったこと

  「これどうやったら非表示にできるんだろう・・・」 「どこをいじればいいかわからない・・・」   ブログを開設したばかりの頃って、こんなことばかりですよね。   記事を書く前に、諸々の設定方法がわからなくて足止めを食らっていました。 みんなプラグインとかデザインのことは詳しく紹介してくれているけど、細かい設定について書いてくれてる人がいなくて自分で答えを見つけるまで苦労しました。   今日は「ブログを開設したときにどこに答えが無くて地味に困ったこと」を紹介していこ ...

ReadMore

 

記事一覧/カード→おすすめ記事一覧

ダッシュボード → AFFINGER5管理 → おすすめ記事一覧 → タイトルの入力 → 表示させたい記事の記事IDを入力 から設定した記事が反映されるショートコード。

 

＼詳しい使い方は下記の記事からどうぞ／

アフィンガーで使える【サイドバー】にオススメ記事
【AFFINGER5】サイドバーにおすすめ記事を表示する方法【わかりやすい図解】

  今日はサイドバーに選んだ記事を表示させるカスタマイズをしていこうと思います。   こてつの自由帳はこんな感じです。   １０分ほどで設定できるくらい簡単なカスタマイズ ...

続きを見る

 

記事一覧/カード→ブログカード（参考）

参考【ナビで快適】自転車用スマホホルダー導入【ツーリング・サイクリング・ウーバーイーツ】

  移動手段のメインが原付バイクのこてつさん。 布マスクは届いていませんが、軽自動車税の納付書は届いています。   スマホをバイク用のナビとして使用するために、スマホホルダーを購入 ...

続きを見る

 

記事一覧/カード→ブログカード（CHECKふきだし）

こちらもCHECK

【BenQ GW2480】在宅勤務でモニター品薄

  こてつさんは在宅勤務している訳ではないのですが、ニート生活効率化のために初めてモニターを購入しました。   2020年のAppleの初売りで購入した“MacBook Pro13 ...

続きを見る

 

タグ→条件表示

表示・非表示を指定できるショートコード。

・コメントアウト
・エディタ用メモ
・PC閲覧時のみ表示
・PC閲覧時のみ非表示
・AMPページのみ表示
・AMPページのみ非表示
・フロントページのみ表示
・フロントページのみ非表示
・指定したカテゴリーIDのみ非表示

 

タグ→ショートコード補助

ショートコード補助→Webアイコン（クラス）

ショートコード「fontawesome="ココに挿入"」に使えるコード。

ウェブから探す手間が省けるので便利。

今回はカスタム ボタンミニに挿入してみました。

 

メモ チェック チェック(v) 注意 はてな 虫メガネ 虫メガネ(＋) 矢印右 矢印下 矢印右２ 矢印下２ 矢印右３ 矢印下３ ハート
ユーザー コメント 電球 おしらせ メール コード ギフト ダイヤモンド ダウンロード Twitter Facebook YouTube Amazon 王冠 初心者

 

ショートコード補助→アニメーション（クラス）

動き サンプル コード
45°揺れ サンプル faa-wrench animated
ベル揺れ サンプル faa-ring animated
横揺れ サンプル faa-horizontal animated
縦揺れ サンプル faa-vertical animated
点滅

サンプル

 faa-flash animated
バウンド サンプル faa-bounce animated
回転

サンプル

 faa-spin animated
ふわふわ サンプル faa-float animated
大小 サンプル faa-pulse animated
シェイク サンプル faa-shake animated
シェイク(強) サンプル st-shake
拡大(ゆれ) サンプル faa-tada animated
過ぎる サンプル faa-passing animated
戻る サンプル faa-passing-reverse animated
バースト サンプル faa-burst animated
落ちる サンプル faa-falling animated

 

＼詳しい使い方は下記の記事からどうぞ／

アフィンガーで使えるアニメーションタグの使い方
【AFFINGER5】webアイコン、画像、文字を動かすアニメーションタグの使い方

  便利な機能が多いアフィンガー５。 ちょっとした装飾ならショートコード一つで出来てしまいます。   いろんなブログでよくみるfontawesomeのwebアイコン、画像、文字もア ...

続きを見る

 

 

ショートコード補助→HTMLカラーコード

白 #ffffff
赤濃 #e53935
赤 #f44336
青濃 #039BE5
青 #03A9F4
青薄 #E1F5FE
緑濃 #43A047
緑 #4CAF50
緑薄 #E8F5E9
橙濃 #FFB300
橙 #FFC107
橙薄 #FFF3E0
黒濃 #212121
黒 #424242
黒薄 #fafafa
黄薄 #FFFDE7

ショートコード補助→HTMLカラーコード(ブランド)

Twitter

Facebook

hatena

Wordpress

Amazon

LINE

 

ショートコード補助→定型文

・＼ バンザイ ／

・※時期により内容が異なる場合がございます。詳細は公式サイトにてご確認下さいませ。

・※掲載されている文字、写真、イラスト等は著作権の対象となっています。無断利用を固く禁止しております。

・これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

 

まとめ

アフィンガーで使えるタグの一覧でした。

次々新しい機能が出てきますね。すごいです。

 

ブログを始めるならアフィンガー一択です。

 

アフィンガー５はこちらから>>

 

 

ブログ編集時の参考にしてみてくださいね。

この記事タイトルとURLをコピー

-AFFINGER

© 2024 こてつの自由帳 Powered by AFFINGER5