AFFINGER

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

AFFINGERサンプル

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

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

 

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

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

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

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

まるもじ(大)
基本

サンプルテキスト

オレンジ

サンプルテキスト

ピンク

サンプルテキスト

ブルー

サンプルテキスト

はてな

サンプルテキスト

チェック

サンプルテキスト

うすい注意

サンプルテキスト

注意

サンプルテキスト

ミニふきだし
基本

サンプルテキスト

オレンジ

サンプルテキスト

ピンク

サンプルテキスト

ブルー

サンプルテキスト

グリーン

サンプルテキスト

レッド

サンプルテキスト

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

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

アイコンを表示

サンプルテキスト

画像を挿入

大福ミニふきだし用透明サンプルテキスト

四角いデザインに変更

サンプルテキスト

枠だけのデザインに変更

サンプルテキスト

吹き出しの位置を中央に

サンプルテキスト

見出し内に挿入 見出し内にまるもじ

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

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

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

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

使用方法

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

 

カスタマイズ方法

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

カスタマイズ

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

 

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

アイコンを表示

デフォルトのコード

[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くらいが丁度よく収まります
✔ 画像の配置設定は「なし」を選択します

 

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

四角いデザイン

デフォルトのコード

[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>

 

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

カスマイズ後に保存・呼び出す方法

小豆
カスタマイズの方法はわかったけど、一度作ったデザインは保存しておけないの?

カスタマイズ後のコードは、プラグインを使用することで保存しておくことが可能です。

コードの保存

保存したコードは、記事編集中に簡単に呼び出すことができるようになります。

 

専用プラグインの詳しい使い方は、こちらの記事内で解説しています。

AddQuickTag使い方TOP画像
AddQuicktagの使い方とコピペで使える5つの囲み枠

続きを見る

 

まとめ:AFFINGER5なら思い通りのカスタマイズが無限大

デフォルトの状態でも十分使えるAFFINGER5ですが、カスタマイズをすることでより一層ブログのオリジナル性を上げることができます。

このブログ内では、僕のお気に入りのカスタマイズをたくさん紹介しています。

よければ参考にしてみて下さい。

 

  • よく読まれているAFFINGER5関連の記事

 

AFFINGER5オリジナル特典

AFFINGER5限定特典
【AFFINGER5購入特典】当ブログ限定オリジナル特典を6つ紹介

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2021 大福日記