Gutenbergで画像に枠線を表示する方法【WordPress】

WordPressのGutenbergエディターで、画像に枠線を表示する方法を紹介します。

記事の背景色と画像の色が同じとき、境界がないと混乱するのでborderを指定しました。


Gutenbergで画像に枠線を表示する

スタイルシートにクラスを追加する

「style.css」に下記のコードを追加します。

/* 画像の枠線 */
img.border {
border: solid 1px #cccccc; /* スタイル,太さ,色 */
}
コピーしました

スタイルはサイトに合わせて修正してください。

エディターで画像を編集する

画像に上記のスタイルを反映させて、枠線を表示します。

エディターで「画像」ブロックを選択します。

Gutenbergで画像に枠線を表示するために画像をHTMLとして編集する

詳細設定 > HTML として編集 をクリックします。

HTMLが表示されるので、「img」タグの要素「class」属性に、上記で追加したクラス「border」を追加します。

<img src="https://○○○.jp/△△△/□□□□□.jpg" 
alt="Gutenbergで画像に枠線を表示する" 
class="border wp-image-XXXX">

「class=”border wp-image-XXXX”」部分の「border」を追加しました。

このブロックには、想定されていないか無効なコンテンツが含まれています

「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示されたら、「HTML に変換」をクリックします。

これで、イメージにボーダーが表示されます。

最後に

旧エディターで画像に枠線をつけるときには、こちらをご覧ください。


関連記事

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

error: Content is protected !!