【AFFINGER5：使い方】テキストパーツ逆引き辞典

 

ここあです。

 

WordPressテーマ「AFFINGER5（アフィンガー 5）」には

非常に多くの記事装飾機能があります。

 

記事装飾機能が多いテーマというのは

ブログを運営する側にとって

という2つの大きなメリットがあります。

 

しかし、記事装飾のパーツが多すぎると逆に

どの装飾を使えば効果的なのかが分かりにくくなり

さらに、全ての記事パーツを覚えるのもすごく面倒です。

 

なので正直、私は「AFFINGER5（アフィンガー 5）」の

記事装飾機能を調べること自体面倒だし

マニュアルサイトや他の記事を見ても

 

基本的には記事装飾用パーツの紹介だけがされており

具体的にどうやって表示させたらいいかが分からず

結局自分で探す羽目になっています。

 

ということで、もっと分かりやすい方法がないか？と考えたのが

AFFINGER5（アフィンガー 5）記事装飾パーツの逆引き辞典。

 

パーツを見ると同時に、

それをどういう手順で作業すればいいかが分かれば

かなり快適に作業することができる。

 

そう私は考えました。

 

そもそもAFFINGER5（アフィンガー 5）は

それだけ記事装飾機能が充実しており

記事を書くのもすごく楽しいテーマですからね。

 

なので、他のサイトにはない分かりやすさにこだわった

AFFINGER5の逆引き辞典として今後は少しずつ

記事をまとめていきたいと考えておりますので

 

ぜひ参考にしていただけたらと思います。

 

AFFINGER5テキストパーツの表示方法

今回あなたにご紹介するAFFINGER5（アフィンガー 5）のテキストパーツは

以下の手順で表示することができます。

 

記事を投稿する際、ビジュアルエディタの編集画面より

タグ → テキストパーツ →クリップメモと辿ってください。

 

そうすれば簡単に以下のテキストパーツが表示できます。

 

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

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

 

タグ → テキストパーツ → クリップメモ → 外部リンク

 

タグ → テキストパーツ → クリップメモ → ブックマーク

 

タグ → テキストパーツ → クリップメモ → おしらせ

 

タグ → テキストパーツ → クリップメモ → はてな

 

タグ → テキストパーツ → クリップメモ → コメント

 

タグ → テキストパーツ → クリップメモ → コード

 

タグ → テキストパーツ → クリップメモ → ポイント

 

タグ → テキストパーツ → クリップメモ → ユーザー

 

タグ → テキストパーツ → クリップメモ → 初心者

 

タグ → テキストパーツ → クリップメモ → 注意文

 

タグ → テキストパーツ → クリップメモ → 注意文（グレー）

 

なお、一番下にある以下のショートコード

 

このショートコードはそれぞれコードの意味を表す

ガイドの役目を果たすものとなりますので、

あなたが記事の装飾で使用するものではありません。ご注意ください。

 

テキスト編集モードにした際のコードの意味は以下の通りです。

 

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

続いて「ミニふきだし」の表示方法です。

 

ミニふきだしを表示する場合は、以下の手順で辿ってください。

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

表示結果は以下の通りです。

 

タグ → テキストパーツ → ミニふきだし → 基本

 

タグ → テキストパーツ → ミニふきだし → オレンジ

 

タグ → テキストパーツ → ミニふきだし →ピンク

 

タグ → テキストパーツ → ミニふきだし → ブルー

 

タグ → テキストパーツ → ミニふきだし → グリーン

 

タグ → テキストパーツ → ミニふきだし → レッド

 

なお、ミニふきだしに文字入力する場合は以下のように、

］ここに文字［　※かっこの間に文字を入力してください。

 

テキスト編集モードにした際のコードの意味は以下の通りです。

 

また、ミニ吹き出しに文字を入力する際には

文字を先に入力してから、ミニふきだしに入力したい文字を選択し

ミニふきだし基本

 

続いて、タグ → テキストパーツ → ミニふきだし → 基本

このような手順でパーツの設定をすると簡単にできます。

 

AFFINGER5テキストパーツ：複合

続いて「複合」のテキストパーツです。

 

そもそも「複合」とは何やねん？って感じですよね（笑）

 

ある意味、表示させるまで内容が分からないのは

正直、ストレスではありませんか？

 

ということで、とりあえず「複合」の表示手順は

タグ → テキストパーツ → 複合 このようになります。

 

表示結果は以下の通りです。

 

タグ → テキストパーツ → ミニふきだし → 自由なメモ

 

タグ → テキストパーツ → ミニふきだし → ココがポイント

 

タグ → テキストパーツ → ミニふきだし → ココがおすすめ

 

タグ → テキストパーツ → ミニふきだし → ココがダメ

 

タグ → テキストパーツ → ミニふきだし → ココに注意

 

タグ → テキストパーツ → ミニふきだし → もっと詳しく

 

タグ → テキストパーツ → ミニふきだし → 女性コメント

 

