CSSカスタマイズ機能 †

プロフィールページをCSS（カスケーディングスタイルシート）を記述してデザインを自分の好きなようにカスタマイズすることができます。
ごく簡単に説明しますが、CSSの詳細な文法はとてもここで解説できる量ではないため、各自で調べてください。

↑

CSS基礎の基礎 †

CSSの基本的な構文

セレクター {
	プロパティ : 値;
	プロパティ : 値;
}

これで1セットとなり、セレクター、プロパティ、値の組み合わせを様々に変化させるものを組み合わせてスタイルを指定していきます。

↑

セレクター †

セレクターのうち、よく使う3種類は以下の三つです。
このCSSカスタマイズでは、主にHTMLタグ要素と、IDセレクターを使用します。

↑

HTMLタグ要素 †

HTMLのタグ名です。指定したタグ要素すべてに適用されます。
例）bodyタグを指定する場合

body{
	プロパティ : 値;
}
↑

クラス・セレクター †

タグのうち同じclass属性が設定されているタグに適用されます。
.クラス名というように、先頭にドットを付けその後クラス名が続きます。
例）profile_communication_cellというクラスに適用させるには次のように記述します。

.profile_communication_cell{
	float:left;
}
↑

ID・セレクター †

タグのうち同じID属性が設定されているタグに適用されます。
#ID属性値というように、先頭にシャープを付けてその後にID値を付けます。
例）main_title_bodyというID属性に適用させるには次のように記述します。

#main_title_body{
	color:#7fffd4;
	background-color:#2e8b57;
}
↑

複数のセレクターに一括設定 †

複数のセレクターに同じプロパティを設定したい場合、,(カンマ)で区切って複数記述できます。

#profile_mylist_head, #profile_friend_head {
	color: red
}
↑

プロパティ・値 †

プロパティは数多くあり、設定できる効果も様々です。プロパティとその値の種類は調べてください。
セレクターで指定した｛　｝の中に

プロパティ名 : 値 ;

のように、プロパティ名と値をコロン（:）で区切り、最後にセミコロン（;）で終える組み合わせで記述します。
この組み合わせを筆のセレクタ内に複数記述することが可能です。
例）body要素の文字色を青に設定します。

body{
	color : blue;
}
↑

CSSカスタマイズの方法 †

↑

注意点 †

ここでカスタマイズできるのはあくまでスタイルシートの部分のみです。
HTMLの構文はすでに決められてしまっているのでHTML要素を変更することはできません。
そのため、出力されるHTMLを調べて、タグの構造、付与されているクラスやIDを使ってスタイルシートを記述していくことになります。

↑

HTML構文、クラス名、ID属性値を調べる †

自分が作成したのではないHTMLにスタイルシートを適用するためには、まずどのようなHTMLが出力されているのか、クラス名、IDの設定がどのようになされているのか知る必要があります。
ソースの情報は公開されていないので、実際のソースを表示して確認するのが一番です。
また、FirefoxのFirebugなどのWeb開発支援アドオンを入れておくとID、クラス名が分かるだけでなく、ブロックが視覚化されたり、リアルタイムに書き換えが反映されたりするので便利です。
例）タイトル部分のHTML

<div id=main_title_body><h2 id=main_title>○○のプロフィール</h2></div>

ソースを表示すると<!-- ここからプロフィールページ //-->という文が現れ、そのすぐ下にこのようなタグがあると思います。
これは、タイトルが「main_title_body」というID属性がついたdivタグに囲まれ、さらに「main_title」というID属性値がついたH2タグに囲まれていることになります。

↑

プロフィールページのHTMLの特徴 †

大まかな枠組として、タイトルが横幅いっぱいにあり、その下が左右に分かれています。
そして左右それぞれにこまかなブロックが存在します。画面表示されていないフリーのボックスも用意されているので画像の追加等に使えそうです。
そしてフッターとして横幅すべてを使ったブロックが存在します。

↑

カスタマイズの具体例 †

↑

背景画像の表示 †

画像のURLと書いてあるところに画像ファイルのURLを記入してください。
かっこの中に余分なスペースとか入れるとはじかれるとおもうのでURLの前後には空白、ダブルコーテーション等いれないでください。
当然bodyだけでなく他の要素に変えればその要素の背景に画像を表示できます。

body{
	background-image:url(画像のURL);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
}
↑

文字色の変更 †

背景画像が暗い画像で見にくくなった場合、文字色を明るい色（白など）に変更すると見やすくなります。
また、あわせてリンクの文字色も変更します。
色の指定はカラー名や16進でのカラーコード(#RRGGBB)、RGB10進表記 rgb(R,G,B)なども使えます。

body{
	background-image:url(画像のURL);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	color : white;
}
a{text-decoration:none;}
a:link {color:#c0a2c7;text-decoration:none;}
a:visited {color:#d3cbc6;text-decoration:none;}
a:hover {color:#f5b1aa;text-decoration:none;}
↑

背景色の変更 †

タイトルの背景色を変えてみます。

#main_title_body{
	background-color:#ffdb4f;
}
↑

枠線（ボーダー）の変更 †

枠線は上下左右をそれぞれ別の設定にすることや線の種類など様々な指定方法がありますが、ここでは一括指定をしています。

#main_title_body{
	background-color:#ffdb4f;
	border: 2px solid #3eb370;
}
↑

中央揃え †

タイトルを中央揃えにしてみます。left:左、center:中央,right:右揃えになります。

#main_title_body{
	background-color:#ffdb4f;
	border: 2px solid #3eb370;
	text-align:center;
}
↑

入力欄にフォーカスで変化をつける †

擬似クラスというものを利用すると、状態によってスタイルを変化させることができます。
よく使われるのがリンクのマウスオーバーでの色替え等ですが、ここでは「:focus」を利用してテキストボックスにフォーカスが当たったときにスタイルを設定します。

#profile_footprintcomment_form_textarea:focus {
	background-color: #93ca76;
}
↑

透過させる †

背景（文字色も一緒に透過されます）を透過させて後ろにある要素を透けて見せるには次のようにします。

#main_title_body{
	background-color:#ffdb4f;
	border: 2px solid #3eb370;
	text-align:center;
	opacity: 0.5;
	filter: alpha(style=0, opacity=50);
	width:100%;
}

opacityプロパティはMozilla系、Opera9.0以降、Safari用、alphaはIE用の独自拡張プロパティです。
opacityは値が0～1の間の小数で、filterのalphaはopacity=のあとに0～100までの不透明度を入力します。
filterの場合、width属性をつけないと動作しない場合があります。

↑

非表示にする †

display:none;を使えば、要素を非表示にできます。
例）カウンターを非表示に

#profile_counter_head{
	display:none;
}
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS