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

【THE THOR】画像囲み効果のシャドー（影）のカスタマイズ

アイキャッチ画像 THE THOR（ザ・トール）
2021.04.08
この記事は約17分で読めます。
※ 本ページには【広告】が含まれています

WordPressテーマ THE THOR（ザ・トール）

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

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

今回は、WordPressテーマ THE THOR（ザ・トール）での「画像囲み効果のシャドー（影）」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール） 画像囲み効果のシャドー（影）

以前にも記事中の画像囲む効果のシャドーについてカスタマイズを行っています。

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

現在のWordPressテーマ THE THOR（ザ・トール）での「画像囲み効果のシャドー（影）」のスタイルは、次の様になっています。

【THE THOR】画像囲み効果のシャドー（影）のカスタマイズ

この「画像囲み効果のシャドー（影）」のスタイルは、

  • 記事中の画像
  • エントリー記事カードのアイキャッチ画像
  • ブログカードのアイキャッチ画像
  • サイトカードのアイキャッチ画像
  • 関連記事のアイキャッチ画像

に対して設定しています。

なお、

  • 記事トップのアイキャッチ画像
  • Prev/Nextのアイキャッチ画像

については、画像囲み効果のシャドー（影）の設定は行っていません。

今回、この「画像囲み効果のシャドー（影）」をスッキリとしたスタイルに変更し、記事トップのアイキャッチ画像とPrev/Nextのアイキャッチ画像に対しても「画像囲み効果のシャドー（影）」を設定したいと思います。

画像囲み効果のシャドー（影）カスタマイズ

WordPressテーマ THE THOR（ザ・トール）での「画像囲み効果のシャドー（影）」のカスタマイズを行います。

カスタマイズ内容

「画像囲み効果のシャドー（影）」のカスタマイズの内容は下記の通りです。

「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を各箇所に上書きします。

画像の囲み効果のシャドー設定

/************************************
** ■画像の囲み効果のシャドー設定
************************************/
.shadow1{
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
}

ブログカードのアイキャッチ画像のカスタマイズ

/************************************
** ■ブログカードのアイキャッチ画像のカスタマイズ
************************************/
.content .blogcard .eyecatch,
.content .blogcard .eyecatch .eyecatch__link img {
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
	border-radius: 6px; /*角丸コーナー*/
}
.content .blogcard .eyecatch .eyecatch__link img:hover {
	opacity: 0.6!important; /*不透明度*/
	transition: all 0.6s ease; /*アニメーション*/
	transform: none;
}

サイトカードのアイキャッチ画像のカスタマイズ

/************************************
** ■サイトカードのアイキャッチ画像のカスタマイズ
************************************/
.content .sitecard .eyecatch,
.content .sitecard .eyecatch .eyecatch__link img {
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
	border-radius: 6px; /*角丸コーナー*/
}
.content .sitecard .eyecatch .eyecatch__link img:hover {
	opacity: 0.6!important; /*不透明度*/
	transition: all 0.6s ease!important; /*アニメーション*/
	transform: none;
}

エントリー記事カードのアイキャッチのカスタマイズ

/************************************
** ■エントリー記事カードのアイキャッチのカスタマイズ
************************************/
.archive .archive__item .eyecatch {
	border-radius: 6px; /*角丸コーナー*/
	margin-top: 23px; /*アイキャッチ画像位置調整*/
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
	transition-duration: 0.6s; /*アニメーション*/
}
.archive .archive__item .eyecatch:hover {
	box-shadow: 0px 0px 8px 4px rgba(254,97,154,1); /*枠設定*/
	transition-duration: 0.6s; /*アニメーション*/
}
.archive .eyecatch__link img {
	transition-duration: 0.6s!important; /*アニメーション*/
}
.archive .eyecatch__link img:hover { /*ホバー時*/
	transition-duration: 0.6s; /*アニメーション*/
}

ウイジェット Jetpack版の人気記事ランキングのカスタマイズ

/************************************
** ■ウイジェット Jetpack版の人気記事ランキングのカスタマイズ
************************************/
.widgets-list-layout li {
	margin-bottom: 0.2em; /*下マージン設定0.9em*/
	padding: 5px 0 5px 5px;
}
.widgets-list-layout-links {
	font-weight:bold; /*フォント太さ*/
	margin-top: 0; /*上マージン設定*/
}
.widgets-list-layout .widgets-list-layout-blavatar {
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
}

