AFFINGER5

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

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

 

ここあです。

 

WordPressテーマ「AFFINGER5(アフィンガー 5)」には

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

 

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

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

  • 記事の内容を分かりやすく伝えやすい
  • 記事を書くのが楽しくなる

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

パーツを見ると同時に、

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

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

 

そう私は考えました。

 

そもそもAFFINGER5(アフィンガー 5)は

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

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

 

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

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

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

 

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

 

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

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

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

 

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

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

AFFINGER5テキストパーツ

 

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

 

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

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

メモ

 

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

外部リンク

 

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

ブックマーク

 

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

おしらせ

 

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

はてな

 

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

コメント

 

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

コード

 

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

ポイント

 

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

ユーザー

 

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

初心者

 

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

注意文

 

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

注意文(グレー)

 

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

ショートコードガイド

 

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

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

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

 

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

  • fontawesome="Webアイコン"
  • iconcolor="アイコンの色"
  • bgcolor="背景色"
  • color="文字色"
  • bordercolor="ボーダー色"
  • borderwidth="枠線の太さ(px)"
  • iconsize="アイコンサイズ(%)"

 

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

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

 

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

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

AFFINGER5ミニふきだし

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

 

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

基本

 

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

オレンジ

 

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

ピンク

 

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

ブルー

 

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

グリーン

 

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

レッド

 

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

[st-minihukidashi fontawesome="" 〜add_boxstyle=""]基本[/st-minihukidashi]

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

 

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

  • fontawesome="Webアイコン"
  • fontsize="文字サイズ(%)"
  • fontweight="文字の太さ(bold)"
  • bgcolor="背景色"
  • color="文字色"
  • margin="余白(上 右 下 左)"
  • radius="角の丸み"
  • add_boxstyle="全体を囲むdivに追加するCSS"

 

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

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

ミニふきだし基本

 

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

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

 

AFFINGER5テキストパーツ:複合

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

 

そもそも「複合」とは何やねん?って感じですよね(笑)

 

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

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

 

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

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

AFFINGER5テキストパーツ複合

 

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

 

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

自由なメモ

テキストはここに入力

 

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

ココがポイント

テキストはここに入力

 

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

ココがおすすめ

テキストはここに入力

 

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

ココがダメ

テキストはここに入力

 

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

ココに注意

テキストはここに入力

 

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

さらに詳しく

テキストはここに入力

 

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

◯才女性

テキストはここに入力

 

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

◯才男性

テキストはここに入力

 

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

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

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

 

2行目のコードの]かっこの間[

[st-cmemo 〜 iconsize="200"]テキストはここに入力[/st-cmemo]

ここにテキストを入力してくださいね。

 

AFFINGER5テキストパーツ:複合(アイコンなし)

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

パーツ紹介です。

 

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

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

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

 

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

 

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

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

AFFINGER5テキストパーツ複合

 

表示結果は以下の通り。

 

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

自由なメモ

テキストはここに入力

 

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

ココがポイント

テキストはここに入力

 

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

ココがおすすめ

テキストはここに入力

 

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

ココがダメ

テキストはここに入力

 

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

ココに注意

テキストはここに入力

 

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

もっと詳しく

テキストはここに入力

 

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

つまづきポイント

テキストはここに入力

 

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

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

入力してくださいね。

 

AFFINGER5テキストパーツ:まるもじ(小)

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

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

 

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

 

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

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

AFFINGER5テキストパーツまるもじ

 

表示結果は以下の通り。

 

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

まるもじ(小)基本

 

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

まるもじ(小)オレンジ

 

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

まるもじ(小)ピンク

 

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

まるもじ(小)ブルー

 

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

まるもじ(小)うすい注意

 

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

まるもじ(小)注意

 

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

  • fontawesome="Webアイコン"
  • bgcolor="背景色"
  • bordercolor="ボーダー色"
  • color="文字色"
  • radius="角丸(px)"
  • margin="余白(上 右 下 左)"

 

AFFINGER5テキストパーツ:まるもじ(大)

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

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

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

 

まるもじ(大)の表示手順は

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

AFFINGER5テキストパーツまるもじ

 

表示結果は以下の通り。

 

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

まるもじ(大)基本

 

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

まるもじ(大)オレンジ

 

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

まるもじ(大)ピンク

 

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

まるもじ(大)ブルー

 

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

まるもじ(大)はてな

 

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

まるもじ(大)チェック

 

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

まるもじ(大)うすい注意

 

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

まるもじ(大)注意

 

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

  • fontawesome="Webアイコン"
  • bgcolor="背景色"
  • bordercolor="ボーダー色"
  • color="文字色"
  • radius="角丸(px)"
  • margin="余白(上 右 下 左)"

 

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

続いてテキストパーツ:HTML(カスタム)です。

 

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

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

使わないと思いますので

 

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

 

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

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

 

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

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

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

 

しかし、

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

 

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

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

 

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

 

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

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

 

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

 

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

林檎の部分だけを選択し

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

カスタムフォント

 

表示結果は以下の通り。

 

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

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

 

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

カスタムフォント白影

 

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

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

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

 

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

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

 

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

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

 

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

 

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

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

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

 

表示結果は以下の通り。

 

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

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

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

 

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

 

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

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

 

カスタマイザーの「[+]オプションカラー」の項目にある

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

カスタマイザーステップ/ポイント

 

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

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

 

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

 

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

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

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

 

表示結果は以下の通り。

 

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

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

 

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

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

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

 

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

 

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

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

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

 

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

 

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

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

テキストパーツ:ラベル

 

表示結果は以下の通り。

 

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

[st-label label="おすすめ" bgcolor="#FBC02D" color="#FFFFFF"]

 

[/st-label]

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

 

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

テキストパーツ:ラベル

 

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

おすすめ

 

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

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

 

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

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

 

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

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

 

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

それがAFFINGER5です。

 

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

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

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

 

表示結果は以下の通り。

 

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

流れる文字

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

  • この記事を書いた人
ここあ

ここあ

グラフィックデザイン歴20年のフリーランスデザイナー。大手広告代理店や大手印刷会社と取引のある制作プロダクションに20年勤務し、2017年に独立。現在は、グラフィックデザインを生かしたWebデザインのビジネスを展開しながら、コンサルティング業務など幅広く活動しています。

Reccomend

オシャレなブログデザインの作り方 1

    ここあです。   このサイトはワードプレステーマ「AFFINGER5」の 個人的なテストサイトして立ち上げています。 ※ただし、記事はしっかり書いてます! &nb ...

【AFFINGER5使い方】ヘッダー画像にタイトルとボタンを入れる方法! 2

  ここあです。   ワードプレステーマ「AFFINGER 5」は 5/21に大型アップデートとしてβ版が公開されました。   今回は、その大型アップデートで実装された ...

-AFFINGER5

© 2021 THE BLOG LIFE