WordPressテーマ Cocoon「画像の囲み効果」設定について
このエントリー記事は、WordPressテーマ Cocoonの設定項目の「画像の囲み効果」を使わずに、記事内の画像に対してボーダー（枠線）を設定するためのカスタマイズについてです。
WordPressテーマ Cocoonで「画像の囲み効果」を設定することが出来ます。
WordPressテーマ Cocoonの「画像の囲み効果」の設定（「Cocoon 設定」-「画像」-「画像の囲み効果」）は、
- ボーダー（薄い枠線）
- ボーダー（薄い太線）
- シャドー（薄い影）
の3パターンから選択することが出来ます。
「ボーダー（薄い枠線）」または「ボーダー（薄い太線）」を選択することで、全ての記事内の画像に対してボーダー（枠線）を設定することが出来ます。
WordPressテーマ Cocoon「画像の囲み効果」設定の気になる点
この「画像の囲み効果」の設定では、自分の使い方として幾つか気になる点が有ります。
一つ目の気になる点は、記事で貼られた全ての画像に対して有効となること。
そのため特定の画像だけ「画像の囲み効果」を付けたい設定は出来ません。
二つ目の気になる点は、ボーダーとシャドーを併用して「画像の囲み効果」の設定することが出来ません。
但し、ボーダー（枠線）の場合、シャドーと違って記事内の画像全てに設定していても特に問題はないと思います。
常にシャドーを使う事が無いのであれば、WordPressテーマ Cocoonで「画像の囲み効果」を設定するのも有りでしょう。
ボーダー（枠線）を設定するときに注意する点があります。
それは、画像にボーダー（枠線）を設定すると、ボーダー（枠線）のサイズ分だけ画像が縮小されてしまい、画像によっては若干崩れた感じとなります。
これを回避するには、画像サイズを指定する際に横縦の長さをそれぞれボーダー（枠線）のサイズ分大きくした方が良いでしょう。
そうすることで、ボーダー（枠線）により画像が小さく表示されても、従来の画像サイズよりも大きく設定したことで通常サイズの画像が表示されます。
個別の画像に対してボーダーを設定するカスタマイズ
今回WordPressテーマ Cocoonの「画像の囲み効果」設定を使わずに、個別の画像に対してボーダー（枠線）を設定するカスタマイズを行います。
画像に対するボーダー（枠線）の設定は必要時のみとします。
理由はそこまで必要性が無いのと、ボーダー（枠線）を設定した場合、画像のサイズ調整を行う手間が発生するためです。
個別の画像に対してボーダーを設定する
個別の画像に対して「画像の囲み効果」の設定を行いたい場合は、「スタイルシート(style.css)」にカスタマイズを行う必要が有ります。
そのカスタマイズは「スタイルシート(style.css)」に
.border {
border: 1px solid #ccc !important;
}
を追記します。
ボーダー（枠線）を設定したい画像に対して、imgタグのclassに「border」を追記します。
幾つかボーダー（枠線）のパターンを用意しておきたい場合は、「border」のラベル名を変更して、別のパターンを設定すればOKです。
画像にボーダー（枠線）を設定するには、手動でimgタグのclassに「border」を追記する必要が有りますが、ボーダー（枠線）の必要性があまり無いので必要に応じて設定しても問題ないと思います。
そして、ボーダー（枠線）を設定すると、ボーダー（枠線）のサイズ分画像が縮小されてしまうので、画像サイズを指定する際に横縦の長さをボーダー（枠線）のサイズ分大きくした方が良いでしょう。
例として800×600の画像サイズの場合、
今回のボーダー（枠線）のサイズの設定は1ドットとなります。
そのため画像の横サイズにプラス2ドット、画像の縦サイズにプラス2ドットに設定すると良いでしょう。
最後に
今回のエントリー記事で、WordPressテーマ Cocoonの設定項目の「画像の囲み効果」を使わずに、記事内の画像に対し必要に応じてボーダー（枠線）を表示できるようになりました。
また、前回のエントリー記事「記事内の画像に対してシャドーを設定する」で設定したシャドーと併用（シャドー＋ボーダー）することも可能です。
ボーダー（枠線）を必要とする画像は少ないので、あまり出番は無いかもしれませんが、バックカラーと画像の縁が同じ色合いの時など画像の縁を明確化したい時に大変便利な機能です。
コメント