日本司法支援センター
2012-06-26

アメブロのCSSカスタマイズ編です。
フォントの大きさって重要ポイント。
フォントの大きさを変更してみましょう。

 

 

 

 

 

アメブロのCSSカスタマイズ編です。
フォントの大きさって重要ポイント。
フォントの大きさを変更してみましょう。

 

フォントの種類の変更は、以前ご紹介しました。
読んでいない方は、こちらからご覧くださいね。
→  【CSSカスタマイズ フォントの種類の変更】

 

 

フォントの種類は、ブラウザによって、表示されない文字もあります。

 

 

なので、標準的なフォントを選ぶことしかできませんが、
フォントの大きさもまた、見るブラウザによっては、違いがあります。

 

 

 

お使いのブラウザ(※ブラウザとは・・・ IEやFirefoxのことです。)では、
ブログのサイズなども違うように、フォントの大きさも違ってきます。

 

 

だから、一概に変えるのがいいのかどうか?

 

ちょっと迷うところです。

 

 

 

でも、サイドバーや、記事タイトルのフォントなど、
見やすい大きさの方が、訪問した方にも好感が持てますね。

 

 

記事投稿の場合は、ビジュアルエディタで変更できますが、
ブログレイアウトのフォントサイズの変更は、
CSSの変更で行います。

 

 

 

サイドバーのブログデザインより、デザインの変更ををクリックします。

CSSの変更を選び、CSSソースを全部コピーしておきましょう。

 

 

 

アメブロのCSSって、以外に親切で、
コメントアウトで、(全体の文字)とか(ブログタイトル文字)とか、
表示してくれているので、変更箇所を見つけるのも、簡単です。

 

 

ちょっとコメントアウトの解説(文字関連をまとめました)

 

 


全体の文字 ブログ全体の文字装飾
ブログタイトル文字 ブログタイトルの文字の装飾
記事/メッセージボード内の文字のスタイル 記事とメッセージボードに表示される文字装飾
サイドバー内の文字のスタイル サイトバーの文字の装飾
記事タイトル 記事タイトルの文字装飾

 

 

 

文字関連は、こんなところです。

 

 

全体の文字の変更から、個別に設定してあるので、

全体の文字変更より、【ブログタイトル文字】の変更してみましょう。

 

 

私のサンプルサイトで、見てみてね。

 

2012y06m26d_114250186

今はこんな感じです。

 

これは、私が作成したテンプレートなので、
文字の設定は、初期設定(デフォルト)のままです。

 

 

 

例として、ブログタイトル文字を大きくしてみますね。

 

CSSから、【ブログタイトル文字】を探します。

 

上のほうにあるはずです。

見つからない方は、Control + F (検索) で、
検索窓が開きますので、そこへ、ブログタイトル文字と入力してください。

 

 

 

※検索は、こんな感じに表示されます。参考にしてくださいね。

↓ ↓ ↓

検索

 

ブログタイトルの文字の今の設定は、

フォントの色:黒
フォントのサイズ:20px
フォントの装飾:太字

 

 

という設定になっています。

 

 

サイズを大きくしてみましょうか。

2012y06m26d_120355854

 

 

20px(デフォルト)の時の大きさ

 

 

 

 

 

2012y06m26d_120449285

 

 

36pxにしてみました。

 

 

 

どうでしょうか?

印象が違いますね。

 

ついでに、フォント色も変更してみましょう。

 

2012y06m26d_121430558

 

← ヘッダー画像に合わせて、黄色にしてみました。

 

 

どうですか?

 

こんな感じです。

 

 

 

保存する前に、表示を確認するで、いったんブログ表示を確認。

OKならば、保存します。

 

ブログを確認してくださいね。

 

02_pnk_p

 

ブログを見て、変わっていないようであれば、
キャッシュを空にして、更新をかけてあげてください。
そうすると、ちゃんと表示されているか、確認できますよ。

 

 

結構簡単でしょう。

 

 

1か所の変更だったらば、テキストエディタにコピーをしなくとも、大丈夫です。

 

 

ただ、複数個所変更する場合、失敗した時のことを考えると、

こりゃぁ~こまった!!になるので、念のため、コピーをとっておきましょう。
※バックアップの習慣が身に付きますよ♪

 

自分のブログに合わせた、フォントのサイズで、
プチカスタマイズを楽しんで!!

 

 

 

フォントサイズを変更するだけでも、
見え方が違ってきますよ!!

 

ぜひお試しあれ!!

 

 

 

コメントをどうぞ

次のHTMLタグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

   

 

コメントの更新情報

トラックバックURL

アメブロの更新情報

★ランキング ポチッとしてね★

読んでくれて、ありがとう!!
ブログが気に入ったら、クリップしてね♪




あなたのぽちっとで、テンションアップ!!