【AFFINGER6】文字装飾などができる「タグ機能」一覧（使い方総まとめ）パーツ・デザイン・ボタン等について

WordPressにおいて人気テーマであるAFFINGER6（アフィンガー）には、見やすいブログを作るのに文字装飾などができる「タグ機能」がたくさんあります。

「タグ機能」を活用することで、以下の様な記事執筆時の「こうしたい！」を実現することが可能です。

「タグ機能」を使いこなすにはちょっとだけコツがあります。

そして、今は「ブロックエディタ（Gutenberg）」で記事を編集することが主流となってきましたが、「クラシックエディタ」で編集したい！という方も多いと思います。

この記事では、AFFINGER6の「クラシックエディタ」におけるタグ機能の使い方について解説しています。

私たちもブログを始めたての頃は使いたい機能が思うように表示されず、かなり苦労しました。

そこでこの記事では、「実際にどの部分に文字を入力するのか？」・「機能を使うための初期設定はどこで行うのか？」等、装飾見本だけでなく、実際の使い方まで詳しく解説しています。

ぜひ参考にしてみてください♪

AFFINGER6の「タグ機能」とは？

AFFINGER6（クラシックエディタ）では投稿画面の編集ツールバーにタグ▼というものが出てきます。

ブログ記事はもちろん、資料・チラシ・ホームページ等、私たちが情報を得るために目にする様々な情報媒体が、ひたすら真っ黒な文章だけだったらどう思いますか？

読む気が失せますよね？

より分かりやすく、目につきやすいものにするため「文字をカラーにする」「重要な部分を四角で囲う」「画像を入れる」「アニメーションを付ける」等の装飾をしたいと思うはずです。

タグ▼の部分をクリックすると、様々な装飾タグが展開します。

「テキストパーツ」「ボックスデザイン」「ランキング」「記事一覧」等、数多くの装飾タグが用意されています。

種類が多すぎて正直すべての機能を使いこなすことは難しいと思います。

ご自身の記事編集ページとこの記事をいったりきたりしながら、自分の使いたい機能を色々試してみてください♪

 

AFFINGER6の「タグ機能一覧」

AFFINGER6（クラシックエディタ）で文章装飾等のタグ機能の詳細について、それぞれ紹介していきます。

 

テキストパーツ（13種類）

① クリップメモ

「クリップメモ」は全部で12種類あります。

ちょっと目立たせたい文章に使うと効果的です。

 

② クリップメモ（テキスト）

「クリップメモ（テキスト）」は全部で９種類あります。

「クリックメモ」との違いは、「クリップメモ(テキスト)」ではアイコンに加えてアイコンを説明する文字が入ります。

「クリップメモ」より色で囲われる四角の範囲が大きいので、より目立たせたい時に使うと効果的です。

 

③ ミニふきだし

「ミニふきだし」は全部で７種類あります。

 

「一言コメント」や、ちょっとした単語や説明を目立たせたい時に使うと効果的です。

 

④ 複合

「複合」は全部で８種類あります。

複合は「ふきだし」＋「ボックス」＋「大きいアイコン」の組合せとなっています。

かなり大きなアイコンにボックス表示されるので、特に目立たせたい箇所に使うと効果的です。

私たちも記事の要点等を記載する場合に「ココがポイント」はよく使っています。

 

⑤ 複合（アイコンなし）

「複合（アイコンなし）」は全部で７種類あります。

複合（アイコンなし）は「ふきだし」＋「ボックス」＋「ふきだし内に小さなアイコン」の組合せとなっています。

アイコンあり、よりもスッキリした印象です。

複合（アイコンなし）もアイコンありと同様に、「ふきだし」部分は自由に変更が可能です。

 

⑥ まるもじ（小）

「まるもじ（小）」は全部で６種類あります。

ここに文字を入力するで使用しているのが「まるもじ（小）」です。

 

基本 オレンジ ピンク ブルー うすい注意 注意

 

