HBK

はてなブログのカスタマイズにハマりいろいろまとめています!

【日付カスタマイズ】日付の横にアイコンを入れる!5種類まとめて紹介!


スポンサーリンク

ちゃお!はてなブログのカスタマイズにハマっているくましーだよʕ•ᴥ•ʔฅ

 

今回ははてなブログの日付の横にアイコンを入れるカスタマイズのやり方を紹介するよ!

 

いろんなアイコンを紹介するので好きなCSSをひとつ選んで使ってみてね! 

 

日付の横にアイコンを入れるには?

はてなブログの日付の横にアイコンを入れるには先に準備が必要だよ!

このコードをコピペしてね!

 

コピペする場所

「設定-詳細設定-検索エンジン最適化-headに要素を追加」

 

 

次に、CSSにコピペするよ! 

好きなアイコンのCSSをひとつ選んでコピペしてね!

 

 

 

日付の横に時計のアイコンを入れる

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

日付の横にカレンダーのアイコンを入れる

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

日付の横にベルのアイコンを入れる

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

日付の横にハートのアイコンを入れる

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

日付の横にスターのアイコンを入れる

 

コピペする場所

「デザイン-カスタマイズ-CSS」

 

 

アイコンを好きな色にする方法

自分のイメージの色に細かくカスタマイズするには

『#000000』

この部分を好きなカラーコードに変えてみてね!

カラーコードは下記のサイトでコピペできるよ!

HTMLカラーコード

 

 

そのほかのアイコンにするやり方

 content: "\f005 ";/* アイコンのユニコード */

CSSのこの列の『f005』←この部分を好きなユニコードに変更すると表示できるよ!

 

ユニコードとはアイコン1つ1つにつけられたコードだよ!

 

アイコンのユニコードは下記のサイトでコピペしてきてね!

Font Awesome Icons

 

このサイトにいって、好きなアイコンをクリックするとアイコンが表示されてすぐ下に

『Unicode: f005』

こんな感じで書いてあるのがユニコードだよ!

 

少しわかりにくいけど興味のあるひとは挑戦してみてね!

 

まとめ

はてなブログの日付の横にアイコンを入れるCSSを紹介したよ!

 

好きなアイコンの日付に変更できたかな?

 

そのほかにも日付のカスタマイズの記事を書いているので、良かったら参考にしてみてね!

 

【日付カスタマイズ】関連記事

blogkasutamaizu.hatenablog.com

 

さいごに

最後まで『HBK』を読んでくれてありがとう!

 

役に立った記事にスターをつけてもらえたら、サイトの品質向上の参考にさせていただきます!

 

たくさんの人の役に立てることが夢なので、はてなブックマークやTwitterでの共有もしてもらえると嬉しいです!

 

これからもカスタマイズやブログ運営に必要なことを記事にしていこうと思ってます!

 

良かったら読者登録よろしくね!

 

んじゃあ!またねーʕ•ᴥ•ʔฅ