さて、前回は見出しのフォント変更をやってみましたが、その他のフォントは変わりませんでした。なので、ブログすべてのフォントを統一するためにはどうしたらいいのか？をやっていきたいと思います。
ただ今回も横道にそれる予感が・・・。
ちなみにこのブログの記事は、PCモニターの半分を本記事を表示して書きながら、もう半分はテストブログを表示して、この本記事に書いてる事を実践した結果をスクリーンショットで本記事に張り付けている、半リアルタイムブログです。
ではタイトルの事を実践していこうと思いますが、その前に
普通の文字？の標準フォント？を変更してみる
前回のCSSに「p」を追加するだけです。
追加する前
追加後
一番下の「標準」と「いろいろ試してます。
のフォントが変わってます。成功です。
CSSは
p,h1,h2,h3,h4,h5{ font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiryo, sans-serif }
です。
「p」を追加しただけです。
ちなみに全体の画像はこちら
ブログタイトルやサイドバーのフォントは変更されていません。
はてなブログは記事本文を記入すると<p></p>のタグにはさまれます。なので、「p」のフォントをこれに変更してくだい。という指示です。
これでとりあえずは「記事を書く」の「本文」のフォント変更は終了です。
とりあえずと書いたのは、本当に「p」を追加しただけでいいのか？が現時点の半リアルタイム実践では不明だからです。
まっさらな状態の「テストブログ」では実際にフォントが変わりましたが、本ブログでは色々なCSSをコピペした後でフォント変更を行いました。
その結果、この記事を書いていてこんなことをいうのはダメかもしれませんが、上記のCSSを張り付けただけではフォントはうまく変わってくれませんでした。それを含めての検証なので、ご勘弁ください。
デフォルトのテーマのCSSのすべてを、そのまま編集できるのならいいのですが、いわゆる「テンプレート」をCSSによって書き換えている状態なので、元ネタとなる「id名」や「class名」などが不明です。（まぁ、PCでブログを表示した状態でHTML表示すれば判明するのかもしれませんが、今のところ実行してません）テンプレートによって「id名」や「class名」が違う場合もあるかもしれません。なので「テスト用ブログ」は大事なのです。では
ようやく記事タイトルの実践です。
ではまず、
記事タイトルのフォント変更に挑戦
です。
なぜあえて「記事タイトル」としたかといいますと、同じ「タイトル」でも「ブログのタイトル」「記事のタイトル」は別々に判断されます。これは恐らく「id」という属性？が関係してきます。これについては別で書いていこうと思いますので、今のところは気にしないでいきます。
その別々で判断される「記事タイトル」は記号？タグ？で表示すると
.entry-title
となるっぽいです。（あくまでもデフォの「smooth」で「.entry-title」を指名したら出来た。ということで、他のテーマでは違うかもしれません）
この「entery-title」の前についている「.（ドット）」はすごく大事です。上記の「id名」や「class名」に関わってきます。ここでは説明（自分なりの解釈）は割愛して進みますが（別記事で書くつもりです）、必ず入れて下さい。
では実践です
追加したのは「.entry-title」で、CSSはこちら
.entry-title,p,h1,h2,h3,h4,h5{ font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiryo, sans-serif }
追加後の画像はこちら
見事に「テスト日記です」の文字が変わってくれました。成功です。
これは、「記事タイトル」のフォントが記事本文の<p>や<h3>などの枠組みではなく、「entry-title（記事タイトルの事）」と言う別名の枠組みが作られていて、その枠組みのなか（CSS）で命令されたフォントを表示しなさい。と、命令が出ているからみたいです。なので「.entry-title」はこのフォントで表示しなさい。と、命令変更してあげました。
この枠組みが「id名」や「class名」につながってきます。
そこでまた疑問が・・・。
では「記事本文」ではこの文字を使いなさい。と命令が出ているのでは？そうなると「記事本文」の枠組みの名前（「id名」や「class名」）を「entery-title（記事タイトル）」のように指名してなげなければフォントは変わらないんじゃない？と思ったりしました。
実際に、記事本文のフォントを変更したい場合は、記事本文の枠組みの名前（「id名」や「class名」）
「.entry-content」
を指名して変更する必要がある記事もあります。
なので、「テストブログ」ではないこの「本ブログ」のCSSには、現時点では「.entry-content（記事本文）」の枠組みの名前を付けてフォント変更しなさい。という命令と<p>を追加した上記のCSSの両方を入れています。これは初めに書いた通りに、
.entry-title,p,h1,h2,h3,h4,h5{ font-family:'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiryo, sans-serif }
を入力しても記事タイトルのフォントが変更しなかったからです。
CSSをコピペしまくった弊害？
それ以外にも、あちらこちらで「font-family」を入れまくってます。検証などより、まずは見た目を整えることを重視したからです。この検証によって無駄なCSSが削除できるはずです・・・・。多分・・・。
いらないCSSやHTMLを削除するのもSEO的には有効だと思います。
現時点でのワタクシの考察としては、「entry-title（記事タイトル）」の枠組みでは、フォントが指名されていている（テーマによって）。なので、その指示を変更するための命令を出さないと、フォントが変更されない。
「entry-content（記事本文）」の<p>や<h3>に関しては、特にフォント指定がされていないので、枠組みの名指しをしなくても、直接<p>や<h3>のフォントを変更しなさい。という命令を出すだけで変更されるのでは？と思っています。
ながながと書きましたが「そんな当たり前のこと・・・」って思われる方もいらっしゃると思いますが、当たり前のことが分かっていないワタクシな上に自分で実践しないと理解できないおバカな頭なのでご勘弁ください・・・。
最後に、「あくまでもワタクシの考察と検証です」
ではでは②に続きます
