WordPress 画像に枠線を付ける 枠線を消す【CSS】

WordPressのブロックエディタで挿入した画像に枠線を付ける方法、また一部の画像の枠線を消す方法をご紹介します。

ご利用のWordPressバージョンやテーマによってやり方が異なる場合があるのでご参考程度にご覧ください。

この記事で解説している環境はWordPressバージョン5.6.1、テーマはSimplicity2 バージョン2.8.7.1を利用しています。

画像に枠線を付ける

ブロックエディタで挿入した画像全てに枠線を付ける方法と選択した個別の画像に枠線を付ける方法をそれぞれ説明します。

全ての画像に枠線を付ける

WordPressの管理画面から「外観」→「テーマエディター」をクリックし、スタイルシート（style.css）を開きます。

スタイルシート（style.css）に以下の内容を記述します。

.wp-block-image img {
    border: solid 1px #808080;
    padding: 2px;
}

borderに指定した値は左から順に、線の種類、線の太さ、線の色となります。 paddingに指定した値は画像と線の間隔です。

それぞれの値を任意で変更して調整してください。

「ファイルを更新」をクリックしてスタイルシートを保存し、画像に枠線が付いているか確認してください。

個別の画像に枠線を付ける

全ての画像に枠線を付けるのではなく、個別の画像に枠線を付けたい場合は以下のようにします。

WordPressの管理画面から「外観」→「テーマエディター」をクリックし、スタイルシート（style.css）を開きます。

スタイルシート（style.css）に以下の内容を記述し、frameというクラスを定義します。クラス名は任意で変更して構いません。

figure.frame img {
    border: solid 1px #808080;
    padding: 2px;
}

figureはブロックエディタで画像を挿入した場合に自動的に設定されるブロック要素です。

「ファイルを更新」をクリックしてスタイルシートを保存してください。

次に、記事の編集画面を開いて枠線を付けたい画像を選択し、「高度な設定」→「追加CSSクラス」にframeと入力します。

記事を更新し、指定した画像に枠線が付いているか確認してください。

画像の枠線を消す

ブロックエディタで投稿した全ての画像の枠線を消す方法、また個別の画像の枠線のみを消す方法をそれぞれ説明します。

全ての画像の枠線を消す

WordPressの管理画面から「外観」→「テーマエディター」をクリックし、スタイルシート（style.css）を開きます。

スタイルシート（style.css）に以下の内容を記述します。

.wp-block-image img {
    border-style: none;
    padding: 0px;
}

「ファイルを更新」をクリックしてスタイルシートを保存し、画像の枠線が消えていることを確認してください。

個別の画像の枠線を消す

ブロックエディタで投稿した全ての画像に枠線が付いている状態で、個別の画像の枠線のみを消したい場合は次のようにします。

WordPressの管理画面から「外観」→「テーマエディター」をクリックし、スタイルシート（style.css）を開きます。

スタイルシート（style.css）に以下の内容を記述し、noframeというクラスを定義します。クラス名は任意で変更して構いません。

figure.noframe img {
    border-style: none;
    padding: 0px;
}

figureはブロックエディタで画像を挿入した場合に自動的に設定されるブロック要素です。

「ファイルを更新」をクリックしてスタイルシートを保存してください。

次に、記事の編集画面を開いて枠線を付けたい画像を選択し、「高度な設定」→「追加CSSクラス」にnoframeと入力します。

記事を更新し、指定した画像の枠線が消えていることを確認してください。