関連記事プラグイン

閲覧数: 21(0)

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

関連記事の幅は「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;
}

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

カテゴリーIT閑話, 公開タグ, , ,
関連記事の大原則
2019年6月16日

ググったりしてあるページにたどり着いた閲覧者に対して、それに関連する記事を提示して少しでもサイトの滞  続きを読む

プラグインの脆弱性
blank
2019年5月29日

トップページから記事を選択して個別のページへ飛んだ後、本文の下に関連記事を表示するために使用していた  続きを読む

子テーマ化詳細
blank
2017年9月23日

子テーマ化にあたって具体的に修正した部分の説明をします。まずは「header.php」から。サイトの  続きを読む

テーマリニューアル2017
blank
2017年7月21日

すっかりご無沙汰してしまいました。 復帰記念に久しぶりにテーマを変更しました。今回使用するのは「ob  続きを読む

関連記事
blank
2016年11月16日

Related Postsと言うプラグインで、関連記事をページ下部に表示しています。これまでは、Wo  続きを読む

トリミング3
blank
2015年10月24日

先日から投稿ページ下部に、関連記事を表示するプラグインを導入しました。人気プラグインである、Word  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください