AFFINGER6【ミニふきだしを中央に表示させる方法】

AFFINGER6の記事装飾【ミニふきだし】を、記事内中央に表示させる方法です。

記事後半では、さらに自分好みのデザインにするカスタマイズ方法も紹介しています。

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

小豆

AFFINGER6の【ミニふきだし装飾】がお気に入り。
でもこれって、位置を記事中央に表示させることってできないの？
コンテンツとずれて、見栄えが良くない時があるんだよなぁ。

AFFINGER6でミニふきだしを記事中央に表示

AFFINGER6の記事装飾【ミニふきだし】は、以下のような用途での使用がすごく便利ですよね。

僕の場合、数ある記事装飾のなかでも大のお気に入りで、ほぼ全ての記事内で使用しています。

小豆

記事内でも目立つし、目を惹ひくデザインだよね。

ただし、実は以前からずっと感じている不満が・・。

それが、これ。

「記事内の横幅よりも小さな画像」にミニふきだしを使用すると、上記のようにズレが生じるんです。

画像とふきだしの位置が全然合っていないので、なんだかすごく違和感がありますよね。

AFFINGERを使用して4年が経ちますが、以前からずっとモヤモヤを感じていました・・。

で、この度【ミニふきだしを中央に表示させる方法】をついに発見！

うん！やっぱりこのほうが断然しっくり・・・・きますね。

これまで感じていた違和感とモヤモヤが、一気に吹き飛びました。

【margin】での位置調整はうまく行かない

小豆

ショートコード内の【margin】で位置決めをすればいいのでは？

AFFINGERを長く使っている人なら、こう思う人もいるはずですよね。

ですが【marginによる位置指定】では、上手く表示させることができませんでした。

PCでの表示	スマホでの表示

画像はクリックで拡大できます

小豆

ん？スマホでは表示位置がおかしいね。

上記の通り、PCでの表示に合わせるとスマホでの表示位置がおかしなことになってしまいました。

ちなみに、その逆も然しかりです。

そこで便利なのが、今回紹介する方法だよ。
PCでもスマホでも、ピッタリ中央に表示させることができるんだ。

大福

ミニふきだしを中央に表示させる手順

step
1ミニふきだしを挿入

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

Gutenbergを利用している場合、ミニふきだしの挿入には【クラシックブロック】を使用します。

step
2中央寄せタグを挿入

ショートコード内add_boxstyleに、text-align:center;を挿入

これで無事、ミニふきだしがPC・スマホそれぞれで中央に表示されるよになるよ。

大福

コピペで済ませたい場合は？

小豆

Gutenbergの場合、毎回クラシックブロックを呼び出すのが面倒そう。

こんな場合は、以下のコードを「カスタムHTML」にコピペすると便利です。

大福

よく使うショートコードなんかは、Chrome拡張機能のメモ帳に貼り付けておくとすごく便利だよ。

プチ見出しとしても使える！ミニふきだしをもっと目立たせるカスタマイズ

ここまで「中央寄せにする方法」を紹介してきましたが、ミニふきだしは更なるカスタマイズが可能。

カスタマイズ次第では、以下のように【プチ見出し】っぽく表示させることも可能です。

大福

このミニふきだしの場合、以下のカスタマイズをしているんだ。

カスタマイズを行ったショートコードは、以下の通りです。

※ミニふきだし（レッド）を使用

ショートコード内、それぞれのタグの役割は以下の通りだよ。

大福

ミニふきだしの上下左右の位置を細かく指定したい場合は、以下の記事を参考にして下さい。

まとめ：ミニふきだしを積極的に使おう

ミニふきだしを使えば、記事内で任意のポイントを目立たせることができます。

「ここだけは読み飛ばさないでほしい」なんて箇所に使用すると便利ですね。

ぜひ、AFFINGERでのブログ作りの参考にしてください。

多くのAFFINGERブログと差をつけたい人には、こちらもおすすめ。

大福

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

特典詳細ページへ移動する