AFFINGER

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

AFFINGER5お知らせ

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

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

 

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

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

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

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

ミニふきだしの使用例

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

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

 

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

デフォルトのミニふきだしの位置

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

小豆
そうなんだよなぁ。
上下左右に自由に調整できたら、もっとしっくり・・・・くるのに・・。
実は、ミニふきだしの位置は細かく指定することができるんだ。
大福

実際にやってみました。

ミニふきだしの位置を調整

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

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

  • 左右への移動
  • 上下の移動
  • オブジェクトに重ねる方法
  • しっぽの位置の移動

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

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

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

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

 

位置の調整方法

  1. 左右への移動
  2. 上下の移動
  3. オブジェクトに重ねる方法
  4. しっぽの位置の移動

 

step
1
左右への移動

左右の位置調整

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

margin:上
4つ並んだ数字の内、2つ目が右の位置、4つ目が左の位置を調整する値です。
大きな数値を入力するほど、調整幅も大きくなります。

 

参考例

デフォルト 【margin="0 0 20px 0" 】
左右位置デフォルト
margin="0 0 20px 20px" margin="0 0 20px 50px" margin="0 0 20px 100px"
右に20px 右に50px 右に100px

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

 

step
2
上下の移動

上下の位置調整

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

margin:
4つ並んだ数字の内、1つ目が上の位置、3つ目が下の位置を調整する値です。
大きな数値を入力するほど、調整幅も大きくなります。
「-(マイナス)」を入力することもできます。

 

参考例

デフォルト 【margin="0 0 20px 0" 】
左右位置デフォルト
margin="0 0 40px 0" margin="0 0 0px 0" margin="0 0 -20px 0"
上に40px 上に0px 下に-20px

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

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

 

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

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

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

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

メモ

「-20px以上」の数値を入力しても、ソレ以上「下」に下げることができなかった。

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

add_boxstyleにタグを入力

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

 

marginで指定した場合 add_boxstyleで指定した場合
下に-20px ミニふきだしをオブジェクトに重ねる
[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
しっぽの位置の移動

デフォルト しっぽを中央に
下に-20px ふきだしのしっぽを中央に

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

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

ふきだしのしっぽを中央にするコード

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

実際のコード例

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

 

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

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

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

小豆
位置の調整をしたら、PCではいいのにスマホでの見え方が残念だった。
PCとスマホでは、画面の比率が全然違うからね。
大福

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

 

実際の例がこちら。

PCでの見え方

PCでの表示

 

スマホでの見え方

スマホでは位置関係がおかしい

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

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

 

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

PCでの表示 スマホでの表示
PCでの表示 スマホでの表示を調整

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

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

 

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

AFFINGER5お知らせ
AFFINGER5【PCでの表示とスマホでの表示】を別々に設定

続きを見る

 

参考例で使用したコード

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

デフォルトのコード
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#212121" color="#ffffff" margin="0 0 0px 220px" radius="" position="" add_boxstyle=""]サンプルテキスト[/st-minihukidashi]
ここに画像を挿入

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

 

見え方を別々に設定したコード

[nopc]
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#212121" color="#ffffff" margin="0 0 0px 60px" radius="" position="" add_boxstyle=""]サンプルテキスト[/st-minihukidashi]
[/nopc]
[pc]
[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#212121" color="#ffffff" margin="0 0 0px 220px" radius="" position="" add_boxstyle=""]サンプルテキスト[/st-minihukidashi]
[/pc]
ここに画像を挿入

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

 

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

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

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

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

 

  • デザインを変更したい人にはコチラもおすすめ
アイコンを表示

サンプルテキスト

画像を挿入

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

四角いデザインに変更

サンプルテキスト

枠だけのデザインに変更

サンプルテキスト

吹き出しの位置を中央に

サンプルテキスト

見出し内に挿入 見出し内にまるもじ
AFFINGERサンプル
AFFINGER5【まるもじ・ミニふきだし】をカスタマイズ

続きを見る

 

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

オリジナル特典バナー

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

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

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

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

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

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER

© 2021 大福日記