見出しに画像 | Lightning × ExUnit 日本語デモ

このページは2022年10月12日以降は削除する可能性がありますのでご了承ください。

見出しにbefore要素で画像挿入

見出しにクラス名をつけてbefore要素で背景画像を挿入する方法

画像を挿入したい見出しを選択して、ブロック設定画面の「高度な設定」に heading-icon-imgというcssクラス名を入れます。
外観→カスタマイズの追加CSS、もしくは子テーマのCSSファイルに以下のCSSを貼り付けてください。

※background-image にはご自身のいれたい画像パスに変更してください。
※画像によってはwidth(幅)とheight(高さ)が変わると思いますので、任意の数値に変更してください。

/* 見出しに画像 */
h2.heading-icon-img::before{
    content:'';
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(https://demo.dev3.biz/lightning-g3-pro/wp-content/uploads/2022/10/vk-mark.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right:10px;
}

見出しにインライン画像で挿入

見出しにインライン画像で画像を挿入する方法

見出しを設置します。画像を挿入したい位置にカーソルを合わせ（今回の場合は見出しの先頭）、ブロックのツールバーの矢印ボタン「さらにブロックツールを表示」から画像を選択して挿入します。
画像が挿入できたら、必要に応じて画像の幅を変更してください。
必要に応じて、ブロックのツールバーの矢印ボタン「さらにブロックツールを表示」から「下付き」などに変更してください。

説明動画

PAGE TOP