cssとは、HTMLの構造を変更しやすく、かつ細かく設定出来るモノと言えよう。このcssを使えば、ホームページのデザインや、見える要素に様々な変更、統一感を与えることが出来るので、かなり重宝する。でも、結構面倒くさかったりするので、アメブロのデフォルトデザインでヨシとしている人も多かろう。でも、アメブロのデザインはイマイチだと思っている方…とりあえず、アメブロの「デザインと機能」に「CSS編集」があると思う。今日は、そのカスタマイズについて、フォントの変更についてとりあげちゃうぜ (･_･)
まず、文字をどうしたいのかっていうところに、お話を絞ろうじゃないか。文字の要素としては「大きさ」「色」「装飾」ぐらいは、何となく想像つくだろうけど、もっといじれるんだよね。それが「フォント（書体）」「文字の位置」「文字の間隔」などなど、いじろうと思えば結構ある。
アメブロのCSSを眺めて下の方へ行くと
/* ----------------------- header ----------------------- */
と書かれた以下の部分、これがタイトル周りの設定なので、ココをまずいじって見よう。
#header h1 {…
がタイトルのこと。例えば、
padding-top: 15px;
margin-left: 10px;
なんて書いてあれば、上のすき間が15ピクセル、左のすき間が10ピクセルのところから、文字を書き始めるということであーる。ここに、
text-shadow: 3px 3px 3px #aaaaaa;
を追加してみるとどうなるかって言うと、MacのブラウザーのSafariでは、文字に影がつくのさ。Windowsとか他のブラウザーではまだ再現出来ないけれど、一応標準規格でアル (･_･)。ちなみにこの書き方だと、右に3ピクセル、下に3ピクセル、ぼかし3ピクセルで、色はグレー。って言う意味である。
同様に、
#header h2{…
は、ブログの説明文。この文章、結構長くなると画面の右端までだらだらと続くので
margin-right: ***px;
を一行付け加えると、右から***ピクセルすき間を空けて行を折り返すようになる。さて、今度はフォントの情報の、
/* ----------------------- font-information ----------------------- */
に注目しよう。ココでいじってもとりあえず害がなく、見た目に変化が表われるのは、
body{…全体の文章の基本フォント
#header h1 a{…ブログタイトルのフォント
#header h2{…ブログ説明のフォント
h3.title {…記事のtitle
の4ケ所としておく。
まず、bodyの部分。
例えばこの部分に、
font-family: "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro";
をくっつけると、全体が丸文字になるよん♪でも、この指定だとMacで見た時に、Macのフォントを使う時に丸文字になるだけで、Windowsで丸文字出したい時とかは、そのフォント名を指定するッきゃないね。文字の色と大きさも、書き換えればヨシとして・・。
同様に、header h1とheader h2、
font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "ＭＳ 明朝", "ＭＳ Ｐ明朝", serif;
こんな一文をそれぞれ加えるなら、この部分は明朝体になるので、シャープな感じになるね。それで、アメブロのデフォルトの設定で、行の間がくっつき過ぎて見えるので、
line-height: **;
をいじって、調整しちまおうぜ。ココの数字は、文字の大きさの何倍かってことになり、「1.5」とかいれると、ダイブ読みやすくなる。
さぁ、れっつとらい (･_･)
まず、文字をどうしたいのかっていうところに、お話を絞ろうじゃないか。文字の要素としては「大きさ」「色」「装飾」ぐらいは、何となく想像つくだろうけど、もっといじれるんだよね。それが「フォント（書体）」「文字の位置」「文字の間隔」などなど、いじろうと思えば結構ある。
アメブロのCSSを眺めて下の方へ行くと
/* ----------------------- header ----------------------- */
と書かれた以下の部分、これがタイトル周りの設定なので、ココをまずいじって見よう。
#header h1 {…
がタイトルのこと。例えば、
padding-top: 15px;
margin-left: 10px;
なんて書いてあれば、上のすき間が15ピクセル、左のすき間が10ピクセルのところから、文字を書き始めるということであーる。ここに、
text-shadow: 3px 3px 3px #aaaaaa;
を追加してみるとどうなるかって言うと、MacのブラウザーのSafariでは、文字に影がつくのさ。Windowsとか他のブラウザーではまだ再現出来ないけれど、一応標準規格でアル (･_･)。ちなみにこの書き方だと、右に3ピクセル、下に3ピクセル、ぼかし3ピクセルで、色はグレー。って言う意味である。
同様に、
#header h2{…
は、ブログの説明文。この文章、結構長くなると画面の右端までだらだらと続くので
margin-right: ***px;
を一行付け加えると、右から***ピクセルすき間を空けて行を折り返すようになる。さて、今度はフォントの情報の、
/* ----------------------- font-information ----------------------- */
に注目しよう。ココでいじってもとりあえず害がなく、見た目に変化が表われるのは、
body{…全体の文章の基本フォント
#header h1 a{…ブログタイトルのフォント
#header h2{…ブログ説明のフォント
h3.title {…記事のtitle
の4ケ所としておく。
まず、bodyの部分。
例えばこの部分に、
font-family: "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro";
をくっつけると、全体が丸文字になるよん♪でも、この指定だとMacで見た時に、Macのフォントを使う時に丸文字になるだけで、Windowsで丸文字出したい時とかは、そのフォント名を指定するッきゃないね。文字の色と大きさも、書き換えればヨシとして・・。
同様に、header h1とheader h2、
font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "ＭＳ 明朝", "ＭＳ Ｐ明朝", serif;
こんな一文をそれぞれ加えるなら、この部分は明朝体になるので、シャープな感じになるね。それで、アメブロのデフォルトの設定で、行の間がくっつき過ぎて見えるので、
line-height: **;
をいじって、調整しちまおうぜ。ココの数字は、文字の大きさの何倍かってことになり、「1.5」とかいれると、ダイブ読みやすくなる。
さぁ、れっつとらい (･_･)