【Cocoon】記事内の画像に対してシャドーを設定する

アイキャッチ画像 Cocoon
スポンサーリンク

WordPressテーマ Cocoon「画像の囲み効果」設定について

このエントリー記事は、WordPressテーマ Cocoonの設定項目の「画像の囲み効果」を使わずに、記事内の画像に対してシャドーを設定するためのカスタマイズについてです。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

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」を追記します。

例:img class="aligncenter size-full wp-image-165 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です。

例:img class="aligncenter size-full wp-image-165"

最後に

今回のエントリー記事で、WordPressテーマ Cocoonの設定項目の「画像の囲み効果」を使わずに、記事内の画像に対してシャドーを設定することができました。

また必要に応じて画像のシャドーの設定が不要の場合は、classに追記された「shadow1」を削除することで、臨機応変にシャドーの有無を対応することが出来ます。

次のエントリー記事では、記事内の画像に対してボーダー(枠線)を設定するカスタマイズについてです。

コメント