WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「記事中の画像枠」のカスタマイズ 4回目についてまとめてみました。
WordPressテーマ THE THOR（ザ・トール）記事中の画像枠
これまで「記事中の画像枠」に関するカスタマイズは、3回実施しました。
現在の「画像中の画像枠」のスタイルは、次のようになっています。
今回、長らく使っていた記事中の画像に対する枠（シャドー）を見直したいと思います。
記事中の画像枠のカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「記事中の画像枠」のカスタマイズ 4回目を行います。
カスタマイズ内容
「記事中の画像枠」のカスタマイズ 4回目の内容は、下記の通りです。
「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容をこれまでカスタマイズした「■画像の囲み効果のシャドー設定」または「●記事中の画像に対し枠線（ボーダー）を設定するカスタマイズ」部分に上書きします。
これまで「記事中の画像枠」のカスタマイズを行っていない場合には追記する形でOKです。
/************************************
** ■画像の囲み効果のシャドー設定
************************************/
.shadow1 {
border-radius: 6px; /*角丸コーナー*/
box-shadow: 0 0 4px #eaeaea;
}
.shadow2 {
box-shadow: 0 0 4px #eaeaea;
}
使用方法
次に、記事中の画像に対してimgタグのclassに「shadow1」を設定する必要があります。
上記例のようにimgタグのclassに「shadow1」を追加することで、画像に枠が表示される仕組みです。
自動でimgタグのclassにshadow1を追加する
画像一つ一つに、手動でimgタグのclassに「shadow1」を追加するのは画像が多いほど面倒になってくるので、記事中の画像全てに対して自動で追加させたいと思います。
子テーマの「functions.php」を開き、下記のソース内容を追記します。
これにより自動で記事内の画像に対して「shadow1」が追記されるようになり、画像に枠が設定されます。
//画像のclassにshadow1を追加する↓ by masaa
add_filter('get_image_tag_class', function($class){
return $class . ' shadow1';
});
カスタマイズ後の記事中の画像枠
今回のカスタマイズによって、「記事中の画像枠」のスタイルは次のようになりました。
これまで下側にシャドーを付けていたのですが、それを無くしシンプルに画像の角4点に対してアール形状を施しました。
そして、別途「shadow2」も設定しました。
こちらはスマートフォンなどスクリーンショットを撮って、記事に貼り付けた場合、画像の境が分からなくなるために枠を設定しました。
borderタグを使って枠を設定すると、枠の幅分画像が縮小されて画像汚くなるので、あえてshadowタグを使って枠を設定してみました。
デフォルトは「shadow1」なので、「shadow2」を使いたい場合には、手動で「shadow1」を「shadow2」に変更する必要があります。
なお、「shadow2」には、画像の角4点に対してのアール形状の設定はありません。
最後に
最近になって記事中に表示される画像もシンプルが良いかなと思い、今回のカスタマイズに至りました。
自分の場合、商品レビューする関係上、スクリーンショットを貼り付けることが多いので、「shadow2」も採用してみました。
コメント