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

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

今回は、WordPressテーマ THE THOR(ザ・トール)での「記事中の画像に対し枠線(ボーダー)を設定する」カスタマイズについてまとめてみました。

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

WordPressテーマ THE THOR(ザ・トール)には、記事中の画像に対して囲み効果の設定がありません。

WordPressテーマ THE THOR(ザ・トール)の記事中の画像の表示は次の様になっています。

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

そこで以前、記事中の画像に対しシャドーを表示するカスタマイズを行いました。

【THE THOR】記事中の画像に対してシャドーを表示するカスタマイズ
WordPressテーマ THE THOR(ザ・トール)には、記事中の画像に対して囲み効果の設定がありません。そこで画像に対してシャドーを表示するカスタマイズについてまとめてみました。シャドーはデフォルトとして不要の場合は表示させません。

現在、デフォルトで記事中の全画像に対しシャドーが表示するように設定されています。

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

今回は記事中の画像に対しシャドーではなく、枠線(ボーダー)を任意に設定するカスタマイズについて行いたいと思います。

記事中の画像に対し枠線(ボーダー)を設定するカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「記事中の画像に対し枠線(ボーダー)を設定する」カスタマイズを行います。

カスタマイズ内容

「記事中の画像に対し枠線(ボーダー)を設定する」カスタマイズ内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ●記事中の画像に対し枠線(ボーダー)を設定するカスタマイズ
************************************/
.border {
  border: 1px solid #ccc !important;
}

設定方法

今回のカスタマイズを行っても、設定をしないと記事中の画像に対し枠線(ボーダー)は表示されません。

枠線(ボーダー)を設定したい画像に対して、imgタグのclassに「border」を追記する必要があります。

例:img class="aligncenter size-full wp-image-165 border"

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

なお、以前の記事中の画像に対しシャドーを表示するカスタマイズを行っている場合は、

【THE THOR】記事中の画像に対してシャドーを表示するカスタマイズ
WordPressテーマ THE THOR(ザ・トール)には、記事中の画像に対して囲み効果の設定がありません。そこで画像に対してシャドーを表示するカスタマイズについてまとめてみました。シャドーはデフォルトとして不要の場合は表示させません。
例:img class="aligncenter size-full wp-image-165 shadow1"

とデフォルトで設定されています。

imgタグのclassに「border」が有ると枠線(ボーダー)、「shadow1」が有るとシャドーが表示される仕組みとなっています。

デフォルトはあくまでも「shadow1」となります。

また、「border」と「shadow1」の両方が有ると、枠線+シャドーが表示されます。

例:img class="aligncenter size-full wp-image-165 shadow1 border"

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

なお、画像に対し枠線(ボーダー)を設定する場合の注意点としては、画像サイズを指定する際に横縦の長さをそれぞれ枠線のサイズ分(+2)大きくした方が良いでしょう。

そうすることで枠線により画像が小さく表示されても、従来の画像サイズよりも大きく設定したことで通常サイズの画像が表示されます。

記事中の画像に対してデフォルトで枠線(ボーダー)を表示させる場合

記事中の画像に対してデフォルトで枠線(ボーダー)を表示させる場合は、子テーマの「functions.php」を開き、下記のソース内容を追記します。

//画像のclassにborderを追加する
add_filter('get_image_tag_class', function($class){
    return $class . ' border';
});

これにより手動でimgタグのclassに「border」を追記しなくても、自動で記事内の画像に対して「border」が追記されるようになります。

最後に

既にこの「記事中の画像に枠線(ボーダー)を設定する」カスタマイズは行っていたと思っていたのですが、先日画像に枠線を付けようとしたところ出来ず、まだ対応させていないことを知りました。

と言うことで、取り合わず記事中の画像に対しシャドーを設定していれば、枠線(ボーダー)の出番はほとんど無いと思います。

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール