【WordPress×Cocoon】ブログの画像に枠線を付ける方法

Cocoon
スポンサーリンク

今回は、Cocoonの機能を利用して、ブログに挿入する画像に枠線を付ける方法を紹介します。

ブログに画像を挿入する際、画像の端を記事の背景色が同じ色で境界線がわからないと、何となくぼやけた印象になることってありますよね。

画像に枠線を付ける方法としては、「画像自体を加工する」「CSSを利用する」といった方法が考えられます。

しかし、ブログがWordPressでテーマにCocoonを使用していれば、簡単な設定だけで画像に枠線を付けることが可能です。

スポンサーリンク

Cocoon設定で「画像の囲み効果」を選択する

Cocoonのテーマには、ブログ内の画像に一括で枠線の有無を設定する機能があります。

まずは、WordPressのダッシュボードのサイドメニューから、「Cocoon設定」をクリックしましょう。

次に、Cocoon設定画面のタブから「画像」を選択します。

画像の選択メニューが表示されたら、「画像の囲み効果」から任意の枠線を選びましょう。

枠線を選んだら、最後に設定を「保存」するのを忘れないようにしてください。

これで、ブログ中の画像に枠線が表示されるようになりました。

Cocoonで設定した「画像の囲み効果」を確認しよう

Cocoonの機能では、下記4種類の囲み効果が設定できます。

  • ボーダー(薄い枠線)
  • ボーダー(薄い太線)
  • シャドー(薄い影)
  • シャドー(ペーパー)

さらに、WordPressの機能を利用して、画像ごとに3つのスタイルを追加可能です。

ここでは、4種類の囲み線+スタイルを設定した際の見た目を紹介します。

ボーダー(薄い枠線)

ボーダー(薄い枠線)の見た目はこんな感じです。

デフォルト
角丸

シンプルかつナチュラルな感じですね。

どんなデザインのブログにも合いそうです。

ボーダー(薄い太線)

ボーダー(薄い太線)の見た目はこんな感じです。

デフォルト
角丸

色は薄いものの、はっきりと境界線がわかります。

WordPressで影を付けると、ブロック感が出ますね。

シャドー(薄い影)

シャドー(薄い影)の見た目はこんな感じです。

デフォルト
角丸

シャドーの線はあるかないかぐらいで、大分ぼんやりとします。

WordPressで影を付けたほうがわかりやすいですね。

シャドー(ペーパー)

シャドー(ペーパー)の見た目はこんな感じです。

デフォルト
角丸

パキッと陰影が付くので、ちょっとオシャレな感じになります。

WordPressで影を付けても、気持ち色が濃くなる程度です。

Cocoonの機能では個別の設定ができない

Cocoonで「画像の囲み効果」を利用すると、ブログ内の画像すべてに適用されます。

そして、一度に設定できる囲み効果は1種類だけです。

なので、1枚目は「ボーダー(薄い枠線)」にして、2枚目を「シャドー(薄い影)」にしたい、というようなことはできません。

ただし、WordPressのスタイルを追加すれば、多少の変化は可能です。

とはいえ、画像の見やすさを上げるだけなら、Cocoonの機能で十分だと思います。

もっとこだわって個別に設定したい場合は、画像ソフトやスタイルシートを利用しましょう。

おわりに

今回は、WordPressの無料テーマであるCocoonの機能を利用して、ブログの画像に枠線を付ける方法を紹介しました。

手順自体は非常に単純なため、設定の中に「画像の囲み効果」があることに気付ければ一々個別に設定する必要がありません。

画像と背景の境界がはっきりするだけでも、画面がちょっと締まった感じになります。

ぜひ、この機能を活用してみてくださいね。

それでは、ここまでお読みいただきありがとうございました。

タイトルとURLをコピーしました