文章や文字の一部分だけを強調したい時や、見出しの先頭等に設置して目を引く様に使うと効果的です。

要確認見出しの中に入れ込むことも可能です。

 

⑦ まるもじ（大）

「まるもじ（大）」は全部で８種類あります。

基本

オレンジ

ピンク

ブルー

はてな

チェック

うすい注意

注意

強調度合いに応じて（小）と（大）を使い分けると良いと思います。

 

⑧ HTML（カスタム）

「HTML（カスタム）」は全部で３種類あります。

ルビ（ふりがな）

漢字やアルファベットの上に「ふりがな」を振ることが可能です。

pタグ

spanタグ

 

「pタグ」「spanタグ」は文字の装飾の際に利用するコードです。

[ st-p add_style="color:red"]あいうえお[/st-p]の様に、「”　”」にカラー等を入力して文字装飾をします。

あいうえお

これらのコードが１クリックで挿入できるのは便利ですが、わざわざこのコードを使わなくてもAFFINGER6には簡単に文字装飾ができる機能があります。

そのため、「pタグ」「spanタグ」の使用頻度はゼロに近いと思います。

 

⑨ カスタムフォント

「カスタムフォント」は全部で２種類あり、代表的な大文字に装飾することができます。

デフォルト：「黒字の大文字」

デフォルト

白影：「白抜きの大文字」

白影

 

⑩ ステップ

設定方法や購入方法の流れ等、何かの手順を踏んだ説明をする際に役立ちます。

step
1「ステップ」を選択

ステップのコードが自動挿入される。

step
2［　］と［　］の間に表示したい文字を入力

改行して文章を入力することで、手順の説明についての記述ができる（この文章部分）。

テキストパーツのクリップメモ等も挿入可能。

step
3「ステップ」を再度選択

ステップのコードが再度、自動挿入される。

step
4ステップの数字を「２」に変更する

自動挿入されたコードは数字が「１」のままのため、[ st-step step_no="２"]に変更する。

これを繰り返すことでステップを増やすことが可能です。

 

⑪ ポイント

「ポイント」は丸印の可愛いアイコンを入れることができます。

クリップメモ・複合ほどは目立たせたくない場合に使うと便利です。

 

⑫ ラベル

「ラベル」は画像の端にたすき掛けのラベルを張ることができます。

 

⑬ 流れる文字（marquee風）

トップページで【お知らせ】や【新着情報】等をアナウンスしたい時に使うと効果的です。

 

➤「テキストパーツ」説明の先頭へ戻る

 

ボックスデザイン（10種類）

① バナー風ボックス

「バナー風ボックス」は全部で３種類あります。

画像編集が苦手な方でも「バナー風ボックス」を使えば、画像を簡単にバナーにすることができるので、とても便利です。

 

バナー風ボックスのコードを編集して使うと、このようなバナーを作ることができます。

10分レシピ５選！

あともう１品が簡単に叶う

「時短レシピ」をご紹介

※ バナー風ボックスの見本のため、上記バナーをクリックすると、当ブログの以下の記事にリンクするように設定しています。

【AFFINGER】「お知らせ(NEWS)・更新情報」をトップページに表示する方法

 

② マイボックス

「マイボックス」は全部で10種類あります。

 

 

これらのマイボックスはそのまま使うこともできますが、自分のサイトの雰囲気に合わせて色等の設定をカスタマイズすることができます。

 

③ マイボックス（＋CSSクラス）

「マイボックス（＋CSSクラス）」は全部で10種類あります。

枠のみのボックス・箇条書き・数字等、用途に合わせて使い分けるとわかりやすい説明になると思います。

 

④ タイトル付きフリーボックス

「タイトル付きフリーボックス」は全部で10種類あります。

Webアイコンや文字の色、背景の色等をカスタマイズ可能です。

 

⑤ メモボックス

マイボックス・マイボックス（＋CSSクラス）にも似たメモボックスがありますが、この「メモボックス」は一番シンプルなデザインです。

