ライフオーガナイザー高原真由美です。
ブログカスタマイズの続きです
先日のブログでヘッダ画像の設定までは、ご紹介しましたよね。
今日は、
本文等の文字の大きさのことについて。
具体的にはヘッダ画像の文字のことと、ブログの文字の大きさのカスタマイズのお話です。
まずはヘッダのほうから。
ヘッダ画像のところの、タイトルとブログの説明の文章、うまくオリジナルの画像とマッチする場合と、写真とかぶってよくわからなくなる場合があるんですよね。
私の場合も用意した画像と文字がうまく合わなかったので、ここで調整しました。
でもこれ、私はちょっとめんどうでした
なぜならCSSをいじらないといけなかったからです
CSSとは、Cascading Style Sheets（カスケーディング・スタイルシート）の略で、HTML文書の装飾部分を一括管理できる機能です。……よくわかってませんけど
まぁブログをつくっているプログラム、みたいな。
…かなりいい加減に表現しています
とりあえず私の場合は、わけもわからず機械的にすすめていきました。
マイページ→ブログを書く→デザインの変更
のところで、
CSSの編集
を選択。
すると
「現在使用中のブログデザインCSS」として何やらわけのわからないアルファベットの羅列が…。
ここの数字をいじるわけですが、くわしくはこちらをご覧ください。
→アメブロ向上企画書ノート ヘッダ・タイトル・概要編
→Amebaヘルプ ブログデザインをカスタマイズしよう
私の場合は、
#header h1{
padding-top:8px;
margin-left:5px;
text-decoration:none;
}
#header h2{
padding-top:5px;
margin-left:5px;
}
↑これがレイアウト（画像の上からどのくらいの位置、とか左からどのくらいの位置とか）を調整しているタグで、↓これが文字の大きさを変えているタグです。
#header h1,
#header h1 a{
color:#FFFFFF;
font-size:20px;
font-weight:normal;
line-height:1.15;
}
#header h2{
color:#FFFFFF;
font-size:11px;
font-weight:normal;
line-height:1.15;
}
青字の数値で調整します。
h1がブログタイトルで、h2が説明文のこと、だと思います。（笑）
あとcolorのところで色、font-weightのところで文字の太さを変えられるようです。
またこのブログの本文は、アメブロの標準の文字の大きさより、少し大きくしています。
文字が小さいほうがデザイン的にはスタイリッシュだと思いますが、このブログでは読みやすさのほうを優先しました
→方法はこちらをご覧ください。
ちなみに仕事でアメブロを使っている場合は、この方のブログは定期的にチェックされたほうがいいと思いますよ。ブログで集客する方法を、書きまくっておられますので個人的に存じているわけでもなく、単なる一読者なんですがすごく参考になるのでご紹介です。
ブログカスタマイズの続きです
先日のブログでヘッダ画像の設定までは、ご紹介しましたよね。
今日は、
本文等の文字の大きさのことについて。具体的にはヘッダ画像の文字のことと、ブログの文字の大きさのカスタマイズのお話です。
まずはヘッダのほうから。
ヘッダ画像のところの、タイトルとブログの説明の文章、うまくオリジナルの画像とマッチする場合と、写真とかぶってよくわからなくなる場合があるんですよね。
私の場合も用意した画像と文字がうまく合わなかったので、ここで調整しました。
でもこれ、私はちょっとめんどうでした
なぜならCSSをいじらないといけなかったからです
CSSとは、Cascading Style Sheets（カスケーディング・スタイルシート）の略で、HTML文書の装飾部分を一括管理できる機能です。……よくわかってませんけど
まぁブログをつくっているプログラム、みたいな。
…かなりいい加減に表現しています
とりあえず私の場合は、わけもわからず機械的にすすめていきました。
マイページ→ブログを書く→デザインの変更
のところで、
CSSの編集
を選択。
すると
「現在使用中のブログデザインCSS」として何やらわけのわからないアルファベットの羅列が…。
ここの数字をいじるわけですが、くわしくはこちらをご覧ください。
→アメブロ向上企画書ノート ヘッダ・タイトル・概要編
→Amebaヘルプ ブログデザインをカスタマイズしよう
私の場合は、
#header h1{
padding-top:8px;
margin-left:5px;
text-decoration:none;
}
#header h2{
padding-top:5px;
margin-left:5px;
}
↑これがレイアウト（画像の上からどのくらいの位置、とか左からどのくらいの位置とか）を調整しているタグで、↓これが文字の大きさを変えているタグです。
#header h1,
#header h1 a{
color:#FFFFFF;
font-size:20px;
font-weight:normal;
line-height:1.15;
}
#header h2{
color:#FFFFFF;
font-size:11px;
font-weight:normal;
line-height:1.15;
}
青字の数値で調整します。
h1がブログタイトルで、h2が説明文のこと、だと思います。（笑）
あとcolorのところで色、font-weightのところで文字の太さを変えられるようです。
またこのブログの本文は、アメブロの標準の文字の大きさより、少し大きくしています。
文字が小さいほうがデザイン的にはスタイリッシュだと思いますが、このブログでは読みやすさのほうを優先しました
→方法はこちらをご覧ください。
ちなみに仕事でアメブロを使っている場合は、この方のブログは定期的にチェックされたほうがいいと思いますよ。ブログで集客する方法を、書きまくっておられますので
個人的に存じているわけでもなく、単なる一読者なんですがすごく参考になるのでご紹介です。