WordPressテーマ THE THOR
別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。
WordPressテーマ THE THOR(ザ・トール)には、記事中の画像に対して囲み効果の設定がありません。
そこで、記事中の画像に対してシャドーを表示するカスタマイズについてまとめてみました。
記事中の画像に対してシャドーの表示について
記事中で画像を設定した場合、デフォルトでシャドーを表示するようにします。
但し、記事中の画像に対してシャドーの表示が不要の場合は、手動でシャドーを取り消す事ができるようにします。
記事中の画像に対してシャドーを表示するカスタマイズ
先ずは手動で記事中の画像に対してシャドーを表示するカスタマイズです。
このカスタマイズ内容を「スタイルシート(style-user.css)」に追記します。
/************************************ ** ■画像の囲み効果のシャドー設定 ************************************/ .shadow1{ box-shadow: 5px 5px 5px #999; }
使い方
使い方は、シャドーを設定したい画像に対してimgタグのclassに「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です。
最後に
今回のカスタマイズで、記事内の画像に対してシャドーを設定することができました。
また必要に応じて画像のシャドーが不要の場合は、簡単にシャドーを表示させないようにできます。
記事中の画像にシャドーを表示させるだけで、見た目が随分と変わってくるお勧めのカスタマイズです。
コメント