2013/10/13

Bloggerで、文字の大きさや色を変更する

Blogger(ブロガー)で、画面に表示される文字の大きさを変更するには、HTML編集で、CSS部分を変更しても良いのですが、もっと簡単な方法があります。

テンプレート > カスタマイズ で、画面上部に

文字のサイズの変更のほかに、幅や背景テンプレートの変更ができる、
Bloggerテンプレートデザイナー」 が表示されます。



↓この画面だけで、充分カスタマイズできると思います。

「テンプレート」
「背景」
「幅を調整」
「レイアウト」
「上級者向け」


文字の変更には、一番下の「上級者向け」をクリックします。


ここでは、タグを間違えて失敗することがないので、色々試してみるのによいかも知れません。

ブログのタイトルの文字が大きすぎるのや色を訂正したり、
投稿タイトルの文字の大きさや色を変更したりできます。

一覧にない項目を変更したい時は、一番下の「CSSを追加」で、
HTML編集の画面を触らずにCSSを追加することが出来ます。


ただ、どこがどの「class」なのか分からないので、いきなりでは設定できません(笑
先に、確認する必要がありますよね。


ブログの画面で、確認してみました。

<h1 class="title">ブログのタイトル</h1>
<h2>ガジェットのタイトル</h2>
<h2 class="date-header"><span>日付</span></h2>
<p class="description"><span>ブログの説明</span></p>

<h3 class="post-title entry-title" itemprop="name">
<a href="http://~.html">エントリタイトル</a></h3>


h2の設定で同じ大きさになってしまっている「日付」と「ガジェットのタイトル」を
date-headerのCSS を設定して変更してみます。

設定が終わったら、右上の「ブログに適用」 を、クリックするのを忘れないように。(私はよく忘れて、焦ります。)


ちなみに投稿の編集画面は、以下のように設定されています。
*見出しより小見出しが大きいのは、上の設定のせいなんですね。

<h2>見出し</h2>
<h3>小見出し</h3>
<h4>準見出し</h4>



次に、日本語フォントを設定しました。
CSSを記入して「Enter」を押すと、画面下部にプレビューされます。(今気づきました)
 設定が終わったら、右上の「ブログに適用」 を、クリックするのを忘れないように。



ブログの説明は、ここで、descriptionを変更してもダメだったので、

テンプレート > HTMLの編集 で、description.text.sizeを探しました。

 (*HTMLやCSSを編集する時は、変更前の状態のテキストファイルをメモ帳などで保存しておきましょう。)

130行目~

   <Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="18px"/>



    <Variable name="description.text.size" description="Description Text Size" type="string" default="100%" value="14px"/>



スポンサードリンク