【THE THOR】記事中の画像に対してシャドーを表示するカスタマイズ

INDEX

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

WordPressテーマ THE THOR（ザ・トール）には、記事中の画像に対して囲み効果の設定がありません。

そこで、記事中の画像に対してシャドーを表示するカスタマイズについてまとめてみました。

記事中で画像を設定した場合、デフォルトでシャドーを表示するようにします。

但し、記事中の画像に対してシャドーの表示が不要の場合は、手動でシャドーを取り消す事ができるようにします。

先ずは手動で記事中の画像に対してシャドーを表示するカスタマイズです。

このカスタマイズ内容を「スタイルシート(style-user.css)」に追記します。

/************************************
** ■画像の囲み効果のシャドー設定
************************************/
.shadow1{
	box-shadow: 5px 5px 5px #999;
}

使い方は、シャドーを設定したい画像に対してimgタグのclassに「shadow1」を追記します。

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

幾つかシャドーのパターンを用意しておきたい場合は、「shadow1」のラベル名を変更して別パターンを設定すればOKです。

シャドーを設定したい画像に対してimgタグのclassに「shadow1」を追記することで、任意にシャドーを設定することができます。

逆にその追記を行わないとシャドーが表示されないため、過去のエントリー記事の画像ではシャドーが表示されないので注意が必要です。

ここまでは記事中の画像に対して手動でシャドーを表示する使い方です。

次に記事中の画像に対してデフォルトでシャドーの表示をするカスタマイズです。

このカスタマイズ内容を子テーマの「functions.php」に追記します。

//画像のclassにshadow1を追加する
add_filter('get_image_tag_class', function($class){
    return $class . ' shadow1';
});

これにより手動でimgタグのclassに「shadow1」を追記しなくても、自動で記事内の画像に対して「shadow1」が追記されるようになります。

逆に記事中の画像に対してシャドーを付けたくない場合には、手動でclassに追記された「shadow1」を削除すればOKです。

今回のカスタマイズで、記事内の画像に対してシャドーを設定することができました。

また必要に応じて画像のシャドーが不要の場合は、簡単にシャドーを表示させないようにできます。

記事中の画像にシャドーを表示させるだけで、見た目が随分と変わってくるお勧めのカスタマイズです。