【Cocoon】画像におしゃれな枠線をつける方法

次のように、画像に枠線を付ける方法についてです。

コードをコピペするだけで簡単に設定することができます。
大きく分けて２ステップです。

1.CSSを追加する
2.エディターで追加CSSクラスを指定する

1.CSSを追加する

次のコードを、使用している子テーマのスタイルシートへ追加してください。
（カーソルを乗せると、右上のボタンからクリップボードへコピーができます）

/* 画像に枠線を付ける */
.frame img {
  display: block;
  margin: 0 auto;
  padding: 1px;
  box-shadow: 0 0 6px rgba(32 33 36 / 28%); /* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
}

「各コードの解説」

・margin
　leftとrightの設定をautoにすることで、実質的に画像を「中央揃え」にしています。
　枠線を付けるだけであれば必要ありません。
　デフォルトで「中央揃え」にしたくない場合には、行ごと削除してください。

・padding
　挿入した画像と、枠線の間の幅を指定しています。
　たとえば「1px」の値を大きくすると、枠線内の余白部分が広くなります。ここもお好みで変更してください。

・box-shadow
　画像に影を付けて、浮き上がっているようにしています。
　「影の水平/垂直方向の距離」の値を変更することで、影を伸び縮みさせることができます。
　「ぼかしの距離」は、値が大きくなるほど、ぼかしの幅が広がります。結果的に影の面積が広く、色も薄くなります。
　「rgba(32 33 36 / 28%)」はお好みで変更してください。