こんにちは、末端冷え性のうっしーです。
ブログ記事に画像を入れているけど、背景が白いと本文との境目がわからなくなりますよね。
↓のように。
特に画面のスクリーンショットなどを載せる場合は、境目がわかりづらいね…
ですが、枠線をつけることで、画像が画像として見やすくなります。
↓のように。
おー！見やすいな！
こっちの方が分かりやすいし、ちょっとオシャレだな！
今回は、この枠線の付け方をご紹介いたします。
- 画像に枠線をつける方法
- 枠線が有と無の違い
- 枠線はあった方がいいということ
- 細かいカスタマイズも大事ということ
手順
では、早速手順を見ていきましょう。
管理画面の「外観」からテーマエディタを開く
テーマエディタに追加でHTMLを追記する
テーマエディタを開いたら、まず「編集するテーマを選択」がCocoonの子テーマである
Cocoon Childになっていることを確認します。
※親テーマに記述してしまうと、親テーマのアップデートがされた際に全て上書きされてしまいます。
エディタ上に下記を追記します（コピペでOK）
/* 画像の枠線カスタマイズ */
/.wp-block-image img {
/ border: solid 1px #808080; /* 枠線のスタイル 太さ 色 */
/ box-shadow: 0px 0px 5px #808080; /* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
/}
テーマエディタでは、CSS（見た目のデザイン）のコードを追記して、ブログに適応させることができるのよ
ファイルを更新して完了！
あとは「ファイルを更新」ボタンをクリックして設定は完了。
効率のいい画面配置
「ファイルを更新」ボタンをクリックした瞬間に、ブログに反映されます。
そのため、別タブまたは別ウィンドウで記事を表示させておいて、
「テーマエディタを更新したら、ブログ画面をF5キーで更新する」
をすれば、微調整もしやすいです！
枠線の有無比較
冒頭で枠線があった方が見やすいと言いましたが、改めて比較してみます。
枠線なし 枠線あり
明らかに右（枠線あり）の方が見やすいですね。
特に文章を含む画面の画像の場合、文字としての文なのか画像としての文なのかの区別がしやすくなります。
画像に枠がない方が都合がいい記事を書かない限り、枠線をつけることをおすすめします！
まとめ
どうでしょうか？
枠線をつけることで一気に記事の雰囲気も変わったのではないでしょうか？
この細かい設定が見やすいブログや記事を見やすくしていくのだと思います。
役に立った方や疑問点がある方は、気軽にコメントください！
では〜
コメント