このサイトの固定ページをカスタマイズしたので、後でわかるように記録しておきます。
トップページ（固定ページ）の参考にしたブログ
トップページ（固定ページ）はこのサイトを参考に作りました。ほぼパクリです。
その後いくつかカスタマイズしたので記録しておきます。
カスタマイズしたい場所は
上記のサイトを参考に作った固定ページはこんな感じ。
気になる点が2つ
１．エントリーカードの縦幅が写真の大きさによって変わってしまっているので、ずれが生じる
２．エントリーカードに投稿日と更新日を入れたい
１．エントリーカードの縦幅を固定
これは上記のサイトにも載っていますが下記のコードを、外観→テーマエディタのstyle.cssに記載
/* トップページのカテゴリ別最新記事の幅固定 */
.widget-entry-cards .widget-entry-card-content{
padding-top:0.5em;
height:100px;
}こんな感じに縦幅が揃いました。
2.エントリーカードに投稿日・更新日を入れたい
2-1.CSSで投稿日・更新日を表示させる
新着・人気・関連記事ウィジェット（ショートコード）全てに日付を表示させたいので、
.widget-entry-card-dateを使いました。
.widget-entry-card-date {
display: block;
}詳しくは下のサイトに載っています。
このCSSを適応させると、こんな感じに日付が表示されます。ふたつあるのは、投稿日と更新日です。
2-2.日付の前にアイコンフォントを入れる
日付だけではわかりづらいので、アイコンフォントを前に入れることにします。
まずは、Cocoon設定→全体タブのサイトアイコンフォントをFont Awesome 5にします。
これでFont Awesome 5を使うことができます。投稿日の前にを、更新日の前にを入れてみます。
投稿日の前
.widget-entry-card-date::before{ /*投稿日のアイコンの変更*/
font-family: "Font Awesome 5 Free";
content: "\f017"; /*fa-clockアイコン*/
font-size: 14px; /*フォントサイズ*/
padding-right: 0px; /*右余白*/
font-weight: 400; /*アイコンの種類regular*/
}次は更新日の前
.widget-entry-card-update-date::before{ /*更新日のアイコンの変更*/
font-family: "Font Awesome 5 Free";
content: "\f1da"; /*fa-historyアイコン*/
font-size: 14px; /*フォントサイズ*/
padding-right: 0px; /*右余白*/
font-weight: 900; /*アイコンの種類solid*/
}
このCSSを適応させるとこのように表示されます。日付の位置を右下にしたいな～
2-3.日付の位置を右下にする
日付の位置を右下にします。先ほどの.widget-entry-card-deteにフォントのサイズと位置を記載します。
.widget-entry-card-date {
display: block;
font-size: 20px;
position: absolute; right: 0; bottom: 0;
}
このCSSを適応させると日付が右下に移動しました。やった～
サイドバーのエントリーカードを微調整
サイドバーのエントリーカードにも日付が表示されているのでこれを微調整します。
ちょっと日付のフォントが大きすぎな気がします。
これを小さくします。
/* サイドバーで日付のサイズ変更 */
.widget-sidebar .post-date,
.widget-sidebar .post-update {
font-size: 12px;
}
このCSSを適応させると
文字が小さくなりました。これで良いかな。
固定ページの日付を消す
固定ページ自体の投稿日と更新日も表示されてしまったので、これを消します。
書き込む場所は、固定ページの投稿（編集）ページの下の方にある、カスタムCSSです。
コードはこちら。
.date-tags{
display:none;
}これで消えました。
どれか１つクリックお願いします。
コメント