各記事の下には、
関連記事を表示させることができます。
まずは・・・
設定
デザイン ⇨ カスタマイズ ⇨
記事をクリックして入ると
関連記事の項目あり。
希望であれば、✓点チェックを入れます。
パンくずリストとは、
ブログタイトルの下あたりに出る、ページの階層表示（このサイトでも出してます）
HOME ＞ A ＞ いまココ
みたいな表示…
表示してもOKなら✓点を入れます。
ところでこの関連記事…
デフォルトだとこんなふうに、縦にズラズラ出ます。
なのでココをもうちょい整えたい、、
というかた向けのカスタマイズです。
関連記事イメージとしてはこんな感じに。
1行に2記事、
それが2行でき、偶数個で表示。
記事の抜粋など内容や日付けは出さない（お好みで操作できます）。
日付けや抜粋を反映させると、
こんな感じになります。
ちなみに、常に4つ出るとは限りません。
最大4個までが出るというイメージ、、、
関連…といいつつ、
どう関連を選んでくるのかは不明w
CSS
そのスタイルシートが以下のです。
例によって一番下のCSSを開き、コピペしてみてください。
最後は“変更を保存する”ボタンもお忘れなく。。
/* 関連記事を2列（1行2記事）に変更 */
.related-entries {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.related-entries-item {
width: 49%;
margin: 0 !important;
}
/* 5番目の関連記事を非表示 */
.related-entries-item:nth-of-type(5) {
display: none;
}
/* サムネイル画像の大きさを変更 */
.related-entries-image {
width: 80px;
height: 80px;
border-radius: 6px;
}
/* 投稿日時を非表示 */
.related-entries-date-link {
display: none;
}
/* 記事タイトルのフォントの大きさと位置（縦中央揃え）を変更 */
.related-entries-title {
font-size: 15px;
padding: 20px 0;
}
/* 本文の概要を非表示 */
.related-entries-entry-body {
display: none;
}
投稿日や抜粋を表示させたいとき、
どちらかを表示させたいなど…該当の部分を以下のように変えてみてください。
コードを“/* ～ */”で囲んで操作する感じです。
/* 投稿日時を非表示 */
/*related-entries-date-link {
display: none;
}*/
/* 本文の概要を非表示 */
/*related-entries-entry-body {
display: none;
}*/
参考にしたサイト様はこちら、、、
ありがとうございます。
関連記事の表示のしかたはいろいろあり、
お好みに合ったやり方で、されると良いかと思います♪
コメント