ブログの記事がいつ書かれたものかってわりと重要だと思うのです。私はいつ書かれたものか、いつ更新されたものかを確認してから読むことも多いので、自分のブログでも投稿日・更新日を表示させています。
新着記事・人気記事の投稿日・更新日の表示方法
Cocoonの設定には記事事態に投稿日・更新日を表示させる設定はあるのですが、ショートコードでの投稿日・更新日を表示させるにはCSSの設定が必要になります。その説明はCocoon製作者のわいひらさんが詳細に説明されているのでそちらをご確認ください。
ただ、このコードを記載しただけだとこのような表示になります。
投稿日、更新日が左に寄ってしまうんですね。そしてアイコンもないのでなんとなく物寂しいじゃないですか。というわけで、右寄せして、アイコンを装飾します。
新着記事・人気記事の投稿日・更新日の装飾
アイコンは記事内のアイコンと揃えましたが、好みで変更してもよいかと。
/************************************
** トップ新着・人気・関連記事ウィジェット 投稿日・更新日表示
************************************/
.widget-entry-card-date {
display: block;
position: absolute; right: 0;/*右寄せ*/
font-size: 18px; /*フォントサイズ*/
}
.widget-entry-card-date::before{ /*投稿日のアイコンの変更*/
font-family: "Font Awesome 5 Free";
content: "\f017"; /*fa-clockアイコン*/
font-weight: 400; /*アイコンの種類regular*/
padding-right: 0px; /*右余白*/
font-size: 14px; /*フォントサイズ*/
}
.widget-entry-card-update-date::before{ /*更新日のアイコンの変更*/
font-family: "Font Awesome 5 Free";
content: "\f1da"; /*fa-historyアイコン*/
font-weight: 900; /*アイコンの種類solid*/
padding-right: 5px; /*右余白*/
font-size: 14px; /*フォントサイズ*/
}
これで右寄せ、アイコン装飾付きの日付表示になりました。
記事内の表示と揃うと落ち着きますね。ただ、スマホで表示した場合たまに折り返されたり重なったりするので、また時間のある時に調整しようかなと。できるのはフォントサイズ変えるとかそれぐらいしかないですけどね…
あまりに小さいとGoogleさんから怒られるし、これもまた加減が難しいといいますか。
コメント