関連記事 アイキャッチ画像カスタマイズ

/************************************
** ■関連記事 アイキャッチ画像カスタマイズ
************************************/
.related .eyecatch,
.related .eyecatch .eyecatch__link img {
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影*/
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
}
.related .eyecatch .eyecatch__link img:hover {
	opacity: 0.6!important; /*不透明度*/
	transition: all 0.6s ease; /*アニメーション*/
	transform: none!important;
}

Prev/Next アイキャッチ画像カスタマイズ

/************************************
** ■Prev/Next アイキャッチ画像カスタマイズ
************************************/
.prevNext .eyecatch { /*アイキャッチ画像*/
	border-radius: 12px; /*角丸コーナー*/
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
	transition-duration: 0.6s; /*アニメーション*/
}
.prevNext .eyecatch .eyecatch__link img { /*アイキャッチ画像*/
	object-fit: none!important; /*置換コンテンツの拡大縮小解除*/
	transform: none!important; /*変形解除*/
}
.prevNext .eyecatch .eyecatch__link .heading-secondary { /*タイトル*/
	font-size: 16px; /*フォントサイズ*/
	color: #fff; /*文字色*/
}
.prevNext .eyecatch .icon-clock{ /*投稿年月日*/
	color: #fff; /*文字色*/
}
.prevNext .prevNext__title { /*タイトル*/
	bottom: 0; /*下からの配置距離を0固定*/
}
.prevNext .eyecatch .eyecatch__link:hover .icon-clock { /*ホバー時の投稿年月日*/
	opacity: 1.0; /*不透明度*/
	background-color: #111;
}
.prevNext .eyecatch .eyecatch__link .heading-secondary { /*タイトル*/
	transition-duration: 0.6s!important; /*アニメーション*/
}
.prevNext .eyecatch .eyecatch__link:hover .heading-secondary { /*ホバー時のタイトル*/
	transition-duration: 0.6s!important; /*アニメーション*/
	font-size: 12px!important; /*フォント縮小*/
	opacity: 1.0!important; /*不透明度*/
	background-color: #111;
}
.prevNext .eyecatch:hover { /*アイキャッチ画像*/
	transition-duration: 0.6s; /*アニメーション*/
	box-shadow: 0px 0px 8px 4px rgba(254,97,154,1); /*枠設定*/
}

目次カスタマイズ

