WordPressテーマ THE THOR
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「記事中の画像に対し枠線（ボーダー）を設定する」カスタマイズについてまとめてみました。
WordPressテーマ THE THOR（ザ・トール）記事内の画像
WordPressテーマ THE THOR（ザ・トール）には、記事中の画像に対して囲み効果の設定がありません。
WordPressテーマ THE THOR（ザ・トール）の記事中の画像の表示は次の様になっています。
そこで以前、記事中の画像に対しシャドーを表示するカスタマイズを行いました。
現在、デフォルトで記事中の全画像に対しシャドーが表示するように設定されています。
今回は記事中の画像に対しシャドーではなく、枠線（ボーダー）を任意に設定するカスタマイズについて行いたいと思います。
記事中の画像に対し枠線（ボーダー）を設定するカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「記事中の画像に対し枠線（ボーダー）を設定する」カスタマイズを行います。
カスタマイズ内容
「記事中の画像に対し枠線（ボーダー）を設定する」カスタマイズ内容は、下記の通りです。
「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。
/************************************
** ●記事中の画像に対し枠線（ボーダー）を設定するカスタマイズ
************************************/
.border {
border: 1px solid #ccc !important;
}
設定方法
今回のカスタマイズを行っても、設定をしないと記事中の画像に対し枠線（ボーダー）は表示されません。
枠線（ボーダー）を設定したい画像に対して、imgタグのclassに「border」を追記する必要があります。
なお、以前の記事中の画像に対しシャドーを表示するカスタマイズを行っている場合は、
とデフォルトで設定されています。
imgタグのclassに「border」が有ると枠線（ボーダー）、「shadow1」が有るとシャドーが表示される仕組みとなっています。
デフォルトはあくまでも「shadow1」となります。
また、「border」と「shadow1」の両方が有ると、枠線＋シャドーが表示されます。
なお、画像に対し枠線（ボーダー）を設定する場合の注意点としては、画像サイズを指定する際に横縦の長さをそれぞれ枠線のサイズ分(+2)大きくした方が良いでしょう。
そうすることで枠線により画像が小さく表示されても、従来の画像サイズよりも大きく設定したことで通常サイズの画像が表示されます。
記事中の画像に対してデフォルトで枠線（ボーダー）を表示させる場合
記事中の画像に対してデフォルトで枠線（ボーダー）を表示させる場合は、子テーマの「functions.php」を開き、下記のソース内容を追記します。
//画像のclassにborderを追加する
add_filter('get_image_tag_class', function($class){
return $class . ' border';
});
これにより手動でimgタグのclassに「border」を追記しなくても、自動で記事内の画像に対して「border」が追記されるようになります。
最後に
既にこの「記事中の画像に枠線（ボーダー）を設定する」カスタマイズは行っていたと思っていたのですが、先日画像に枠線を付けようとしたところ出来ず、まだ対応させていないことを知りました。
と言うことで、取り合わず記事中の画像に対しシャドーを設定していれば、枠線（ボーダー）の出番はほとんど無いと思います。
コメント