nofanの日記

ー初心者DIYと日々の日記ー

はてなブログのフォントを全て統一する事に挑戦

前回と前々回でタイトルのフォント変更などの挑戦をしてましたが、前回のサイドバーのフォント変更をする際に気が付いた事があったので、個別ではなく「全て」に統合して一からやり直します。

では何に気付いたのか?それは

意図しないフォントが変更される事

です。

前回のサイドバーのフォント変更の際にはサイドバーのタイトルのみを名指ししてフォント変更しました。その次に、タイトル下にあるそれ以外のフォントを変更しようと思ったのですが、その時に自分のブログのHTMLを表示して枠組みの名前を調べました。が、枠組みがいっぱいありました。それぞれを指定するのは面倒。と言うか、本ブログでも一個ずつしてしてる訳じゃありません。でもフォントは変更されてる。なぜ?でした。そこで、サイドバータイトルのフォント変更命令を消して、サイドバーの部分全てを枠組みしている大元の名前っぽいものを指定しました。これは本ブログのCSSには無いものです。ちなみにこちらです。

box2

まぁ簡単な名前です。もう一つその中身の枠組みなのかな?

box2-innner

ってのもありました。

これがサイドバーの全体を指すものであれば、これを指定してあげたら一発解決じゃね?と。

で実践

#box2

を追加しました。

あれ?「.」(ドット)じゃないの?

気付いたあなた!!素晴らしい!!
自分も「h3」や「p」を指定する時は頭に何も記号を入れないのに、「entry-title」は「.」だったり「title」は「#」だったりして何が違うの?と思ったからです。これは後で書きます。

追加した結果は失敗?成功?でした。

それはサイドバータイトル以外、厳密に言うと、サイドバータイトルとid名はフォント変更されずに、それ以外のフォントが変更されました。ちなみプロフィール説明のフォントは、すでに変更されてました。

#box2-inner

に変更しても同じ結果です。

この場合、「inner」をつける方が正解なのか付けないのが正解なのかは現状は不明です。

なので、結果から行けばサイドバータイトルを変更する指令CSSと上記の「#box2」か「#box2-inner」の指令を出してあげる。そして、最後にid名のフォントを変更する指令(この指示は本ブログでも入れてます)を出してあげたら完成にはなります。

しかしながら、上記でも書いたサイド部分のフォント変更の命令を出す以前に、プロフィール説明のフォントは変更されてた事が気になりました。

何もしてないのにフォント変更されていると言うことは「前回までのCSSに、その命令が含まれている」と言う事ですよね。

このままいくと、前回のCSSのフォント変更命令とサイド部分のフォント変更命令の2重命令になってしまうのでは?

そこまで気にしなくてもいいのかもしれませんが、「無駄を省く検証」でもあるので検証です。

ではまず、このプロフィール説明のフォント変更命令はどの部分なのか?そして、その命令を削除した上で、サイド部分のフォント変更命令を出した場合、フォントは変更されるのか?実践です。

プロフィール説明のフォントを決めている者はいったい誰だ?

正体は<p>君でした。

本文入力した時に出てくるタグです。

あと、違う場所ですが、リンクするときに出てるく

<a herf="リンク先アドレス">リンク先の名前など</a>

のところもそうでした。

<a href>ってこれで一括りの物だと思ってましたが違いました。最後の</a>で気付けよ!?って?わかりません。

「href」は属性セレクタ?属性に関してはここで終了という</>の記号は必要なさそうです。要素に関しては必要?

<p>君は前回のフォント変更の際に追加しましたが(<p>君はいろいろなところで使われているみたいです。<p>を指定してフォント変更や色変更をする場合は注意が必要です。)

<a>君はしていしてません。

 

でも変更されてます。

なぜに?

この現象について調べていると、毎回の事ながら申し訳ないのですが、半リアルタイムブログ(ブログの記事を書いていない・書けない時は、書いてる途中の検証や疑問ごとを調べてます)の為、またまた疑問がでてきました。

それは全称セレクタと言われているアスタリスク「*」です。

すべての要素を選択してくれる便利な物。

えっ!?じゃあ、これで一発解決じゃね?

って、また思ったのですがダメでした。

なぜか?

前回でも書いた(書いたかな?)優先順位の問題です。

なかなか奥が深いです。

フォントを変更したい。CSSの無駄を無くしたいと思ってやり始めた事ですが、やればやるほどドツボにハマってるような・・・。

しかしめげません。

意図した場所・意図しない場所が変更される・変更されない。といった方は多いと思います。

自分の勉強の為にやってみます。

またタイトルを変えて今後の検証を投稿していきます。

最後にはまとめが作れるように頑張ります。

 

ではでは