WordPress Tips

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

2022-11-27

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

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

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]

複合(アイコンなし)

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

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

もっと詳しく

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

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF ドメイン2個無料 - 2024年4月5日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WordPress Tips
-