WordPressテーマ Cocoon「画像の囲み効果」設定について
このエントリー記事は、WordPressテーマ Cocoonの設定項目の「画像の囲み効果」を使わずに、記事内の画像に対してシャドーを設定するためのカスタマイズについてです。
WordPressテーマ Cocoonで「画像の囲み効果」を設定することが出来ます。
WordPressテーマ Cocoonの「画像の囲み効果」の設定（「Cocoon 設定」-「画像」-「画像の囲み効果」）は、
- ボーダー（薄い枠線）
- ボーダー（薄い太線）
- シャドー（薄い影）
の3パターンから選択することが出来ます。
「シャドー（薄い影）」を選択することで、全ての記事内の画像に対してシャドー（薄い影）を設定することが出来ます。
WordPressテーマ Cocoon「画像の囲み効果」設定の気になる点
しかし、この「画像の囲み効果」の設定では、自分の使い方として幾つか気になる点が有ります。
一つ目の気になる点は、記事で貼られた全ての画像に対して有効となること。
そのため特定の画像だけ「画像の囲み効果」を付けたい設定は出来ません。
二つ目の気になる点は、ボーダーとシャドーを併用して「画像の囲み効果」の設定することが出来ません。
三つ目の気になる点は、シャドーのデザインが1種類に限定されてしまうこと。
WordPressテーマ Cocoon「画像の囲み効果」設定の利点
利点としては、このWordPressテーマ Cocoonの「画像の囲み効果」の設定を行うことで、この設定を行った以前の画像も含めて全ての画像に対して「画像の囲み効果」が設定される点です。
また、手軽に「画像の囲み効果」を得られるのは素晴らしいと思います。
個別の画像に対してシャドーを設定するカスタマイズ
今回WordPressテーマ Cocoonの「画像の囲み効果」設定を使わずに、個別の画像に対してシャドーを設定するカスタマイズを行います。
尚且つ、その画像に対するシャドーの設定はデフォルトとします。
また、逆にシャドーの表示が必要が無い場合は、シャドーの設定を取り消すカスタマイズも合わせて行います。
個別の画像に対してシャドーを設定する
個別の画像に対して「画像の囲み効果」の設定を行いたい場合は、「スタイルシート(style.css)」にカスタマイズを行う必要が有ります。
そのカスタマイズは「スタイルシート(style.css)」に
.shadow1{
box-shadow: 5px 5px 5px #999;
}
を追記します。
使い方は、シャドーを設定したい画像に対してimgタグのclassに「shadow1」を追記します。
幾つかシャドーのパターンを用意しておきたい場合は、「shadow1」のラベル名を変更して、「shadow2」などの別のパターンを設定すればOKです。
これでシャドーを設定したい画像に対して手動でimgタグのclassに「shadow1」を追記することで、任意にシャドーを設定することができます。
逆にその追記を行わないとシャドーが表示されないため、過去のエントリー記事の画像ではシャドーが表示されないので注意が必要です。
シャドーの設定をデフォルトにする
自分の場合、画像に対してシャドーの設定をデフォルトにしたいので、自動でimgタグのclassに「shadow1」を追記させます。
そのカスタマイズは、子テーマの「functions.php」に、
add_filter('get_image_tag_class', function($class){return $class . ' shadow1';});
を追記します。
これで手動でimgタグのclassに「shadow1」を追記しなくても、記事内の画像全てに対して自動で追記してくれます。
その画像にシャドーを付けたくない場合には、classに追記された「shadow1」を逆に削除すればOKです。
最後に
今回のエントリー記事で、WordPressテーマ Cocoonの設定項目の「画像の囲み効果」を使わずに、記事内の画像に対してシャドーを設定することができました。
また必要に応じて画像のシャドーの設定が不要の場合は、classに追記された「shadow1」を削除することで、臨機応変にシャドーの有無を対応することが出来ます。
次のエントリー記事では、記事内の画像に対してボーダー（枠線）を設定するカスタマイズについてです。
コメント