CSSカスタマイズ のバックアップ(No.7)

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• CSSカスタマイズ へ行く。
  • 1 (2009-11-24 (火) 02:25:31)
  • 2 (2009-11-24 (火) 12:06:25)
  • 3 (2010-01-02 (土) 17:29:09)
  • 4 (2010-01-03 (日) 00:48:09)
  • 5 (2010-01-03 (日) 18:02:48)
  • 6 (2010-01-04 (月) 12:31:07)
  • 7 (2011-06-07 (火) 16:10:22)
  • 8 (2011-11-08 (火) 21:48:19)

---

CSSカスタマイズ機能 †

プロフィールページをCSS（カスケーディングスタイルシート）を記述してデザインを自分の好きなようにカスタマイズすることができます。
また、独自拡張で指定したID属性を持つタグの内容を指定したテキスト（BBCode使用可）で置き換えることができるので独自の要素を追加したり、既存の要素を書き換えたりもできます。
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;
}

内容書き換え †

CSSライクな独自の構文を使って、指定したID属性を持つタグの中身を指定したテキストで書き換えることができます。
指定したテキストは通常のテキストはもちろん、BBCodeが使えます。
CSS用のテキストボックスの下にある内容書き換えテキストボックスに記入してください。

構文 †

既存の内容を書き換え †

#ID名{
	書き換える内容
}

指定したIDを持つタグの中身を「書き換える内容」で置き換えます。
実現方法は内部的にエレメントのinnerHTMLにJavaScriptでセットして書き換えを行っています。
例）「自己紹介」を「プロフィール」に書き換えます。

#profile_comment_head{
プロフィール
}

既存の内容の先頭に挿入 †

#ID名:before{
	書き換える内容
}

ID名の後に「:before」を付けると「書き換える内容」を対象の要素の中身の先頭に挿入します。
全体は「書き換える内容」＋「既存の内容」になります。
例）「自己紹介」の前に「■」を挿入します。「■ 自己紹介」と表示されるようになります。

#profile_comment_head:before{
■
}

既存の内容の最後に追加 †

#ID名:after{
	書き換える内容
}

ID名の後に「:after」を付けると「書き換える内容」を対象の要素の中身の最後に追加します。
例）アクセス数の数字の後に「人」を追加します。「100人」のように表示されるようになります。

#profile_counter_number:after{
人
}

BBCode †

書き換える内容にはBBCodeを使用することができます。 BBCodeは、角括弧 [ と ] でタグを囲んで簡単な書式を設定できます。 以下のタグに対応しています。

太字 †

太字にしたい部分を[b][/b]で囲みます。

[b]うぐぅ[/b]

とかくと、うぐぅとなります。

斜体 †

斜体にしたい部分を[i][/i]で囲みます。

[i]うぐぅ[/i]

とかくと、うぐぅとなります。

下線 †

下線を付けたい部分を[u][/u]で囲みます。

文字色 †

色を変えたい部分を[color=色][/color] で囲みます。

文字の大きさ †

大きさを変えたい部分を[size=サイズ][/size]で囲みます。

組み合わせ †

それぞれのタグを組み合わせることも可能です。その場合はしっかり入れ子にしてください。

リンクの作成 †

• [url=httpo://www.hoge.com]ここにアクセス！[/url] のように=の後にURLを書けばタグで囲った部分がリンクになります。
  
• [url]httpo://www.hoge.com[/url] この場合URLにリンクされます。

画像の表示 †

画像URLを [img][/img] で囲むと画像が表示されます。[url][/url]の内側に置くことで画像リンクを作成できます。
[img=幅x高さ][/img]とすると画像の表示サイズを指定できます。

YouTubeの表示 †

[video]YouTubeのURL[/video]で、YouTubeの動画を張り付けられます。

DIVブロックの作成 †

[div=ID名][/div]　で、ID名をIDに持つDIVタグを作成できます。

     

Site admin: シップ

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.025 sec.