WordPressテーマ Cocoon
このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。
今回は、WordPressテーマ Cocoonでの「記事中の画像枠」のカスタマイズ 3回目についてまとめてみました。
WordPressテーマ Cocoon 記事中の画像枠
これまで「記事中の画像枠」に関するカスタマイズは、2回実施しました。
現在の「画像中の画像枠」のスタイルは、次のようになっています。
今回、長らく使っていた記事中の画像に対する枠（シャドー）を見直したいと思います。
記事中の画像枠のカスタマイズ
WordPressテーマ Cocoonでの「記事中の画像枠」のカスタマイズ 3回目を行います。
カスタマイズ内容
「記事中の画像枠」のカスタマイズ 3回目の内容は、下記の通りです。
「スタイルシート(style.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」が追記されるようになり、画像に枠が設定されます。
add_filter('get_image_tag_class', function($class){return $class . ' shadow1';});
カスタマイズ後の記事中の画像枠
今回のカスタマイズによって、「記事中の画像枠」のスタイルは次のようになりました。
これまで下側にシャドーを付けていたのですが、それを無くしシンプルに画像の角4点に対してアール形状を施しました。
そして、別途「shadow2」も設定しました。
こちらはスマートフォンなどスクリーンショットを撮って、記事に貼り付けた場合、画像の境が分からなくなるために枠を設定しました。
borderタグを使って枠を設定すると、枠の幅分画像が縮小されて画像汚くなるので、あえてshadowタグを使って枠を設定してみました。
デフォルトは「shadow1」なので、「shadow2」を使いたい場合には、手動で「shadow1」を「shadow2」に変更する必要があります。
なお、「shadow2」には、画像の角4点に対してのアール形状の設定はありません。
最後に
前回掲載したWordPressテーマ THE THOR（ザ・トール）での「記事中の画像枠」と同スタイルとしました。
自分の場合、商品レビューする関係上、スクリーンショットを貼り付けることが多いので、「shadow2」も採用してみました。
なお、WordPressテーマ Cocoonにも「画像の囲み効果」設定があります。
WordPressテーマ Cocoonの「画像の囲み効果」の設定（「Cocoon 設定」-「画像」-「画像の囲み効果」）は、【ボーダー（薄い枠線）】【ボーダー（薄い太線）】【シャドー（薄い影）】の3パターンから選択することが出来ます。
WordPressテーマ Cocoon「画像の囲み効果」を設定すると、全ての記事内の画像に対して画像の囲み効果が有効になってしまうので、臨機応変に設定したい場合には今回のカスタマイズの方が良いかと思います。
コメント