関連記事プラグイン

脆弱性のため公開中止となったプラグインの代わりに選んだ、現在の「関連記事」用プラグインの設定を保存しておくためのメモです。前回ほどは手を入れていないため「とりあえず関連記事が下に表示されている」状態のままですが、サムネイルのサイズや形などを多少カスタマイズしているのでその辺のところを忘れないように書いときます。まずはプラグインの設定から選べる部分から。

関連記事の幅は「220px」サムネイル画像の最大高さ「150px」抜粋（excerpt）とサムネイルのmarginとpaddingは「5px」としています。抜粋の文字数は50文字。記事へのリンクは「… 続きを読む」としました。

ここまではプラグインの設定画面で指定できます。次はテーマの追加CSSでの対応です。

// 抜粋が中央揃えになっていたので左寄せにするための指定です
.excerpt {
	text-align: left;
}
// サムネイル画像を150pxの正方形にするための指定です
.thumb{
	max-width:150px;
	margin: 0 auto;
}
// 本文と関連記事を分けるためのボーダー枠です
.related-post {
	border: 2px solid rgba(0, 0, 0, 0.12) !important;
}
// 関連記事のタイトルや本文のフォントをトップページと同じ「Montserrat」にする指定です
.post-list {
	font-family: 'Montserrat', sans-serif;
}
// 関連記事タイトルの英字を大文字にする指定です
.title, .nav-links {
	text-transform: uppercase;
}
// 関連記事タイトルのフォントの色を黒にする指定です
.title a {
	color: rgba(0, 0, 0, 1) !important;
}
// 関連記事タイトルにマウスオーバーした時の色指定です
.title:hover{
	color: #999 !important;
}
// サムネイルにマウスオーバーした時にシェードをかける指定です。
.thumb:hover {
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        trasition: 0.5s;
        filter:alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
}

結果は本文の後に表示される関連記事ボックスで確認して下さい。
まだまだ手を入れたいところはありますが、今日のところはこのぐらいで良しとします。