THE THOR ザ・トール 関連記事 をシンプルなテキストリンクにカスタマイズ

TTHE THOR の標準機能である 関連記事 をカスタマイズしました。

当サイトはGoogleAdSenseの関連コンテンツが使用可能になっています。画像による関連記事の紹介はAdSenseにまかせ、標準機能の関連記事はテキストでの表示にカスタマイズしました。画像よりテキストリンクのほうがクリックされやすいという意見もあるので、内容的に被ることも多いこの2つの見た目を大きく変更します。

関連記事関連コンテンツの開放について

このカスタマイズの出来上がりイメージ

カスタマイズすると以下の画像のように変化します。
※カスタマイズは自己責任でお願いします。

もともとの関連記事は以下の見た目です。（画像あり/なし）

画像あり

画像なし

画像なしの関連記事をもとにして見た目を変更します。

THE THOR 関連記事 をシンプルなテキストリンクにカスタマイズするCSS

まず関連記事の設定を変更します。

変更内容は以下の通り。

• 関連記事を表示
• 画像アスペクト比を「0:0」にして画像を非表示
• 投稿日と更新日には対応していないので非表示

次に追加CSSにコードを記述

以下のコードをコピペ

/*関連記事*/
/*項目ごとの罫線*/
.related__item{
	border-bottom: 1px dashed #cccccc;
	padding:10px 0;
}
.related__item:last-child{
	padding:10px 0;
}
/*カテゴリーの消去*/
.related .the__category{
	display: none;
}
/*記事タイトル*/
.related .archive__contents .heading a {
    padding: 0px;
    margin-bottom: 0px; 
    color: #666666;
	font-size:90%;
	text-decoration: underline;
	width:calc(100% - 6rem); /*タイトルの文字数+1+余白*/
}
/*記事タイトル前の項目*/
.related .archive__contents .heading:before{
	content:"関連記事"; /*タイトル*/
	font-size:1rem;
	margin-right:1rem; /*余白*/
	margin-top:2px;
	color:#eeeeee;
	font-weight:400;
	background-color:#333333;
	text-align:center;
	height:100%;
	width:5rem; /*タイトルの文字数+1*/
}
/*全体の並び*/
.related .archive__contents .heading{
	display:flex;
}
/*関連記事のタイトル装飾*/
.related h2{
	position:relative;
	left:-15px;
	width:calc(100% + 30px);
	background-color:#0268b7;
	font-size:1.6rem!important;
	color:#ffffff;
	padding:10px 15px;
	font-weight:400;
}

以上で完成です。

記事タイトル前の項目を変更する場合は、文字数により各数値を変更してください。（コード青文字部分）

また不必要な部分は項目ごと消去してください。（たとえば関連記事のタイトルに装飾がいらなければ/*関連記事のタイトル装飾*/の項目をまるごと削除）

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チート...

Mana

2,202円(11/21 17:46時点)

Amazonで購入する楽天市場で探すYahoo!で見る

Amazonの情報を掲載しています

あとがき

見た目が中心のカスタマイズです。効果のほどはわかりません。

個人的にはスッキリして気に入っています。関連記事の表示数を増やしても幅を取らないのが良いですね。