【アフィンガー6】吹き出しとボックスを重ねるカスタマイズ方法【周りと差別化できます】

・アフィンガー5で吹き出しをボックスを重ねて表示する、カスタマイズ方法を教えてください！

悩んでいる人

こんな悩みを解決します。

この記事を書いている人

今回は、以下のような装飾を作成していきます。

上の装飾を普通に作ろうとすると、以下のように吹き出しとボックスの距離が離れて表示されることが多いです。。

そこで今回は、吹き出しとボックスをちょっと重ねてオシャレにする方法を紹介します。

この記事を読めば、同じアフィンガーを使っている人と装飾で差をつけることができますよ。

アフィンガー5【AFFINGER5】吹き出しとボックスを重ねるHTMLコード

結論、以下のコードをコピペすれば完了です。

<p>[st-minihukidashi fontawesome="" fontsize="" fontweight="" bgcolor="#4865B2" color="#FFFFFF" margin="0 0px -5px 0" radius="" position="" myclass="" add_boxstyle=""]吹き出しの中の言葉[/st-minihukidashi][st-cmemo fontawesome="fa-file-text-o" iconcolor="#4865B2" bgcolor="#FFFFFF" color="#000000" bordercolor="#4865B2"border-style"dotted" borderwidth="2" iconsize="200"]</p>
<div class="st-list-no">
<ol>
<li>箇条書き➀</li>
<li>箇条書き➁</li>
</ol>
</div>
<p>[/st-cmemo]</p>

上のHTMLコードの中をいじることで、自分のサイトに合う色に変えることができます。

これで終了してもいいのですが、今回は自分でも作れるように少し深掘りして紹介します。

作り方を理解すれば、他の装飾をさらにカスタマイズできるようになるので、気になる人は、参考にしてみてくださいね。

ゆーさく

アフィンガー5【AFFINGER5】吹き出しとボックスを重ねる装飾の作り方

それでは、さっそく作り方を説明していきますね。

作る手順は3ステップで完了します。

一つずつ見ていきましょう。

吹き出しとボックスを重ねる装飾の作り方➀クリップメモを追加する

_{「タグ」➔「テキストパーツ」➔「クリップメモ」➔「メモ」}

吹き出しとボックスを重ねる装飾の作り方➁リストを追加する

_{2回「Enter」を押す}

まずは、上の画像のように、[/st-cmemo]コードの前の部分にカーソルを合わせて、2回『Enter』を押して空欄を作ります。

_{『薄い点線』が表示}

すると、上のように『薄い点線』が表示されるようになります。

_{番号付きリストを選択}

『番号付きリスト』を選択すると、入力する場所が出てきます。

_{今の時点での「完成形」}

吹き出しとボックスを重ねる装飾の作り方➂吹き出しを追加してカスタマイズ

add_boxstyle=""]○○[/st-minihukidashi] の○○の部分に文字を入力すると、吹き出しに文字を入れることが可能です。

最後に、「margin」コードの20pxの部分を『-5px』に変更すれば、装飾の完成です。

これをHTML形式で表示すると、記事冒頭で紹介したコードが表示されます。枠線などは、自分のサイトカラーに合わせて変更しましょう！

ゆーさく

今回は、ボックスとして「クリップメモ」を使用しましたが、カスタムボックスを使ってもOKです。

まとめ：装飾をカスタマイズして、他のサイトと差をつけよう！

今回は、吹き出しとボックスを重ねて表示する方法について紹介しました。

ポイントは、吹き出しの『margin』を20pxから-5pxに変更して、通常より下に表示するところです。

細かい部分ですが、装飾を少し手を加えて、普通にアフィンガーを使っている人と差をつけましょう。

当サイトでは、他にもアフィンガーのカスタマイズについて紹介しているので、参考にしてみてください！

ゆーさく

関連記事AFFINGER5ヘッダー上インフォメーションバーの作り方

アフィンガーカスタマイズ一覧