![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
プロフィールページをCSS（カスケーディングスタイルシート）を記述してデザインを自分の好きなようにカスタマイズすることができます。
また、独自拡張で指定したID属性を持つタグの内容を指定したテキスト（BBCode使用可）で置き換えることができるので独自の要素を追加したり、既存の要素を書き換えたりもできます。
CSSについてはごく簡単に説明しますが、CSSの詳細な文法はとてもここで解説できる量ではないため、各自で調べてください。
CSSの基本的な構文
セレクター {
プロパティ : 値;
プロパティ : 値;
}
これで1セットとなり、セレクター、プロパティ、値の組み合わせを様々に変化させるものを組み合わせてスタイルを指定していきます。
セレクターのうち、よく使う3種類は以下の三つです。
このCSSカスタマイズでは、主にHTMLタグ要素と、IDセレクターを使用します。
HTMLのタグ名です。指定したタグ要素すべてに適用されます。
例）bodyタグを指定する場合
body{
プロパティ : 値;
}
タグのうち同じclass属性が設定されているタグに適用されます。
.クラス名というように、先頭にドットを付けその後クラス名が続きます。
例）profile_communication_cellというクラスに適用させるには次のように記述します。
.profile_communication_cell{
float:left;
}
タグのうち同じ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;
}
ここでカスタマイズできるのはあくまでスタイルシートの部分のみです。
HTMLの構文はすでに決められてしまっているのでHTML要素を変更することはできません。
そのため、出力される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タグに囲まれていることになります。
大まかな枠組として、タイトルが横幅いっぱいにあり、その下が左右に分かれています。
そして左右それぞれにこまかなブロックが存在します。画面表示されていないフリーのボックスも用意されているので画像の追加等に使えそうです。
そしてフッターとして横幅すべてを使ったブロックが存在します。
画像の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は、角括弧 [ と ] でタグを囲んで簡単な書式を設定できます。 以下のタグに対応しています。
太字にしたい部分を[b][/b]で囲みます。
[b]うぐぅ[/b]
とかくと、うぐぅとなります。
斜体にしたい部分を[i][/i]で囲みます。
[i]うぐぅ[/i]
とかくと、うぐぅとなります。
下線を付けたい部分を[u][/u]で囲みます。
色を変えたい部分を[color=色][/color] で囲みます。
大きさを変えたい部分を[size=サイズ][/size]で囲みます。
等幅フォントで表示したい部分[code][/code]で囲みます。
段を下げて表示したい部分[quote][/quote]で囲みます。
順不同（番号なし）リストは全体を[list][/list]で囲みます。
番号付リストの場合は[list=タイプ][/list]で囲みます。
タイプは「1」で数字リスト、「a」でアルファベット、「i」でローマ数字になります。
そのリスト内に「[*]項目」を記入します。
例）
[list] [*]白 [*]黒 [*]紫 [/list]
これで下のようなリストができます。
表全体を[table][/table]で囲みます。枠泉を付けたい場合は[table=枠泉の太さ][/table]とします。
その中で行を[tr][/tr]で囲みます。[tr=背景色][/tr]とすると背景色がつきます。
各セルの内容を[td][/td]で囲みます。[td=背景色][/td]とすると背景色がつきます。ヘッダ用に[th][/th]も使えます。
[table]～[/table]の間で改行してしまうとその改行が<br>に変換されてしまい、表の上に空行が出来てしまいますので一行で記述して下さい。
定義リスト全体を[dl][/dl]で囲みます。
そのリスト内に定義する用語を[dt][/dt]で囲み、用語の説明をその次に[dd][/dd]で囲みます。
それぞれのタグを組み合わせることも可能です。その場合はしっかり入れ子にしてください。
画像URLを [img][/img] で囲むと画像が表示されます。[url][/url]の内側に置くことで画像リンクを作成できます。
[img=幅x高さ][/img]とすると画像の表示サイズを指定できます。
[video]YouTubeのURL[/video]で、YouTubeの動画を張り付けられます。
[div=ID名][/div] で、ID名をIDに持つDIVタグを作成できます。
