PCインストラクターの川上です。
今日は、アメブロガーの中で、アメブロカスタマイズにCSS（シー・エス・エス）を使っている方のための内容になります。
そもそもCSSってなんですか？CSSの略はなんですか？といった方は、こちらの過去記事『ところでCSSってなんですか～』をご覧くださいませ^^
そして、どうやってCSSの編集をすることができるようになるのですか？
といった方はこちらの過去記事『「CSSの編集」をクリックするとは』をご覧くださいませ^^
さて、CSSが何で、CSSの編集をするにはどうしたらいいのかが、わかったところで、次に進みます！
まず、CSSのルールにいきますね。
（けっこう単純です^^;）
CSSの基本書式は次のとおりです。
セレクタ ｛ プロパティ ： 値 ；｝
（CSSは半角英数（スペースも半角）で書きます。）
（CSSは半角英数（スペースも半角）で書きます。）
また、この専門用語が厄介ですよね（笑）
訳しますと･･･
セレクタ → どこの
プロパティ → なにを
値 → どうする
になりますので、CSSの基本書式は
どこの｛ なにを ： どうする ；｝
といった構成になっていますね。
（しつこいですが、全部半角英数でないとダメです。よく最後の「｝」が全角だったために、うまくCSS設定がされていない、というトラブルもありますので^^;）
これは見やすくするのに、
どこの｛
なにを ： どうする ；
｝
なにを ： どうする ；
｝
のように、改行やインデントを入れて記述することができます。
「どこの」はアメブロの中のHTMLを指します。
そして、「なにを」「どうする」を増やすこともできます。
どこの｛
なにを ： どうする ；
なにを ： どうする ；
なにを ： どうする ；
なにを ： どうする ；
｝
なにを ： どうする ；
なにを ： どうする ；
なにを ： どうする ；
なにを ： どうする ；
｝
それともう一つ大事なルールがあります！
それは･･･
/* と */ で囲んだ部分はコメントとなります。
（コメントは入れ子にすることはできません。）
･･･で、この /* と */ で囲った範囲だけは、全角や日本語で書かれていてもOKです。
ですから、例えばこのようなCSSソースを見てみると↓
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
(1) 文字のスタイル
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
/* (1-1) 全体の文字
--------------------------------------------*/
/* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#333333;
}/* と*/ で囲まれた部分が3か所（赤字部分）あるのがわかります。
そして、CSSの構文とでできています。
ですから、ご自分のCSSソースをチェックなさる際、
■CSSの基本チェック■
１． /* と*/ で囲まれたコメントになっているか
２． CSSの基本書式になっているか
２． CSSの基本書式になっているか
この2つをまずチェックされるとよいですね。
（他にもルールがありますが）
そして、この2つ以外の文字列が入っている場合は、さっくり削除されるとよいと思います。
（または、前後に/* と*/をつけてコメントにしてしまうか）
たとえば･･･
ある方のCSSを見てみたら、必要のない赤枠の部分が入ってましたね～
これは、さっくり削除されるとよいですね^^!
さぁ、誰のCSSでしょうか～（笑）
ご本人に通じるといいのですが^^;
＜補足＞
赤枠の最後の
#frame { background-color: transparent; }
#main { background-color: transparent}
#header { background-color: transparent; }
この3行は、CSSの基本構成なのですが、アメブロの旧デザイン用のCSSコードなので、今回の新デザインでは関係ないので削除の対象にしました。
＜CSSの他の記事＞
◆CSS（シーエスエス）
・CSSって何？・「CSSの編集」って？
・CSSの基本書式
・CSSの記述場所
・CSSでのヘッダー画像の挿入方法
◆ヘッダー下のメニューバー
・メニューバーの設置方法・メニューバーのボタンを画像にする方法
・メニューバーのグラデーション
以上、パソコンワンポイントレッスンでした。
LIDS札幌・ライフデザインスクール
川上 雄大