WordPress Tips

Affinger 見出しタイトルやボックスを目立たせるふきだしスタイル

2022-11-27

本記事にはプロモーションが含まれています。

Affinger 見出しタイトルやボックスを目立たせるふきだしスタイル

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

Affingerには見出しやCTAボタンの上にふきだしをつけることができます。

ふきだしは周りのコンテンツとの視覚的な対比によって目立ちやすく、重要な情報を伝えやすくなります。またデザインの自由度が高いため、訪問者にとって重要な情報をわかりやすく伝え、アクションを促すことができます。

ふきだしスタイルを効果的に使うことで良いユーザーエクスペリエンスを提供することができます。この記事ではAffingerのすきだしスタイルの種類、使い方をまとめています。

ミニふきだし

Affingerのミニふきだしはクラシック段落ブロックから選択できます。

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

[st-minihukidashi webicon="st-svg-check" fontsize="" fontweight="" bgcolor="#f3f3f3" color="#000000" margin="0 0 20px 0" radius="2" position="" myclass="" add_boxstyle=""]ミニふきだしの基本スタイル[/st-minihukidashi]
パラメータ説明
webiconアイコン
例:チェックマーク(st-svg-check)
fontsizeフォントサイズ、%で指定
fontweightフォントの太さ bold
bgcolor背景色
color文字の色
marginふきだしのマージン。「上 右 下 左」
例:0 0 20px 0
radiusふきだしの角丸、pxは不要
positionふきだしを中央にする場合は「on」
myclassミニふきだしを囲むdiv(.st-minihukidashi-box)にクラスを追加
add_boxstyleミニふきだしを囲むdiv(.st-minihukidashi-box)にスタイルを追加

ミニふきだし +マイボックス

「ミニふきだし+マイボックス」は、ふきだしとボックスが生成できます。

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

[st-div class="" margin="0 0 15px 0" padding="0 0 0 0" add_style=""][st-minihukidashi webicon="e" fontsize="" fontweight="bold" bgcolor="#307080" color="#FFF" margin="0" radius="2" position="" myclass="" add_boxstyle=""]ふきだしテキスト[/st-minihukidashi][/st-div][st-mybox title="" webicon="" color="" bordercolor="" bgcolor="#f3f3f3" borderwidth="" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="0 0 25px 0"]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

[/st-mybox]

複合

「ミニふきだし」×「クリップメモ」の複合タイプ。

ボックスにふきだしがかぶってより一体感のあるデザインです。

タグ>テキストパーツ>複合

<div class="st-editor-margin" style="margin-bottom: -5px;">[st-minihukidashi webicon="" fontsize="80" fontweight="" bgcolor="#FFC107" color="#fff" margin="0 0 0 -6px"]自由なメモ[/st-minihukidashi]</div>
[st-cmemo webicon="st-svg-file-text-o" iconcolor="#FFC107" bgcolor="#FFFDE7" color="#000000" iconsize="200"][/st-cmemo]

複合(アイコンなし)

複合タイプのボックスにアイコンがないタイプ。

タグ>テキストパーツ>複合(アイコンなし)

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WordPress Tips
-