AFFINGER5＆6【ミニふきだしの位置を調整】まるもじも共通

AFFINGER5＆6で、「ミニふきだし」の位置を調整する方法の紹介です。

記事後半では、PCとスマホでの見え方をそれぞれ別々に設定する方法も紹介しています。

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

小豆

AFFINGERの記事装飾「ミニふきだし」がお気に入り。
ただし、表示位置がちょっとおかしくて見た目が残念なときがある。
任意の場所に調整できたら嬉しいのに。

【AFFINGER5＆6】ミニふきだしの位置を調整

記事内の画像の説明や、ちょっとしたコメントの入力に便利な【ミニふきだし】装飾。

人気の記事装飾で、利用している人も多いですよね。

AFFINGER使用歴3年の僕も、記事内で頻繁に使用するお気に入りの記事装飾です。

ただし、ちょっとだけ問題が・・。

画像の通り、デフォルトのままでは表示位置がおかしく、見た目が残念な感じになってしまうことがあります。

小豆

そうなんだよなぁ。
上下左右に自由に調整できたら、もっとしっくり・・・・くるのに・・。

実は、ミニふきだしの位置は細かく指定することができるんだ。

大福

実際にやってみました。

ちょうどいい位置にミニふきだしが表示され、断然見た目がよくなりましたよね。

記事内では、以下の4つの調整方法を紹介していきます。

ミニふきだしを任意の位置に調整する方法【まるもじも】

設定方法は、AFFINGER「5」も「6」も同じ。

ただし、AFFINGER6の場合はクラシックブロックを利用します。

参考クラシックブロックの使い方を画像で確認

step
1左右への移動

ショートコード内【marginタグ】に数値を入力

デフォルト 【margin="0 0 20px 0" 】

margin="0 0 20px 20px"	margin="0 0 20px 50px"	margin="0 0 20px 100px"

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

step
2上下の移動

ショートコード内【marginタグ】に数値を入力

デフォルト 【margin="0 0 20px 0" 】

margin="0 0 40px 0"	margin="0 0 0px 0"	margin="0 0 -20px 0"

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

大福

調整できる移動幅には限界があるよ。
一定の数字以上は、入力してもそれ以上「上下」することができないんだ。

step
3オブジェクトに重ねる方法

「margin」を使って上下の位置調整をする場合、調整幅には限界があります。

例えば、以下のような感じ。

-20pxに指定【margin="0 0 20px -20px" 】	-100pxに指定【margin="0 0 20px -100px" 】

ミニふきだしを更に下に移動し、オブジェクトと重ねたいときには【add_boxstyle】を利用します。

【add_boxstyle】にmargin-bottom:○px;を入力

marginで指定した場合	add_boxstyleで指定した場合
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#4FC3F7" color="#fff" margin="0 0 -20px 0" radius="" position="" myclass="" add_boxstyle=""]サンプルテキスト[/st-minihukidashi]	[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#4FC3F7" color="#fff" margin="0 0 0px 0" radius="" position="" myclass="" add_boxstyle="margin-bottom:-20px;"]サンプルテキスト[/st-minihukidashi]

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

step
4しっぽの位置の移動

デフォルト	しっぽを中央に

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

ミニふきだしの位置はそのままに、「しっぽ」だけを中央寄りにします。

コード内、【position】タグに「on」を入力

大福

ここでは「ミニふきだし」の調整方法を紹介したけど、操作方法は「まるもじ」も同じだよ。

※まるもじでは、STEP3・4の設定はありません。

PCとスマホでミニふきだしの見え方を別々に調整する方法

小豆

位置の調整をしたら、PCではいいのにスマホでの見え方が残念だった。

PCとスマホでは、画面の比率が全然違うからね。

大福

PCでの見え方を参考に位置調整を行うと、スマホで見た時に残念な表示になっていることがあります。

実際の例がこちら。

PCでの見え方

スマホでの見え方

小豆

せっかくPCでの見た目がよくても、スマホでこれじゃぁ・・

ちょっと面倒ですが、こんな場合は「PCでの表示」と「スマホでの表示」を別々に設定することで問題を解決することができます。

設定後の見え方がこちらです。

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

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

どちらで見た場合も、ちょうどいい位置にミニふきだしが表示されるようになりました。

PCとスマホで表示を別々に設定する方法は、以下の記事内で詳しく解説しています。

参考例で使用したコード

参考までに、上で使用したコードを貼っておきます。

PCではいいが、スマホでは残念な表示に。

PCとスマホで表示する位置を別々に設定することで、どちらでも見栄えのいい位置に表示。

まとめ：ミニふきだしを思い通りに使いこなそう

せっかくのミニふきだし装飾も、あべこべな位置に表示されていたのでは残念すぎますよね。

ぜひ今回紹介した方法を参考に、任意の位置に「ビシッ」と位置調整してみてください。

記事の見た目が、ワンランクUPすること間違いなしです。

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

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

＼ AFFINGER6にも対応済み ／

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

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

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