過剰な装飾にならず他の文章の邪魔をしないので、補足情報を記載する時に使用すると効果的だと思います。

 

⑥ スライドボックス

「スライドボックス」は文中では非表示にし、「＋」を押すと隠れていた文章やコンテンツが現れます。

 

⑦ チェックボックス（番号なしリスト）

「チェックボックス（番号なしリスト）」は箇条書きの文章に「チェック・下線・ボックス」の装飾を簡単に加えることができます。

記事の編集画面には箇条書きの基本機能が２つあります。

上の画像の赤枠が「番号なしリスト」、黄色枠が「番号付きリスト」です。

箇条書きにしたい文章を入力し、ドラッグして文章すべてを選択した状態でこの「リスト」をクリックすると箇条書きに基本装飾が加わります。

ココでは例として赤枠「番号なしリスト」の「四角」を選択しています。

 

• 箇条書きにしたい文章を入力する。Enterを押下して次の行へ。
• ２つ目の文章を入力。Enterを押下して次の行へ。
• ３つ目の文章を入力。

 

このようにシンプルな箇条書きになり、単純に「・」を入力して改行するよりも綺麗にまとまった文章になります。

チェックボックス（番号なしリスト）はこのシンプルな箇条書きの文章に「チェック・下線・ボックス」の装飾を簡単に加えることができます。

 

⑧ こんな方におすすめ(ｖ)

こんな方におすすめ(ｖ)は視覚的に目につきやすく、かつ過剰過ぎない装飾ができるボックスです。

選択すると自動的にボックスが挿入されるので、「これはダミーのテキストです」の部分に文字を入力します。

 

⑨ こんな方におすすめ[ｖ]

こんな方におすすめ[ｖ]はアイコンの種類が(ｖ)と少し異なりますが、文字の入力方法は全く同じです。

深く考えず、デザインが自分の好みの方を使うので良いと思います。

 

 

⑩ ガイドマップメニュー

「ガイドマップメニュー」は記事を読んでもらいたい順番に並べ、ワンクリックで該当の記事にリンクさせることができます。

 

➤「ボックスデザイン」説明の先頭へ戻る

 

カスタムボタン（７種類）

「カスタムボタン」は全部で７種類あります。

カスタムボタンはクリックすることで指定のページへリンクさせることができます。

① ノーマル

「ノーマル」は全部で11種類あります。

 

② 角丸

「角丸」は全部で５種類あります。

「URL」「ボタン上に表示される文字」の入力方法はノーマルと同じです。

 

③ ミニ

「ミニ」は全部で５種類あります。

「URL」「ボタン上に表示される文字」の入力方法はノーマルと同じです。

 

④ MCボタン

「MCボタン」は全部で４種類あります。

※MCはボタンの下に表示される「マイクロコピー」のことを指しています。

 

MCボタンは非常に目につきやすく、読者にクリックを促しやすいボタンなので、アフィリエイト・セミナー申込等の集客に適していると思います。

MCボタンも文字・背景色の変更やWebアイコンを入れる等のカスタマイズが可能です。

デフォルトで用意されているこれらのMCボタンの配色は原色に近いので、ご自身のページの雰囲気に合った色合いにカスタマイズしてみてください♪

 

⑤ ボックスメニュー

「ボックスメニュー」は全部で５種類あります。

ボックスメニューは「アイコン」と「メニュー」が一体となった視覚的にわかりやすい表示をすることができます。

 

⑥ ボタンＡ

⑦ ボタンＢ

「ボタンＡ」「ボタンＢ」は装飾なしのシンプルなボタンです。

 

この２つのボタンはアフィリエイトリンクを貼る時に役立ちます。

 

「https:/～」から始まるリンクであれば問題ありません。

しかし、例えばA8.netのアフィリエイトリンク「<a href="https://～」は「https:/～」から始まらず、リンクの改変が禁止されています。

