WordPressのGutenbergエディターで、画像に枠線を表示する方法を紹介します。
記事の背景色と画像の色が同じとき、境界がないと混乱するのでborderを指定しました。
Gutenbergで画像に枠線を表示する
スタイルシートにクラスを追加する
「style.css」に下記のコードを追加します。
/* 画像の枠線 */
img.border {
border: solid 1px #cccccc; /* スタイル,太さ,色 */
}スタイルはサイトに合わせて修正してください。
エディターで画像を編集する
画像に上記のスタイルを反映させて、枠線を表示します。
エディターで「画像」ブロックを選択します。
詳細設定 > HTML として編集 をクリックします。
HTMLが表示されるので、「img」タグの要素「class」属性に、上記で追加したクラス「border」を追加します。
<img src="https://○○○.jp/△△△/□□□□□.jpg"
alt="Gutenbergで画像に枠線を表示する"
class="border wp-image-XXXX">「class=”border wp-image-XXXX”」部分の「border」を追加しました。
「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示されたら、「HTML に変換」をクリックします。
これで、イメージにボーダーが表示されます。
最後に
旧エディターで画像に枠線をつけるときには、こちらをご覧ください。
