【Cocoon】記事内の画像に枠線をつける方法、自動化の設定/WordPress

Cocoon

Cocoonで記事を作成している中で画像を挿入した際に、画像と背景の境目(境界線)が背景となじんで見えづらいことがありますよね。

こんな感じだと「境目はどこ?」という状態です。

枠線があると、

境界線がはっきりしていて見やすいです。

あらかじめ挿入する画像にフレームをつけるのもありですが、1つの画像ごとに編集をするのは面倒ですし手間がかかります。

Cocoonでは記事に画像を挿入したら、自動的に枠線(境界線)がつく機能があります。

今回は、Cocoonの記事で挿入した画像に自動的に枠線をつける設定と、用意されている枠線の種類を解説します。

画像に枠線をつける設定

管理画面から、Cocoon設定」⇒「画像の順にクリックします。

下にスクロールして「画像の囲み効果」から、好きな枠線にチェックを入れて「変更をまとめて保存をクリックしてください。

画像の囲み効果が枠線に当たります。枠線の設定はこれで完了です。

枠線の種類

Cocoonの枠線は「なし」を含めて5パターンが用意されています。

それぞれの見え方を紹介するので、違いを確認してみましょう。

ボーダー(薄い枠線)

ボーダー(薄い太線)

シャドー(薄い影)

シャドー(ペーパー)

注意。枠線はすべての画像に反映される

わざわざ画像編集しなくても、全部の画像に枠線がつけられるなんて便利だな~。

と思っている方もいるでしょう。

ただ、すべての画像に枠線が反映されるこの機能が向いていない方もいます。

たとえば、

  • カテゴリーによって枠線のありなしを変えたい
  • 1つの記事内にある複数の画像の中で使い分けたい

などのような場合です。

すべての画像に反映されるため、枠線の設定前に投稿した記事内の画像でも枠線は反映されます

記事のメリハリをつけるために、見出し下に画像を挿入しているケースも多いかと思いますが、枠線の設定をすれば見出し下の画像にも枠線がつくと思っておきましょう。

 

ちなみに、よしくまブログでは、Cocoon設定ではなく、画像1つ1つを編集して枠線をつけています。

ちょっと手間ですが、画像編集アプリ『PhotoScape X』を使えば数秒で枠線をつけられるのでおすすめです。

『PhotoScape X』で画像に枠線をつける手順は以下をご覧ください。

はじめに、ファイルなどから、枠線をつけたい画像を選択します。

編集」⇒「変形」⇒「フレームライン」の順でクリックします。

下の画面が出てくるので、枠線の太さや色を決めていきます。「内部の余白」は0pxにしておいてください。

枠線の色や太さが決まったら「適用」をクリックし、画面右下の「保存」をしましょう。

画像サイズの編集・切り抜きのやり方について、以下の記事で詳しく解説しています。

まとめ

枠線があることで、白い背景に白っぽい画像を追加したときも、境界線が見えにくい状態が解消できます。

手間なく画像1つ1つに枠線をつけたい方は設定してみましょう。

コメント

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