そんな時にMCボタン等ではなく、「ボタンＡ」「ボタンＢ」を使用します。

 

➤「カスタムボタン」説明の先頭へ戻る

 

会話ふきだし

「会話ふきだし」は最大８個まで登録ができます。

写真や画像を一度設定すると、１クリックで簡単に呼び出して使うことが可能です。

 

 

ランキング

「ランキング」はランク付けして何かを紹介する際に、ランキングの見出しを呼び出せる機能です。

挿入されたコードのstar=""の「"●"」部分に半角数字を入力することで星を表示させることができます。

 

 

 

レイアウト（８種類）

「レイアウト」は全部で８種類あります。

文書や画像を分割表示させる際に使用し、パソコン・タブレット・スマホのすべてで指定した横並びの分割表示となります。

① 全サイズ

 

 

② pcとtab（959px以上）

「pcとtab（959px以上）」はパソコンとタブレットでのみ横並びに分割されて表示されるレイアウトです。

スマホでは縦に表示されます。

①の「全サイズ」は横並びの表示がスマホで見るとかなり小さくなるため、スマホでは横並び表示にしたくない箇所に使用すると良いと思います。

 

③ DIV

任意のクラスを設定する「div」を作成することができます。

ただ、あえて設定しなくてもAFFINGER6のタグ機能やスタイル機能で十分なので、こちらのサイトでは使用していません。

 

 

④ 背景ワイド

記事（文字や画像）が表示されるエリアは画面の横幅いっぱいではなく、左右に少し余白が出ます。

「背景ワイド」はこの余白をなくし、画面の横幅いっぱいに表示させることができる機能です。

backgroud_image="" の「"●●●"」に画像のURLを入力すると、背景に画像を使用することもできます。

 

bgcolor="#fafafa" の「"●●●"」にカラーコードを入力して好きな色に背景を変更することもできます。

 

目立たせたい箇所や背景に画像を使用したい時等に活用してみてください♪

 

⑤ タブ切替ボタン

「タブ切替ボタン」はボタンをクリックするだけで別のページにとぶことなく、表示を画面内で切り替えることができます。

切替ボタンは「２つ・３つ・４つ」の３種類あるので、表示したいコンテンツの数に合わせて使い分けるようにしましょう。

 

このようにタブ切替ボタンがあると、スマホでも見栄えを良くすることができます。

タブの中のコンテンツは、画像・文字・表等を入れることができます。

 

⑥ タブ

「タブ」はボタン部分のデザインに少し違いがありますが、⑤タブ切替ボタンと機能は同様です。

好みのデザインのタブを使ってみてください♪

 

 

⑦ タイムライン

「タイムライン」は全部で５種類あります。

申込方法・購入方法等の手順の説明や、順番に特定の記事を読んでもらいたい時等に使用すると効果的です。

 

⑧ タイムライン（カウント）

「タイムライン（カウント）」は全部で３種類あります。

点（●）の中に数字が表示されます。

 

➤「レイアウト」説明の先頭へ戻る

 

その他パーツ（９種類）

「その他パーツ」は全部で９種類あります。

① Googleアイコン

Googleアイコンは30種類用意されており、ワンクリックでアイコンを呼び出すことができます。

アイコンの色を変更することもできます。

desktop_mac Mac	phone_iphone iPhone	tablet_mac tablet	timer タイマー	location_on Map
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 手(Like)	thumb_down_alt 手(Bad)	error ！(error)	new_releases ！(new)

 

② スター

「スター」は５～１個の星マークを挿入することができます。

５
４.５
４
３.５
３
２
１

 

③ カウントダウン

「カウントダウン」はEX版限定の機能で、全部で３種類あります。

設定した日時まで自動でカウントダウンンの表示をすることができます。

 

④ 画像付きコメント

「画像付きコメント」は口コミ・レビュー・コメント等を記載する際に便利な機能です。

 

 

 

 

⑤ アドセンス

