THE THORWordPress

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

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR

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

The main blog of masaa powered by WordPress.
スマホ、ガジェット、食玩などの記事をWordPressブログに毎日更新中!中の人はこれでもパパ。

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

【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です。

最後に

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

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

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

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

コメント