AFFINGER5【まるもじ・ミニふきだし】をカスタマイズ

AFFINGERサンプル

AFFINGER5の記事装飾「まるもじ」「ミニふきだし」のカスタマイズ方法の紹介です。

記事後半では、カスタマイズしたデザインを簡単に保存・呼び出す方法も紹介しています。

こんな人のお役に立てる記事です。

小豆

AFFINGER5の記事装飾を自分好みにカスタマイズしたい。
まるもじのデザインが違うブログを見たんだけど、あれってどうやるの？

AFFINGER5「まるもじ」「ミニふきだし」のカスタマイズ
カスタマイズ方法
カスマイズ後に保存・呼び出す方法
まとめ：AFFINGER5なら思い通りのカスタマイズが無限大

AFFINGER5「まるもじ」「ミニふきだし」のカスタマイズ

まずはAFFINGER5デフォルトの「まるもじ」と「ミニふきだし」の全デザインから。

まるもじ（大）
基本	サンプルテキスト	オレンジ	サンプルテキスト
ピンク	サンプルテキスト	ブルー	サンプルテキスト
はてな	サンプルテキスト	チェック	サンプルテキスト
うすい注意	サンプルテキスト	注意	サンプルテキスト
ミニふきだし
基本	サンプルテキスト	オレンジ	サンプルテキスト
ピンク	サンプルテキスト	ブルー	サンプルテキスト
グリーン	サンプルテキスト	レッド	サンプルテキスト

小豆

確かにこれでも十分と言えば十分なんだけど・・。
でも、もう少し自分好みのデザインにできると嬉しいな。

というわけで、色々とカスタマイズしてみました。

アイコンを表示	サンプルテキスト
画像を挿入	サンプルテキスト
四角いデザインに変更	サンプルテキスト
枠だけのデザインに変更	サンプルテキスト
吹き出しの位置を中央に	サンプルテキスト
見出し内に挿入

だいぶ見た目の印象が変わりますね。

ここで紹介したのは、デザインのほんの一部。

自分の好みに合わせて、自由にカスタマイズが可能です。

「まるもじ」と「ミニふきだし」の使い方

使用方法

タグ　→　テキストパーツ　→　ミニふきだしORまる文字

カスタマイズ方法

以下のカスタマイズ方法をわかりやすく丁寧に解説していきます。

カスタマイズ

アイコンを表示
画像を挿入
四角いデザインに変更
枠だけのデザインに変更
吹き出しの位置を中央に
見出し内に挿入

アイコンを表示　※「まるもじ」「ミニふきだし」共通

アイコンを表示

デフォルトのコード

[st-marumozi-big fontawesome="" bgcolor="#ef5350" bordercolor="" color="#ffffff" radius="30" margin="0 10px 10px 0" myclass=""]サンプルテキスト[/st-marumozi-big]

カスタマイズ後のコード

[st-marumozi-big fontawesome="fa-car" bgcolor="#ef5350" bordercolor="" color="#ffffff" radius="30" margin="0 10px 10px 0" myclass=""]サンプルテキスト[/st-marumozi-big]

【fontawesome】に任意のアイコンコードを挿入します。

アイコンコードは、以下の方法で簡単に入力できます。

タグ　→　ショートコード補助　→　WEBアイコン

さらに多くのアイコンから選択したい場合は、こちらの記事が参考になります。

: AFFINGER5で使えるアイコンの増やし方【カスタマイズも】

続きを見る

画像を挿入　※「まるもじ」「ミニふきだし」共通

画像を挿入

デフォルトのコード

[st-marumozi-big fontawesome="" bgcolor="#f3f3f3" bordercolor="" color="#000000" radius="30" margin="0 10px 10px 0" myclass=""]サンプルテキスト[/st-marumozi-big]

カスタマイズ後のコード

[st-marumozi-big fontawesome="" bgcolor="#f3f3f3" bordercolor="" color="#000000" radius="30" margin="0 10px 10px 0" myclass=""] 大福ミニふきだし用透明サンプルテキスト[/st-marumozi-big]

テキスト前でメディアを追加をクリックし、画像をコード内に挿入します。

✔ 画像サイズは60px × 60pxくらいが丁度よく収まります
✔ 画像の配置設定は「なし」を選択します

さらに詳しい手順やカスタマイズ方法は、以下の記事内で解説しています。

: AFFINGER5【まるもじ・ミニふきだし】内に画像を挿入する

続きを見る

四角いデザインに変更　※「まるもじ」「ミニふきだし」共通

四角いデザイン

デフォルトのコード

[st-marumozi-big fontawesome="" bgcolor="#4FC3F7" bordercolor="" color="#fff" radius="30" margin="0 10px 10px 0" myclass=""]サンプルテキスト[/st-marumozi-big]

カスタマイズ後のコード

[st-marumozi-big fontawesome="" bgcolor="#4FC3F7" bordercolor="" color="#fff" radius="0" margin="0 10px 10px 0" myclass=""]サンプルテキスト[/st-marumozi-big]

【radius】を「0」に設定すると、丸みを帯びたデザインから四角いデザインに変更できます。

枠だけのデザインに変更　※「まるもじ」のみでカスタマイズ可能

枠のみ

デフォルトのコード

[st-marumozi-big fontawesome="" bgcolor="#141466" bordercolor="" color="#ffffff" radius="30" margin="0 10px 10px 0" myclass=""]サンプルテキスト[/st-marumozi-big]

カスタマイズ後のコード

[st-marumozi-big fontawesome="" bgcolor="" bordercolor="#141466" color="#000000" radius="30" margin="0 10px 10px 0" myclass=""]サンプルテキスト[/st-marumozi-big]

コード内のborder属性【bordercolor】にカラーコードを入力すると、枠だけのデザインに変更することができます。

吹き出しの位置を中央に　※「ミニふきだし」のみでカスタマイズ可能

吹き出し中央に

デフォルトのコード

[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#f44336" color="#fff" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""]サンプルテキスト[/st-minihukidashi]

カスタマイズ後のコード

[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#f44336" color="#fff" margin="0 0 20px 0" radius="" position="on" myclass="" add_boxstyle=""]サンプルテキスト[/st-minihukidashi]

吹き出しの位置を中央にしたいときは、【position】に「on」を入力します。

見出し内に挿入　※「まるもじ」のみでカスタマイズ可能

見出し内に挿入

デフォルトのコード

<h2>サンプル見出し</h2>

カスタマイズ後のコード

<h2>[st-marumozi fontawesome="" bgcolor="#ef5350" bordercolor="" color="#fff" radius="30" margin="0 10px 0 0" myclass=""]サンプル[/st-marumozi]サンプル見出し</h2>

見出しテキスト前で「まるもじ用コード」を挿入します。