【THE THOR】関連記事のカスタマイズ

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

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

ZMASAa.blog │ PC･ガジェット･デジモノ･車好きのmasaaの情報発信サイト

PC･ガジェット･デジモノ･車好きのmasaaが情報を発信するサイト

wp.masaa.net

今回は、WordPressテーマ THE THOR（ザ・トール）での「関連記事」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール） 関連記事

過去にWordPressテーマ THE THOR（ザ・トール）の「関連記事」に関するカスタマイズを行ってきました。

【THE THOR】関連記事のアイキャッチ画像のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）の「エントリー記事カードのアイキャッチ画像」について前回のエントリー記事でカスタマイズを行いました。今回は同様の処理を「関連記事のアイキャッチ画像」に対してカスタマイズしてみました。

masaa.net

2020.01.15

【THE THOR】関連記事のタイトルのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）の「関連記事のタイトル」のカスタマイズについてまとめてみました。今回のカスタマイズで、「関連記事のタイトル」のフォントサイズを調整してみました。

masaa.net

2019.05.20

現在のWordPressテーマ THE THOR（ザ・トール）の「関連記事」スタイルは次の様になっています。

この「関連記事を」もう少し見やすいようにカスタマイズしたいと思います。

関連記事のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）での「関連記事」のカスタマイズを行います。

カスタマイズ内容

「関連記事」のカスタマイズの内容は、下記の通りです。

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

/************************************
** ■関連記事見出しカスタマイ
************************************/
.heading.heading-sub {
	position: relative;
	background: -webkit-repeating-linear-gradient(-45deg, #ffddee, #ffddee 3px,#fff9fc 3px, #fff9fc 7px); /*背景カラー*/
	background: repeating-linear-gradient(-45deg, #ffddee, #ffddee 3px,#fff9fc 3px, #fff9fc 7px); /*背景カラー*/
	font-size: 20px; /*フォントサイズ*/
	letter-spacing: 2px; /*文字間隔*/
	margin: 30px -8px 25px -8px; /*外側余白設定*/
	padding: 8px 7px 8px 10px; /*内側余白設定*/
	border-left: 8px solid #fe619a; /*左ラインの太さとカラー*/
	border-bottom: 2px solid #fe619a; /*アンダーラインの太さとカラー*/
	line-height: 27px; /*行の高さ*/
	border-radius: 3px; /*角丸コーナー*/
}
.related {
	border-top: 2px dotted #fe619a;
}
.related__item { /*関連記事の間隔調整*/
	margin-bottom: 11px; /*アイキャッチ上の隙間*/
	padding-bottom: 2px!important; /*アイキャッチ下の隙間*/
	border-bottom: 1px dashed #fe619a; /*アンダーラインの太さとカラー*/
}

※上記カスタマイズの【.related__item { /*関連記事の間隔調整*/】の部分は、過去にカスタマイズを行っている部分なので、重複しないように過去のカスタマイズ部分は削除（上書き）します。

カスタマイズ後の関連記事

今回のカスタマイズによって、「関連記事」のスタイルは次の様になりました。

今回の「関連記事」のカスタマイズは、

• 記事と記事の間にライン表示を設けて区切りが分かりやすくしてみました。
• 「関連記事」の見出しを「見出し2」と同じスタイルにして統一感を出してみました。
• 「関連記事」の一番上に有るライン表示のスタイルを変更してみました。

の3点です。

最後に

今回のカスタマイズによりWordPressテーマ THE THOR（ザ・トール）の「関連記事」が見やすくなりました。これにより少しでもPV数向上に繋がれば良いですね。