アメブロ 小技とは？

アメーバブログのデザインに関するページです。





『CSSとは( Cascading Style Sheet ) の略で、HTMLでは表現しきれない Webページの” デザイン”面を担当する言語です。』



・・・なんて、小難しい話はありません。何より、私自身が良く分かっていませんから（笑
だけど「体験」だけは積んだので、多少のなりとも自分好みに作り変えることは出来ます。

「文字の色を変える」「大きさを変える」など、「実際にやってみたこと」をココで紹介していこうと思います。

どれか一つでも、皆さんのお役に立てればいいなぁ、と思ってます。

決まりごと

デザインを扱うには、HTML(ウェブ上の文章を記述するためのマークアップ言語→HyperText Markup Languageの略)やCSS(ウェブ上のレイアウトを定義する規格→Cascading Style Sheetsの略）をいじらなければなりません。


始めるにあたって、いくつかの約束事を覚えておくといいですよ。

HTMLやCSSの表記は英語でしてあります。人によっては、半角の大文字を使うときもあるようですが、基本は半角文字です。

表示は

　・全体に対する表示（実際に見えるブログの大きさ、こういった項目がはいっています）

次に、グループ分け

　・文字サイズや装飾
　・背景の色
　・サイドバーなどの各部分

その中に

　・どこの部分（タイトルや、記事、カレンダーなど）
　・どのように見せます（タイトル文字は大きな白文字、記事は中くらいの黒文字など）

の順番になっています。
此処までは「ふーん、そうなんだ」ぐらいに読んでいただければ結構です。


ちなみに私が変えたのは、色や余白です。この表示は

　（色）　　#○○○○○○　←＃と６桁の数字
　（余白）　○○px ←数字と単位

で表示されます。これはしっかり覚えておいて下さい！



　『英語は苦手だから・・・』

なんてしり込みしないで、がんばってみましょう。いくつかの決まりごとを覚えて、数箇所を変えればオリジナルが必ず出来上がりますよ。

タイトル文字を変えてみよう（１）

スキン（他のブログではテンプレートとも呼ばれますね）は
基本のBlueを使っています。

手順は

　アメーバTop⇒デザインの変更⇒スキンCSSの編集
　⇒開いたCSSをチョコっといじる

といった感じです。



まずは、スキンの場所説明です。
最初に書いてある

　ameblo CSS Skin Settings
　FileName: common.css
　Version: 2006.06/23
　Skin for: all_skin

から次に書いてある

　ameblo CSS Skin Settings
　Skin for: blue
　FileName: /p_skin/blue/css/common.css
　Version: $Revision: 1.2 $

までの間は、すっ飛ばして下さい。
変える場所はありませんから（笑


二つ目の部分が重要です。　
ちゃんと見つけられましたか？

その下に　
　
　common : 全体に対するスタイル
　header : ブログタイトル部分
　　　　　　・
　　　　　　・
　　　　　　・

と続いているからすぐに分かると思いますよ。

目的地はここ↓

　font :文字サイズ・装飾

body{ 　　　　　　←ココは本文
color:#000000;
font-size:12px;
}
#ameblo,
#comment_module p.list,
.entry .theme,
.entry .foot,
.list{
font-size:10px;
}
#header h1 a{　　←タイトル部分
color:#FFFFFF;
font-size:25px;
font-weight:bold;
line-height:1.15;
}
#header h2{　　　←説明文
color:#FFFFFF;
font-size:11px;
font-weight:normal;
line-height:1.15;
}

　　　・
　　　・
　　　・

今回のテーマ部分、見つかりましたか？
この中の＜#heade h1＞と＜h2＞の一部を変えます。

では、実際にタイトル文字の色やサイズを変える方法を（２）で説明しますね。