WordPressCocoon

【Cocoon】日付表示をカスタマイズする

アイキャッチ画像 Cocoon
この記事は約2分で読めます。
スポンサーリンク

日付表示

WordPressテーマ Cocoonの「日付表示」のカスタマイズについてまとめてみました。

テーマCocoonの日付表示

WordPressテーマ Cocoonで使われている「日付表示」は、次の様になっています。

【WordPress】日付表示をカスタマイズする

ご覧の通りフォントサイズが若干小さめとなっています。

と言う事で、フォントサイズをもう少し大きめのサイズに、時計のアイコンを別のアイコンにそれぞれ変更したいと思います。

日付表示のカスタマイズ

今回のカスタマイズ内容は、「日付表示」を大きめのフォントサイズに変更して、2種類の時計アイコンを別アイコンに変更するカスタマイズです。

カスタマイズ内容

「カテゴリーラベル」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ■日付のカスタマイズ
************************************/
.date-tags{
  line-height: 1.4; /*行間設定*/
  color: #666; /*文字色*/
}
.post-date, .post-update{
  font-size: 14px; /*フォントサイズ*/
  padding-right: 4px; /*右余白*/
  display: inline; /*横並びで縦中央揃え*/
}
.post-date::before{ /*アイコンの変更*/
  font-family: FontAwesome;
  content: "\f093"; /*fa-uploadアイコン*/
  padding-right: 4px; /*右余白*/
}
.post-update::before{ /*アイコンの変更*/
  font-family: FontAwesome;
  content: "\f148"; /*fa-level-upアイコン*/
  padding-right: 4px; /*右余白*/
}

カスタマイズ後の日付表示

今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「日付表示」は次のようになりました。

【WordPress】日付表示をカスタマイズする

フォントサイズとフォントカラー、表示位置を若干調整しました。

また、ブログのアップロード日付表示のアイコンを「fa-upload」に、ブログ修正のアップロード日付表示のアイコンを「fa-level-up」に変更しました。

最後に

元々デフォルトではフォントサイズが小さかったので、大きくするだけでも意味はあると思います。

アイコンは自分の好みに設定すると良いでしょう。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ブラック・サージナイト
リネージュ2M
商人放浪‪記
ドラゴンとガールズ交響曲
エグゾスヒーローズ
魔剣伝説
ロードモバイル
パズにゃん

おすすめWordPressテーマ!
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ WING(AFFINGER5)
WordPressテーマ Diver

MASAa.net

コメント