自宅内ネットワーク構成Geartics(ギアティクス)アマゾンほしい物リストSNSXInstagramYouTubeフォト蔵mixi問い合わせ問い合わせプライバシーポリシー(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。2021.04.09この記事は約17分で読めます。THOR(ザ・トール)を使って構築しています。THOR(ザ・トール)での「画像囲み効果のシャドー(影)」のカスタマイズについてまとめてみました。画像囲み効果のシャドー(影)以前にも記事中の画像囲む効果のシャドーについてカスタマイズを行っています。THOR(ザ・トール)には、記事中の画像に対して囲み効果の設定がありません。そこで画像に対してシャドーを表示するカスタマイズについてまとめてみました。シャドーはデフォルトとして不要の場合は表示させません。THOR(ザ・トール)での「画像囲み効果のシャドー(影)」のスタイルは、次の様になっています。関連記事のアイキャッチ画像に対して設定しています。記事トップのアイキャッチ画像Prev/Nextのアイキャッチ画像については、画像囲み効果のシャドー(影)の設定は行っていません。今回、この「画像囲み効果のシャドー(影)」をスッキリとしたスタイルに変更し、記事トップのアイキャッチ画像とPrev/Nextのアイキャッチ画像に対しても「画像囲み効果のシャドー(影)」を設定したいと思います。THOR(ザ・トール)での「画像囲み効果のシャドー(影)」のカスタマイズを行います。「画像囲み効果のシャドー(影)」のカスタマイズの内容は下記の通りです。「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を各箇所に上書きします。/*フォントサイズ*/}次に「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。#8d8c8c;}カスタマイズ後の画像囲み効果のシャドー(影)今回のカスタマイズによって、「画像囲み効果のシャドー(影)」のスタイルは次の様になりました。今回の「画像囲み効果のシャドー(影)」のカスタマイズでは、画像右縦のシャドー(影)を廃止し下側のみとしました。下側だけのシャドー(影)にした分、これまでよりもシャドー(影)を少し強調させてみました。これに合わせて一部の画像に対して間隔を調整しました。目次に対しても同様のシャドー(影)に変更し、見出し1(タイトル)に対しては新たにシャドー(影)を設定しました。#8d8c8c;の設定を行うことでシャドー(影)を表示しています。記事中の画像に対しての囲み効果のシャドー(影)設定については、下記エントリー記事をご参照ください。THOR(ザ・トール)には、記事中の画像に対して囲み効果の設定がありません。そこで画像に対してシャドーを表示するカスタマイズについてまとめてみました。シャドーはデフォルトとして不要の場合は表示させません。masaa.net2019.03.17最後にブログサイト立ち上げ当初から同じシャドー(影)のスタイルでしたが、画像を立体的に見える効果は変わならいので今回スッキリとしたスタイルに変更して良かったと思います。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(3)サイト運営者masaaブログ歴20年目の弱小ブロガー。PCはMZ-80Cから始まりMZ-80B,PC-8001/8801/88VA/9801/9821/N/NS等を経て現在自作PCに夢中。THORで3つのウェブサイトを運営中。blogたっけーブログもう50年生きちゃったよ。(3)MASAa.net内を検索サイト運営者masaaブログ歴20年目の弱小ブロガー。PCはMZ-80Cから始まりMZ-80B,PC-8001/8801/88VA/9801/9821/N/NS等を経て現在自作PCに夢中。THORで3つのウェブサイトを運営中。blogたっけーブログもう50年生きちゃったよ。defined.")}))})()。