記事の投稿日時にアイコンを付けるカスタマイズ【html css】

こんにちは、Twirusです。

今回は投稿日時にアイコン付いてるけど、どうやるんだろ？時計アイコン付いてるけど他のアイコンに変えてみたい！でもどうやんの？という記事です。

私の環境は【ブラウザ：Chrome、エディタ：Brackets 】です。今回エディタは使わなくても大丈夫です。

※CSS初心者が初心者なりの知識をひねり出して記事を書いています。何が起きるか分からないので「 {}デザインcss 」のバックアップをして自己責任でお願いします。

アイコンの呼び出し方
- 要素とは
- 疑似要素とは
とにかく呼び出す！
- CSSの優先順位
好きなアイコンを付けよう！
- コード解説
- アイコンのコードを調べる
終わりに
- CSS関係の記事

アイコンの呼び出し方

今回ははてなブログで使われているアイコンを呼び出します。アイコンの呼び出し方は二通りあります。１つ目は「要素」としての呼び出し方、２つ目は「疑似要素」としての呼び出し方です。はい！小難しい言葉出てきた～！ってなりますよね。この辺が取っ付き辛いよなぁ

要素とは

私はhtmlやcssを一から勉強した人間ではなくやりたい事をネットで調べているツギハギ知識人間です。そんな私が簡単に説明するとブログはhtmlで書かれた要素の集まりで出来ています。ヘッダー要素、記事要素、サイドバー要素、それぞれの中にまた要素が入っています。当ブログで例えるとヘッダー要素の中のブログタイトル要素(とにかくサボテン！)やブログ説明要素(AnywayCACTUS！)みたいにです。つまりアイコン要素という事です。htmlで呼び出します。

疑似要素とは

疑似要素は「要素の」先頭に何か付け足すよ！とか「要素の」末尾に何か付け足すよ！みたいに要素あっての呼び出し方です。つまり要素じゃない要素のおまけちゃんって事ですね。cssで呼び出します。

今回の記事は「記事要素の中の投稿日時要素に疑似要素でアイコンを付ける」カスタマイズです。

とにかく呼び出す！

まずはやってみましょう！どんなアイコンになるかは内緒です！下記のコードをコピーします。枠内をダブルクリックでコードを選択、右クリックでコピーを選択。

.date a::before {
    font-family: blogicon;
    content: "\f024";
}

ダブルクリックで選択できます。

次に①「ブログ名」＞②「デザイン」＞③「カスタマイズ(スパナマーク)」＞④「｛｝デザインCSS」＞⑤出てきた小窓に張り付けて下さい。

f:id:anywaycactus:20190704144452j:plain

どうですか？更新日時の先頭にペンアイコンが付きましたか？もしくは時計アイコンがペンアイコンに変わりましたか？変わらない場合、もしかしたらすでに「{}デザインCSS」の下の方にこの要素に対するコードが記述されているのかもしれません。

因みに「before」を「after」に変更すると更新日時の末尾に付きます。

CSSの優先順位

以前の記事で少し書きましたがローカルのCSSファイルを２つ読み込むようにコードを修正しました。１つ目は「テーマ」にあたるCSSファイル、２つ目は「{}デザインCSS」にあたるCSSファイル、同じ要素に対するコードが記述されていた場合、後から読み込んだCSSファイルの方が優先されます。そしてCSSファイルの中でも後に記述されたコードの方が優先されるのです。ちょっと実験してみます。こんな風に記述したらどうなるでしょう？

.date a::before {
    font-family: blogicon;
    content: "\f024";/*ペンアイコン*/
} 
.date a::before {
    font-family: blogicon;
    content: "\f000";/*どんなアイコン？*/
}

ダブルクリックで選択できます。

f:id:anywaycactus:20190629060306j:plain

こうなりました！後に記述したコードははてなブログのアイコンでした！雪晃綺麗！ちなみに「/*」と「*/」はコメントアウトといって挟んだコードを処理しないようにするものです。おかしな所があってコードを一時的に処理させないようにしたりメモに使います。以上で練習は終わりです！

好きなアイコンを付けよう！

お待たせしました！目印と解説を付けたコードです。目印を付けておくとコードを消す時にどこからどこまで消せばいいか分かりやすいです。

/***********投稿日時の前にアイコン**************/
.date a::before {
    font-family: blogicon;/*１、はてなブログのアイコンを使うよという宣言*/
    content: "\f043";/*２、””の中にアイコンのコードを指定*/
    position: relative;/*３、アイコンを移動させる宣言*/
    top: 0px;/*４、上から何ピクセル動かすか、マイナス指定可*/
    right: 0px;/*５、右から何ピクセル動かすか、マイナス指定可*/
    color:#000;/*６、色指定*/
    font-size:16px;/*７、フォントサイズ変更*/
}
/***********投稿日時の前にアイコンend***********/