CSSカスタマイズ機能 †プロフィールページをCSS(カスケーディングスタイルシート)を記述してデザインを自分の好きなようにカスタマイズすることができます。 CSS基礎の基礎 †CSSの基本的な構文 セレクター { プロパティ : 値; プロパティ : 値; } これで1セットとなり、セレクター、プロパティ、値の組み合わせを様々に変化させるものを組み合わせてスタイルを指定していきます。 セレクター †セレクターのうち、よく使う3種類は以下の三つです。 HTMLタグ要素 †HTMLのタグ名です。指定したタグ要素すべてに適用されます。 body{ プロパティ : 値; } クラス・セレクター †タグのうち同じclass属性が設定されているタグに適用されます。 .profile_communication_cell{ float:left; } ID・セレクター †タグのうち同じID属性が設定されているタグに適用されます。 #main_title_body{ color:#7fffd4; background-color:#2e8b57; } 複数のセレクターに一括設定 †複数のセレクターに同じプロパティを設定したい場合、,(カンマ)で区切って複数記述できます。 #profile_mylist_head, #profile_friend_head { color: red } プロパティ・値 †プロパティは数多くあり、設定できる効果も様々です。プロパティとその値の種類は調べてください。 プロパティ名 : 値 ; のように、プロパティ名と値をコロン(:)で区切り、最後にセミコロン(;)で終える組み合わせで記述します。 body{ color : blue; } CSSカスタマイズの方法 †注意点 †ここでカスタマイズできるのはあくまでスタイルシートの部分のみです。 HTML構文、クラス名、ID属性値を調べる †自分が作成したのではないHTMLにスタイルシートを適用するためには、まずどのようなHTMLが出力されているのか、クラス名、IDの設定がどのようになされているのか知る必要があります。 <div id=main_title_body><h2 id=main_title>○○のプロフィール</h2></div> ソースを表示すると<!-- ここからプロフィールページ //-->という文が現れ、そのすぐ下にこのようなタグがあると思います。 プロフィールページのHTMLの特徴 †大まかな枠組として、タイトルが横幅いっぱいにあり、その下が左右に分かれています。 カスタマイズの具体例 †背景画像の表示 †画像のURLと書いてあるところに画像ファイルのURLを記入してください。 body{ background-image:url(画像のURL); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; } 文字色の変更 †背景画像が暗い画像で見にくくなった場合、文字色を明るい色(白など)に変更すると見やすくなります。 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; } 入力欄にフォーカスで変化をつける †擬似クラスというものを利用すると、状態によってスタイルを変化させることができます。 #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用の独自拡張プロパティです。 非表示にする †display:none;を使えば、要素を非表示にできます。 #profile_counter_head{ display:none; } 内容書き換え †CSSライクな独自の構文を使って、指定したID属性を持つタグの中身を指定したテキストで書き換えることができます。 構文 †既存の内容を書き換え †#ID名{ 書き換える内容 } 指定したIDを持つタグの中身を「書き換える内容」で置き換えます。 #profile_comment_head{ プロフィール } 既存の内容の先頭に挿入 †#ID名:before{ 書き換える内容 } ID名の後に「:before」を付けると「書き換える内容」を対象の要素の中身の先頭に挿入します。 #profile_comment_head:before{ ■ } 既存の内容の最後に追加 †#ID名:after{ 書き換える内容 } ID名の後に「:after」を付けると「書き換える内容」を対象の要素の中身の最後に追加します。 #profile_counter_number:after{ 人 } BBCode †書き換える内容にはBBCodeを使用することができます。 BBCodeは、角括弧 [ と ] でタグを囲んで簡単な書式を設定できます。 以下のタグに対応しています。 太字 †太字にしたい部分を[b][/b]で囲みます。 [b]うぐぅ[/b] とかくと、うぐぅとなります。 斜体 †斜体にしたい部分を[i][/i]で囲みます。 [i]うぐぅ[/i] とかくと、うぐぅとなります。 下線 †下線を付けたい部分を[u][/u]で囲みます。 文字色 †色を変えたい部分を[color=色][/color] で囲みます。 文字の大きさ †大きさを変えたい部分を[size=サイズ][/size]で囲みます。 等幅フォント †等幅フォントで表示したい部分[code][/code]で囲みます。 引用(段を下げる) †段を下げて表示したい部分[quote][/quote]で囲みます。 順不同リスト、番号付リスト †順不同(番号なし)リストは全体を[list][/list]で囲みます。 例) [list][*]白[*]黒[*]紫[/list] これで下のようなリストができます。
表 †表全体を[table][/table]で囲みます。枠泉を付けたい場合は[table=枠泉の太さ][/table]とします。 定義リスト †定義リスト全体を[dl][/dl]で囲みます。 組み合わせ †それぞれのタグを組み合わせることも可能です。その場合はしっかり入れ子にしてください。 リンクの作成 †
画像の表示 †画像URLを [img][/img] で囲むと画像が表示されます。[url][/url]の内側に置くことで画像リンクを作成できます。 YouTubeの表示 †[video]YouTubeのURL[/video]で、YouTubeの動画を張り付けられます。 DIVブロックの作成 †[div=ID名][/div] で、ID名をIDに持つDIVタグを作成できます。 |