「アドセンス」は手動でアドセンス広告を貼りたい場合に使用します。

 

⑥ オリジナルショートコード

「オリジナルショートコード」は、事前にオリジナルのショートコード作成ウィジェットで作成しておいたパーツ（画像・文章・ボタン・ボックス装飾等の組合せ）を１クリックで呼び出すことができます。

よく使うパーツをすぐに呼び出すことができて便利ですが、１つしか登録できないので注意してください。

 

⑦ YouTube

タグ機能の「YouTube」を使用すると、記事内にYouTube動画を埋め込むことができます。

掲載したいYouTube動画のリンクを直接貼り付けることもできますが、タグ機能を利用した方が動画の表示速度が速くなるため、SEO対策的にも効果的です。

 

⑧ 三角（下矢印）

１クリックで「三角（下矢印）」を挿入することができます。

 

⑨ スクロールナビ

「スクロールナビ」はリンクの説明文字が長い時や、リンクの数が多い時に横にスクロールできる機能です。

 

➤「その他パーツ」説明の先頭へ戻る

 

記事一覧/カード（５種類）

「記事一覧/カード」は全部で５種類あります。

① 記事一覧

「記事一覧」は、好きな場所に指定した記事の一覧を表示させることができ、記事の順番も自由に決めることができます。

以下の例は、記事IDを２つ・「rank="yes"」に設定しています。

 

② カテゴリー記事一覧

「カテゴリー記事一覧」は表示させたい記事を１つ１つ指定するのではなく、カテゴリーを指定することで、関連記事を表示することができます。

以下の例は、当ブログのカテゴリー「WordPress設定」の記事を４つ表示させる設定にしています。

 

③ カテゴリー記事一覧（スライドショー）

「カテゴリー記事一覧（スライドショー）」は②のカテゴリー記事一覧にスライドショーの機能を自動的に設定することができます。

以下の例は、当ブログのカテゴリー「WordPress設定」の記事をスライドショー表示する設定にしています。

 

④ おすすめ記事一覧

「おすすめ記事一覧」はあらかじめ表示させる記事IDを設定しておくと１クリックで一覧を呼び出すことができます。

選択するとこちらのコードのみ挿入されます。 [ st-osusume]

 

⑤ ブログカード

「ブログカード」はおすすめしたい他の記事を目立たせて挿入することができ、クリック率を上げる効果が期待できます。

コード挿入後、「id=" "」の「"●●●"」部分に表示させたい記事の「ID」を入力する。

 

➤「記事一覧/カード」説明の先頭へ戻る

 

条件表示（11種類）

「条件表示」は全部で11種類あります。

「PCでは表示させたいけれど、スマホでは非表示にしたい」等の表示方法に条件を設定することができます。

それぞれコードが挿入されるので、[　]と[　 ]で文字・画像・表などを挟みます。

先に文字・画像・表などを入力後、条件を掛けたい箇所をドラッグし、各条件表示のタグをクリックすると簡単です♪

 

① コメントアウト

記事を公開しても読者には見えないので、「この内容はまだ公開したくない・この部分だけ一時的に非公開にしたい」という場面で活用できます。

[ st-out]●●●[/st-out]

② エディタ用メモ

記事を公開しても読者には見えないので、編集画面における自分用のメモとして活用できます。

="メモ" の「メモ」部分を編集します。

[ st-comment-out memo="メモ"]

③ PC閲覧時のみ表示

パソコン閲覧時のみ表示させることができます。

[ pc]●●●[/pc]

④ PC閲覧時のみ非表示

パソコン閲覧時のみ非表示にさせることができます。

[ st-no-amp]●●●[/st-no-amp]

⑤ AMPページのみ表示

AMPページのみ表示させることができます。

[ st-amp]●●●[/st-amp]

⑥ AMPページのみ非表示

AMPページのみ非表示にさせることができます。

[ st-no-amp]●●●[/st-no-amp]