タグ → テキストパーツ → ミニふきだし → 男性コメント

 

なお「複合」のテキストパーツ を使用する場合は

コメントボックスにダミーテキストがありませんので

テキストを入力する際には

 

 

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

続いて「複合」のテキストパーツ（アイコンなし）の

パーツ紹介です。

 

このアイコンなしのテキストパーツは

先に紹介した「複合」のテキスト入力部分に設定されている

アイコンがミニふきだし内に移動したものとなります。

 

なので、あなたのお好みに合わせて使い分けてくださいね。

 

ということで、「複合（アイコンなし）」の表示手順は

タグ → テキストパーツ → 複合（アイコンなし） このようになります。

 

表示結果は以下の通り。

 

タグ → テキストパーツ → ミニふきだし → 自由なメモ

 

タグ → テキストパーツ → ミニふきだし → ココがポイント

 

タグ → テキストパーツ → ミニふきだし → ココがおすすめ

 

タグ → テキストパーツ → ミニふきだし → ココがダメ

 

タグ → テキストパーツ → ミニふきだし → ココに注意

 

タグ → テキストパーツ → ミニふきだし → もっと詳しく

 

タグ → テキストパーツ → ミニふきだし → はてなマーク

 

なお、こちらのショートコードもダミーテキストがありませんので

テキストを入力する際には、2行目にある ］かっこの間［に文字を

入力してくださいね。

 

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

このまるもじパーツは、丸文字にできるのかと思いきや（笑）

エッジが丸い素材背景に文字を入れられるという記事装飾パーツ。

 

なので、やはり表示させてみないと分からないものです＾＾；

 

ということで、まるもじ（小）の表示手順は

タグ → テキストパーツ → まるもじ（小） このようになります。

 

表示結果は以下の通り。

 

タグ → テキストパーツ → まるもじ（小） → 基本

まるもじ（小）基本

 

タグ → テキストパーツ → まるもじ（小） → オレンジ

まるもじ（小）オレンジ

 

タグ → テキストパーツ → まるもじ（小） → ピンク

まるもじ（小）ピンク

 

タグ → テキストパーツ → まるもじ（小） → ブルー

まるもじ（小）ブルー

 

タグ → テキストパーツ → まるもじ（小） → うすい注意

まるもじ（小）うすい注意

 

タグ → テキストパーツ → まるもじ（小） → 注意

まるもじ（小）注意

 

なお、テキスト編集モードにした際のコードの意味は以下の通りです。

 

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

続いてテキストパーツまるもじ（大）です。

こちらのパーツは先にご紹介したまるもじ（小）を

少しだけダイナミックにした感じになります。

 

まるもじ（大）の表示手順は

タグ → テキストパーツ → まるもじ（大） このようになります。

 

表示結果は以下の通り。

 

タグ → テキストパーツ → まるもじ（大） → 基本

まるもじ（大）基本

 

タグ → テキストパーツ → まるもじ（大） → オレンジ

まるもじ（大）オレンジ

 

タグ → テキストパーツ → まるもじ（大） → ピンク

まるもじ（大）ピンク

 

タグ → テキストパーツ → まるもじ（大） → ブルー

まるもじ（大）ブルー

 

タグ → テキストパーツ → まるもじ（大） → はてな

まるもじ（大）はてな

 

タグ → テキストパーツ → まるもじ（大） → チェック

まるもじ（大）チェック

 

タグ → テキストパーツ → まるもじ（大） → うすい注意

まるもじ（大）うすい注意

 

タグ → テキストパーツ → まるもじ（大） → 注意

まるもじ（大）注意

 

なお、テキスト編集モードにした際のコードの意味は以下の通りです。

 

AFFINGER5テキストパーツ：HTML（カスタム）

続いてテキストパーツ：HTML（カスタム）です。

 

こちらのテキストパーツにつきましては

おそらくほとんどの人が「ルビ（ふりがな）」の機能しか

使わないと思いますので

 

「ルビ（ふりがな）」の使い方だけ簡単に解説させていただきますね。

 

通常、ブログの記事を書く時には

小学生や中学生でも読めるぐらいの漢字にとどめるのが理想的です。

 

なぜなら、難しい漢字をたくさん使ってしまうと

ブログの読者が難しい漢字を読むことができず

非常にストレスを感じてしまうからです。

 

しかし、

いくら難しい漢字を表示させない方がいいからといって

 

全てをひらがなに置き換えてしまうと

文章は読みにくくなってしまいます。

 

そんな時に役立つのが「ルビ」の表示機能。

 

ということで、難しい漢字にルビを振る場合は

まず初めにルビを振りたい漢字を入力します。

 

例えば、「林檎」という漢字にルビを振ってみましょう。

 

「林檎」と入力したら、続いて

林檎の部分だけを選択し

タグ → テキストパーツ → HTML（カスタム）→ルビ（ふりがな）をクリック。

 

そうすると、このように「林檎ふりがな」の文字の上に

