(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

【THE THOR】記事中の画像に対し枠線を設定するカスタマイズ 4回目

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約4分で読めます。

【広告】

※ 本ページには【広告】が含まれています

WordPressテーマ THE THOR(ザ・トール)

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト
MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト

今回は、WordPressテーマ THE THOR(ザ・トール)での「記事中の画像枠」のカスタマイズ 4回目についてまとめてみました。

WordPressテーマ THE THOR(ザ・トール)記事中の画像枠

これまで「記事中の画像枠」に関するカスタマイズは、3回実施しました。

【THE THOR】画像囲み効果のシャドー(影)のカスタマイズ
WordPressテーマ THE THOR(ザ・トール)での「画像囲み効果のシャドー(影)」のカスタマイズについてまとめてみました。今回のカスタマイズでは画像右縦のシャドー(影)を廃止し下側のみのスッキリしたスタイルにしました。
【THE THOR】記事中の画像に対し枠線を設定するカスタマイズ
WordPressテーマ THE THOR(ザ・トール)には、記事中の画像に対して囲み効果の設定がありません。以前記事中の画像に対しシャドーを設定しましたが、今回は任意に枠線(ボーダー)を設定するカスタマイズについてまとめてみました。
【THE THOR】記事中の画像に対してシャドーを表示するカスタマイズ
WordPressテーマ THE THOR(ザ・トール)には、記事中の画像に対して囲み効果の設定がありません。そこで画像に対してシャドーを表示するカスタマイズについてまとめてみました。シャドーはデフォルトとして不要の場合は表示させません。

現在の「画像中の画像枠」のスタイルは、次のようになっています。

【THE THOR】記事中の画像に対し枠線を設定するカスタマイズ 4回目

今回、長らく使っていた記事中の画像に対する枠(シャドー)を見直したいと思います。

記事中の画像枠のカスタマイズ

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="aligncenter size-full wp-image-165 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';
});

カスタマイズ後の記事中の画像枠

今回のカスタマイズによって、「記事中の画像枠」のスタイルは次のようになりました。

【THE THOR】記事中の画像に対し枠線を設定するカスタマイズ 4回目

これまで下側にシャドーを付けていたのですが、それを無くしシンプルに画像の角4点に対してアール形状を施しました。

そして、別途「shadow2」も設定しました。

こちらはスマートフォンなどスクリーンショットを撮って、記事に貼り付けた場合、画像の境が分からなくなるために枠を設定しました。

borderタグを使って枠を設定すると、枠の幅分画像が縮小されて画像汚くなるので、あえてshadowタグを使って枠を設定してみました。

【THE THOR】記事中の画像に対し枠線を設定するカスタマイズ 4回目

デフォルトは「shadow1」なので、「shadow2」を使いたい場合には、手動で「shadow1」を「shadow2」に変更する必要があります。

なお、「shadow2」には、画像の角4点に対してのアール形状の設定はありません。

最後に

最近になって記事中に表示される画像もシンプルが良いかなと思い、今回のカスタマイズに至りました。

自分の場合、商品レビューする関係上、スクリーンショットを貼り付けることが多いので、「shadow2」も採用してみました。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】