⑦ フロントページのみ表示

「AFFINGER管理 トップページの設定」でこのタグを使って入力した文字はトップページのみ表示させることができます。

[ frontonly]●●●[/frontonly]

⑧ フロントページのみ非表示

「AFFINGER管理 トップページの設定」でこのタグを使って入力した文字はトップページのみ非表示にすることができます。

[ no-frontonly]●●●[/no-frontonly]

⑨ 指定したカテゴリーIDのみ非表示

　[ catonly cat="記事ID"]●●●[/catonly]

⑩ ログイン時のみ表示

　[ login-only]●●●[/login-only]

⑪ ログアウト時のみ表示

　[ logout-only]●●●[/logout-only]

 

➤「条件表示」説明の先頭へ戻る

 

ショートコード補助（５種類）

「ショートコード補助」は全部で５種類あります。

記事作成において使用頻度が高そうなショートコードが集約されており、１クリックで各種設定をすることができます。

① Webアイコン（クラス）

「Webアイコン」は30種類のアイコンを簡単に呼び出すことができます。

※Font AwesomeのWebアイコンです。

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

 

② アニメーション（クラス）

「アニメーション（クラス）」は全部で16種類あります。

アニメーション（クラス）はタグ機能のテキストパーツ・ボックスデザイン・カスタムボタン等に表示されるWebアイコン用のアニメーションです。

45°揺れ	ベル揺れ	横揺れ	縦揺れ
点滅	バウンド	回転	ふわふわ
大小	シェイク	シェイク(強)	拡大(ゆれ)
過ぎる	戻る	バースト	落ちる

 

単純に文字やアイコン等にアニメーションを付けたい時は「タグ機能」ではなく、「スタイル＞アニメーション」を使用してください。

テキストパーツ等にアニメーションを設定した例をいくつか紹介します。

に「45°揺れ」のアニメーションを設定↓

 

thumb_down_alt に「落ちる」のアニメーションを設定↓

に「大小」のアニメーションを設定↓

 

③ HTMLカラーコード

「HTMLカラーコード」は全部で17種類あります。

記事作成において使用頻度が高そうなカラーコードが集約されており、自分で「#FFFFFF」の指定をしなくても、１クリックでカラー設定をすることができます。

白（#ffffff）

 

赤濃（#e53935） 赤（#f44336） 赤薄（#ffebee）

 

青濃（#039BE5） 青（#03A9F4） 青薄（#E1F5FE）

 

緑濃（#43A047） 緑（#4CAF50） 緑薄（#E8F5E9）

 

橙濃（#FFB300） 橙（#FFC107） 橙薄（#FFF3E0）

 

黒濃（#212121） 黒（#424242） 黒薄（#FAFAFA）

 

黄薄（#FFFDE7）

 

 

④ HTMLカラーコード

「HTMLカラーコード（ブランド）」は全部で６種類あります。

代表的なブランド６つが実際に使っているカラーコードを１クリックで呼び出すことができます。

  Twitter（#40a2f5）

 

  Facebook（#415c9d）

 

hatena（#3290e1）

 

  WordPress（#2d88c0）

 

  Amazon（#eb9100）

 

  LINE（#39b900）

 

⑤ 定型文

「定型文」は全部で４種類あります。

記事作成において使用頻度が高そうな定型文を１クリックで挿入することができます。

 

➤「ショートコード補助」説明の先頭へ戻る

 

 

まとめ

この記事では、AFFINGER6の「タグ機能」でできる文字装飾について解説しました。

本内容はAFFINGER6の通常版で利用できる機能ですが、本当に多種多様な機能がAFFINGER6には標準搭載されているので、全部の使い方を覚えるのは大変だと思います。

「これどうやって使うんだっけ？」「どの装飾が自分の記事に合いそうかな？」と思った場面等で、編集画面とこの記事を行ったり来たりしていただき、この記事が少しでも記事作成のお役に立てると嬉しいです♪