画像に枠線を入れる【WordPressブロックエディタ】

今回はワードプレス記事作成エディタである
ブロックエディタで記事を書く際に
記事内で使用する全ての画像に枠線を入れる
方法を紹介します。

枠線があると背景が白い画像などの場合
記事の背景と同化せずに済むので
記事自体が見やすくなります。

とても簡単な方法なので
是非やってみてください。

もしお使いのワードプレステーマが
あるようならテーマ内で
簡単設定がある場合があります。

こちらの記事では無料テーマcocoonでの
画像の枠線を入れる方法を紹介していますので
参考にしてみてください。

では今回はテーマに関係なく
ブロックエディタで記事編集する際に
使える方法を紹介します。

記事の全ての画像に枠線を入れる手順

WordPressで画像に枠線を入れるには
スタイルシートというところに
コードを入れます。

まずワードプレスのダッシュボードより

①外観をクリック　

②カスタマイズをクリック

カスタマイズをクリックしたら
このような画面になるので
「追加　CSS」をクリックします。

次にこちらのコードを以下の部分にコピペしてください。

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

①コードをコピペ

②公開

これで設定は終わりです。

プレビューで確認すると
記事の画像の枠が
このような枠線がついて表示されます。

枠線の色は変更することが出来ます。

色を変更するには
先ほどのコピペしたコードの

#808080

この部分を好きな色のコードに
変更するだけです。

こちらのサイトでカラーのコードを
調べることが出来ます。

画像の枠線を増やすことも可能です。

先ほどのコードの

solid

を変更するだけです。

この部分を変更するだけで
このような枠線になります。

solid→double
2本線で表示

solid→groove
立体的に窪んだ線で表示

solid→ridge
立体的に盛り上がった線で表示

こちらの記事でワードプレスの基本的な使い方
記事作成の方法など初期設定をまとめてあります。

また

・始めたばかりのブログでも短期でPVアップする記事作成方法

・SNSと連携させる方法

なども動画付きで解説しています。

参考にしてみてください。