前回の［ブログアドバイス第２回：読みやすいフォント（書体）とフォントサイズ］で投稿コメントのフォントのサイズや書体を変更する方法を書きました。
それを参考に、エミちゃんも自分のサイトのフォントを変更したのですがメールでこのような疑問を投げかけてきました。
「ブログのテキストのサイズを変更しました。でもそしたら「ブログタイトルの説明」まで大きくなってしまいました。他のところは全て色とサイズが指定できるようになっているのに、ブログタイトルの説明のところだけ、色しか指定できません。サイズ指定のボックスがでないの。これって私だけ？」
そうなんです。これって仕様なんです。
「ブログタイトルの説明」のフォントサイズは［テンプレートデザイナー］では設定できないのです。
ちょっと不親切ですよねぇ。
私も「ブログタイトルの説明」が大きくなって見栄えが悪くなったのがイヤでイヤで、いったいどこでそのサイズを設定しているのか、探しまくりました。
見つかりました！
ただここからはHTML＆CSSの編集になります。
でもより自分ごのみのデザインに直すには、テンプレートデザイナーの編集から脱出して、いつかはチャレンジしなければいけない領域なのです。
私もちょこっとしか勉強してないレベルの人なので、難しいことはできません。
私と一緒に少しずつ簡単なところからチャレンジしていきましょう！
Step1 : ［HTMLの編集］ウィンドウを開きましょう
投稿画面のHTMLではありません。
［テンプレート］＞［HTMLの編集］ボタンで開きます。
［テンプレート］＞［HTMLの編集］ボタンで開きます。
Step2 : ［.Header .description］という記述を探します
ホームページを自作したことのない人にとって、このHTMLのずらずら並んだ英文字を見ただけで尻込みしてしまうと思います。
もちろんすべて理解する必要はないので安心してください。
探した箇所をちょこっとだけ書き換えるだけです。
だけれど、このずらずらと長い2000行以上の文字列の中から探すのが大変です。
探しやすくするために、わかりやすく位置を教えますのでのんびりやりましょう。
１）開いたときは一番下の行が表示されていると思います。スライダーを上まで動かして、一番上の行を表示してください。
２）みなさんが選んだテンプレートデザインによって、行数（行番号）は人それぞれです。
ですがだいたい近い位置にあると思うので、私のHTMLの行番号を参考にして、近くの行番号で探してみてくださいね。
３）たたまれている行を開きます。
だいたい14行あたりに黒い三角がついていると思います。
文字列は「<b:skin>…</b:skin>」です。
この三角をクリックすると、たたまれて省略されていた行が開いて表示されます。
４） /* Header
----------------------------------------------- */
という記述を探します。
私のHTMLでは163行目ですが、人によっては200行目あたりにあるかもしれません。
見つけやすい文字列なので、探しやすいと思います。
５）
/* Header
----------------------------------------------- */
と
/* Tabs
----------------------------------------------- */
の間を見てみましょう。
ちょうど
/* Tabs のすぐ上に
.Header .description {
font-size: 130%;
}
という記述があります。見つかりましたか！？※人によっては130％ではないかもしれません。
この記述が見つかるまで頑張りましょう！
Step3 : 「font-size」を書き直します
「font-size」が私のものは130％になっていますが、みなさんはどうでしょうか？
この130％というのは、「ページのテキストサイズ」に対しての割合です。
どうりで大きくなってしまうはずです。
ここを80％などとと小さくしても良いし、ピクセルで設定してもOKです。
私のブログでは
.Header .description {
font-size: 13px;
}
とピクセルでサイズ指定にしてあります。本文（14px)よりもjじゃっかん小さくしたというわけです。
このときセミコロン（；）や中括弧（｝）などは削除しないように気をつけましょう。
Step4 : プレビューで確認してみましょう
テンプレートを保存する前でも、書き換えたことでどのように変化したか確認することができます。
［テンプレートをプレビュー］ボタンを押してみてください。
HTMLだったウィンドウがプレビューに切り替わります。
文字サイズが気に入らなければ［テンプレートを編集］ボタンを押し、再び書き換えてみてください。
文字のサイズを色々と入力してみて、好みのサイズになったら［テンプレートを保存］を押します。
あとは［戻る］ボタンでOKです。
文字サイズを直すのはとても簡単でしたね。探すのがじゃっかん難しかったでしょうか。
ブログタイトルの説明文が小さくなったことで、ちょっとオシャレになりホッとしましたか。
ただHTML（直した箇所はCSS）がどのように機能しているのか、記述ルールはどのようになっているかは説明していませんので、ほかの箇所はむやみに変更しないようにしましょう。
0 件のコメント:
コメントを投稿