「ふりがな」と文字が表示されたと思います。

 

なので、あとはこのふりがなの文字を選択し、「林檎ふりがな」

「林檎りんご」と直接打ち替えればOKです。

 

もしも文字の打ち替えがうまくいなかい場合は

テキスト編集モードにして文字を打ち替えると簡単にできます。

 

ということで、難しい漢字にルビを振りたい場合は

HTML（カスタム）から選択できると覚えておいてくださいね。

 

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

使いどころが少々難しいので、あまり使わないかもしれませんが

テキストパーツの機能にはカスタムフォントという項目もあります。

 

なので、もしも影付きの書体などを表示させたい時には

使えると思いますので、そういう機能があるということを

覚えておいていただけたらと思います。

 

カスタムフォントの表示手順は

タグ → テキストパーツ → カスタムフォント  このようになります。

 

表示結果は以下の通り。

 

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

カスタムフォントデフォルト

 

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

カスタムフォント白影

 

カスタムフォントは上記2種類になりますが、

フォントサイズや文字の色、影の色まで変更可能ですので

使い方によっては様々な部分に応用させることができそうですね。

 

AFFINGER5テキストパーツ：ステップ

続いて、テキストパーツのステップです。

 

ブログの記事を書いてると、やはり欲しくなるのがステップ機能。

説明の流れを順序良くステップ表記できたら最高ですよね。

 

AFFINGER5にはそんなステップ表示機能が実装されています。

 

テキストパーツ：ステップの表示手順は

タグ → テキストパーツ → ステップ  このようになります。

 

表示結果は以下の通り。

 

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

step
1タグからショートコードを表示させる

step
2stepの数字を打ち替える

 

こんな感じで流れを作り、記事をより分かりやすくすることができます。

 

なお、後で一緒に説明する「ポイント」と、このステップの色変更に関しては

ショートコードで直接変更するのではなく

 

カスタマイザーの「［＋］オプションカラー」の項目にある

ステップ/ポイントの部分で変更します。

 

AFFINGER5テキストパーツ：ポイント

非常にシンプルですが使いやすいテキストパーツ「ポイント」

 

使いどころはたくさんあるかと思います。

 

テキストパーツ：ポイントの表示手順は

タグ → テキストパーツ → ポイント  このようになります。

 

表示結果は以下の通り。

 

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

ポイントはズバリ！ポイント

 

ポイントのテキストパーツはショートコード内に文字を入力するだけ

太字になる設定もされておりますので、非常に使い勝手の良い

テキストパーツになっています。

 

なので、ぜひ活用してみてください。

 

AFFINGER5テキストパーツ：ラベル

画像の上にタスキのようにかかり

非常にキャッチーなテキストパーツ「ラベル」

 

このラベルも様々な部分で使えます。

 

テキストパーツ：ラベルの表示手順は

タグ → テキストパーツ → ラベル  このようになります。

 

表示結果は以下の通り。

 

タグ → テキストパーツ → ラベル

上記のような感じで、ショートコードが表示されますので

 

ショートコードの間に画像を入れると

 

このように表示されます。

 

ということで、「ラベル」のテキストパーツは基本的に

画像と合わせて使うためのパーツになります。

 

ちなみにラベルのカラーや文字の色は、

ショートコードで簡単に変えることができるので、非常に便利です。

 

AFFINGER5テキストパーツ：流れる文字

テキストパーツの最後は「流れる文字」です。

 

記事の装飾に関してはあらゆることができてしまう。

それがAFFINGER５です。

 

テキストパーツ：流れる文字の表示手順は

タグ → テキストパーツ → 流れる文字（marquee風）  このようになります。

 

表示結果は以下の通り。

 

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

なお、この「流れる文字」はAMP対応しておりませんので

記事をAMP化したい場合は、ご使用を控えるようにしてくださいね。

 

テキストパーツ逆引き辞典まとめ

今回はAFFIGER5の記事装飾機能となる

テキストパーツの表示方法についてまとめてきました。

 

とは言え、AFFIGER5のテキストパーツは

ショートコードを打ち替えることで

簡単に色や、アイコン なども変えることができます。

 

なので、AFFIGER5のテキストパーツを

フルに活用しようと思うと今回の説明だけでは

正直、まだまだ不十分です。

 

AFFIGER5というのは、それだけ機能的で

使い勝手も良いんですね。

 

だから、当然、使いこなせば使いこなすほど

他のテーマに変える必要もなくなりますし

そういう意味では、このAFFIGER5というテーマは

 

ある程度、ワードプレスの運営にも慣れ

サイトの運営をより効果的に行い方や

他のサイトとより差別化したい人に向いています。

 

ということで、まだまだ使い方の説明としては

不十分だということは私自身もわかっておりますので

引き続き、さらに機能を生かせる記事を増やしていきます。

 

なので、今後の記事にも乞うご期待ください。

最後までお読みいただきありがとうございました！