今回はワードプレス記事作成エディタである
ブロックエディタで記事を書く際に
記事内で使用する全ての画像に枠線を入れる
方法を紹介します。
枠線があると背景が白い画像などの場合
記事の背景と同化せずに済むので
記事自体が見やすくなります。
とても簡単な方法なので
是非やってみてください。
もしお使いのワードプレステーマが
あるようならテーマ内で
簡単設定がある場合があります。
こちらの記事では無料テーマcocoonでの
画像の枠線を入れる方法を紹介していますので
参考にしてみてください。
WordPressの画像へ枠線を付ける方法【5分で完了】全記事対応
では今回はテーマに関係なく
ブロックエディタで記事編集する際に
使える方法を紹介します。
記事の全ての画像に枠線を入れる手順
WordPressで画像に枠線を入れるには
スタイルシートというところに
コードを入れます。
まずワードプレスのダッシュボードより
①外観をクリック
②カスタマイズをクリック

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

次にこちらのコードを以下の部分にコピペしてください。
.wp-block-image img {
border: solid 1px #808080;
padding: 2px;
}
①コードをコピペ
②公開

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

画像枠線の色を変える方法
枠線の色は変更することが出来ます。
色を変更するには
先ほどのコピペしたコードの
#808080
この部分を好きな色のコードに
変更するだけです。
こちらのサイトでカラーのコードを
調べることが出来ます。
画像の枠線のバリエーション
画像の枠線を増やすことも可能です。
先ほどのコードの
solid
を変更するだけです。
この部分を変更するだけで
このような枠線になります。
solid→double
2本線で表示
solid→groove
立体的に窪んだ線で表示
solid→ridge
立体的に盛り上がった線で表示
短期でPVアップさせるWordpressの始め方
こちらの記事でワードプレスの基本的な使い方
記事作成の方法など初期設定をまとめてあります。
また
・始めたばかりのブログでも短期でPVアップする記事作成方法
・SNSと連携させる方法
なども動画付きで解説しています。
参考にしてみてください。
コメント