/************************************
** ■目次カスタマイズ
************************************/
.content .outline { /*目次ボックス設定*/
	display:block;
	margin:3rem 6%; /*外側余白設定*/
	border: 2px solid #ff75a7; /*枠線設定*/
	padding: 20px 0 20px 0; /*内側余白設定*/
	position:relative; /*相対位置*/
	border-radius: 10px; /*角丸コーナー*/
	background:linear-gradient(160deg, #ffddee, #fff)!important; /*グラデーション化*/
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
	line-height: 18px !important; /*行の高さ*/
}
.content .outline__number{ /*数字設定*/
	font-weight:bold; /*フォント太さ*/
	background:#fe619a; /*数字の背景色*/
	color:#fff; /*fe619a; /*数字の文字色*/
	border-radius:4px; /*角丸コーナー*/
	padding: 2px 5px 3px 5px; /*内側余白設定*/
	margin-right: 6px; /*外側余白設定*/
	font-size: 15px; /*フォントサイズ*/
	width:auto; /* widthプロパティ*/
}
.content .outline__link { /*リンク部分設定*/
	display: block; /*ブロックボックスとして表示*/
	font-weight:bold; /*フォント太さ*/
	font-size: 13px; /*フォントサイズ*/
	border-bottom: 1px dotted #f32469; /*アンダーラインの太さとカラー*/
	margin-bottom:2px; /*下マージン調整*/
}
.content .outline__link:hover { /*リンク部分ホバー時*/
	text-decoration:none; /*装飾無し*/
	color:#ff005d; /*文字色*/
	font-weight:bold; /*フォント太さ*/
	border-bottom: 1px dotted #fe619a; /*アンダーラインの太さとカラー*/
	border-radius:4px; /*角丸コーナー*/
}
.outline__title { /*目次タイトル設定*/
	margin-left: 1.6rem; /*外側余白設定*/
	color: #333; /*文字色*/
	font-weight: 700; /*フォント太さ*/
	font-size: 17px; /*フォントサイズ*/
	font-style: oblique; /*斜体フォント*/
	padding-left:6px; /*内側余白設定*/
}
.content .outline__switch { /*「閉じる」「開く」の表示位置設定*/
	position:absolute; /*絶対位置*/
	top:15px; /*上からの配置位置*/
	right:1.5rem; /*右からの配置位置*/
}
.content .outline__toggle:checked + .outline__switch::before { /*「閉じる」を「CLOSE」に表示変更*/
	content: "CLOSE"; /*「閉じる」→「CLOSE」変更*/
}
.content .outline__switch::before { /*閉じる開く設定*/
	content: "OPEN"; /*「開く」→「OPEN」変更*/
	border: 1px solid #fe619a; /*アンダーラインの太さとカラー*/
	font-size: 14px; /*フォントサイズ*/
	color: #fe619a; /*フォントカラー*/
	background-color: #ffddee; /*背景カラー*/
	transition: all 0.6s ease; /*アニメーション*/
}
.content .outline__switch:hover::before { /*閉じる開く設定*/
	color:#fff; /*「OPEN」「CLOSE」の文字色*/
	background-color: #fe619a; /*背景カラー*/
	transition: all 0.6s ease; /*アニメーション*/
}
.content .outline__switch + .outline__list { /*目次項目設定*/
	background: transparent; /*背景色透明*/
	margin-left:  7px; /*外側余白設定*/
	margin-right: 22px; /*外側余白設定*/
}
.content .outline  ul li,
.content .outline ol li { /*表示間隔設定*/
	padding-left: 0; /*内側余白設定 2.4rem*/
}

見出し1（タイトル）カスタマイズ

.dividerBottom h1 { /*見出し1（タイトル）カスタマイズ*/
	position: relative;
	word-break: break-all; /*表示範囲に合わせて改行*/
	background: -webkit-repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
	background: repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
	font-size: 22px; /*フォントサイズ*/
	letter-spacing: 2px; /*文字間隔*/
	margin: -8px -8px 20px -8px; /*外側余白設定*/
	padding: 20px 8px 20px 32px; /*内側余白設定*/
	line-height: 30px; /*行の高さ*/
	border-radius: 6px; /*角丸コーナー*/
	border: 2px solid #fe619a; /*枠線*/
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
}
.dividerBottom h1::after {
	position: absolute;
	top: 0.4em;
	left: 0.6em;
	content: '';
	width: 10px;
	height: -webkit-calc(100% - 0.8em);
	height: calc(100% - 0.8em);
	background-color: #ff005d;
	border-radius: 6px;
}
.archiveHead__subtitle { /*カテゴリーアーカイブ時の見出し1(タイトル)位置調整*/
	margin-bottom: 15px; /*外側余白設定*/
	font-size: 1.2rem; /*フォントサイズ*/
}

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

記事ページのアイキャッチカスタマイズ

/************************************
** ■記事ページのアイキャッチカスタマイズ 
************************************/
.eyecatch.eyecatch-main {
	margin-bottom: 30px!important; /*下マージン*/
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	box-shadow: 0 10px 8px -6px #8d8c8c;
}

カスタマイズ後の画像囲み効果のシャドー（影）

今回のカスタマイズによって、「画像囲み効果のシャドー（影）」のスタイルは次の様になりました。

【THE THOR】画像囲み効果のシャドー（影）のカスタマイズ

今回の「画像囲み効果のシャドー（影）」のカスタマイズでは、画像右縦のシャドー（影）を廃止し下側のみとしました。

但し、下側だけのシャドー（影）にした分、これまでよりもシャドー（影）を少し強調させてみました。

また、これに合わせて一部の画像に対して間隔を調整しました。

なお、目次に対しても同様のシャドー（影）に変更し、見出し1（タイトル）に対しては新たにシャドー（影）を設定しました。

今回カスタマイズとして長々とソースを記載していますが、基本的には画像に対して、

  -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; /*シャドー（影）*/
  -moz-box-shadow: 0 10px 8px -6px #8d8c8c;
  box-shadow: 0 10px 8px -6px #8d8c8c;

の設定を行うことでシャドー（影）を表示しています。

記事中の画像に対しての囲み効果のシャドー（影）設定については、下記エントリー記事をご参照ください。

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

最後に

ブログサイト立ち上げ当初から同じシャドー（影）のスタイルでしたが、画像を立体的に見える効果は変わならいので今回スッキリとしたスタイルに変更して良かったと思います。

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

シェアする
※ 本ページ内には【広告】が含まれています
管理人@masaa.net

コメント