【Cocoon】固定ページのカスタマイズ記録

WordPress

このサイトの固定ページをカスタマイズしたので、後でわかるように記録しておきます。

スポンサーリンク

トップページ(固定ページ)の参考にしたブログ

トップページ(固定ページ)はこのサイトを参考に作りました。ほぼパクリです。

その後いくつかカスタマイズしたので記録しておきます。

カスタマイズしたい場所は

上記のサイトを参考に作った固定ページはこんな感じ。

気になる点が2つ

1.エントリーカードの縦幅が写真の大きさによって変わってしまっているので、ずれが生じる

2.エントリーカードに投稿日と更新日を入れたい

1.エントリーカードの縦幅を固定

これは上記のサイトにも載っていますが下記のコードを、外観→テーマエディタの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;
}

これで消えました。


どれか1つクリックお願いします。
 にほんブログ村 ライフスタイルブログ セミリタイア生活へ longstay88_31 
スポンサーリンク

関連コンテンツ
WordPress
スポンサーリンク
カメとヒヨコの海外ロングステイ

コメント

タイトルとURLをコピーしました