CSSカスタマイズ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
//edit user : No.2
*CSSカスタマイズ機能 [#rbb0c4cc]
プロフィールページをCSS（カスケーディングスタイルシート）...
また、独自拡張で指定したID属性を持つタグの内容を指定した...
CSSについてはごく簡単に説明しますが、CSSの詳細な文法はと...
*CSS基礎の基礎 [#v4f50d94]
CSSの基本的な構文
セレクター {
プロパティ : 値;
プロパティ : 値;
}
これで1セットとなり、セレクター、プロパティ、値の組み合わ...
**セレクター [#meed2451]
セレクターのうち、よく使う3種類は以下の三つです。~
このCSSカスタマイズでは、主にHTMLタグ要素と、IDセレクター...
***HTMLタグ要素 [#v6a9beef]
HTMLのタグ名です。指定したタグ要素すべてに適用されます。~
例）bodyタグを指定する場合~
body{
プロパティ : 値;
}
***クラス・セレクター [#p4223c5f]
タグのうち同じclass属性が設定されているタグに適用されます...
''.クラス名''というように、先頭にドットを付けその後クラス...
例）''profile_communication_cell''というクラスに適用させ...
.profile_communication_cell{
float:left;
}
***ID・セレクター [#pb703b9d]
タグのうち同じID属性が設定されているタグに適用されます。~
''#ID属性値''というように、先頭にシャープを付けてその後に...
例）''main_title_body''というID属性に適用させるには次のよ...
#main_title_body{
color:#7fffd4;
background-color:#2e8b57;
}
***複数のセレクターに一括設定 [#nb8b5216]
複数のセレクターに同じプロパティを設定したい場合、,(カン...
#profile_mylist_head, #profile_friend_head {
color: red
}
**プロパティ・値 [#i836cbee]
プロパティは数多くあり、設定できる効果も様々です。プロパ...
セレクターで指定した｛ ｝の中に~
プロパティ名 : 値 ;
のように、プロパティ名と値をコロン（:）で区切り、最後にセ...
この組み合わせを筆のセレクタ内に複数記述することが可能で...
例）body要素の文字色を青に設定します。~
body{
color : blue;
}
*CSSカスタマイズの方法 [#j7607ff3]
**注意点 [#bb4fde1c]
ここでカスタマイズできるのはあくまでスタイルシートの部分...
HTMLの構文はすでに決められてしまっているのでHTML要素を変...
そのため、出力されるHTMLを調べて、タグの構造、付与されて...
**HTML構文、クラス名、ID属性値を調べる [#g4d77a11]
自分が作成したのではないHTMLにスタイルシートを適用するた...
ソースの情報は公開されていないので、実際のソースを表示し...
また、FirefoxのFirebugなどのWeb開発支援アドオンを入れてお...
例）タイトル部分のHTML~
<div id=main_title_body><h2 id=main_title>○○のプロフィー...
ソースを表示すると<!-- ここからプロフィールページ //-->と...
これは、タイトルが「main_title_body」というID属性がついた...
**プロフィールページのHTMLの特徴 [#n9c8ac51]
大まかな枠組として、タイトルが横幅いっぱいにあり、その下...
そして左右それぞれにこまかなブロックが存在します。画面表...
そしてフッターとして横幅すべてを使ったブロックが存在しま...
*カスタマイズの具体例 [#mf3d08a1]
**背景画像の表示 [#qe1396f3]
画像のURLと書いてあるところに画像ファイルのURLを記入して...
かっこの中に余分なスペースとか入れるとはじかれるとおもう...
当然bodyだけでなく他の要素に変えればその要素の背景に画像...
body{
background-image:url(画像のURL);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
**文字色の変更 [#o7a1de5f]
背景画像が暗い画像で見にくくなった場合、文字色を明るい色...
また、あわせてリンクの文字色も変更します。~
色の指定はカラー名や16進でのカラーコード(#RRGGBB)、RGB10...
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;}
**背景色の変更 [#ac9406f4]
タイトルの背景色を変えてみます。~
#main_title_body{
background-color:#ffdb4f;
}
**枠線（ボーダー）の変更 [#f44bd4dd]
枠線は上下左右をそれぞれ別の設定にすることや線の種類など...
#main_title_body{
background-color:#ffdb4f;
border: 2px solid #3eb370;
}
**中央揃え [#ca7c38e6]
タイトルを中央揃えにしてみます。left:左、center:中央,righ...
#main_title_body{
background-color:#ffdb4f;
border: 2px solid #3eb370;
text-align:center;
}
**入力欄にフォーカスで変化をつける [#e95aba39]
擬似クラスというものを利用すると、状態によってスタイルを...
よく使われるのがリンクのマウスオーバーでの色替え等ですが...
#profile_footprintcomment_form_textarea:focus {
background-color: #93ca76;
}
**透過させる [#h3aa7107]
背景（文字色も一緒に透過されます）を透過させて後ろにある...
#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用、alp...
opacityは値が0～1の間の小数で、filterのalphaはopacity=の...
filterの場合、width属性をつけないと動作しない場合がありま...
**非表示にする [#i3b08622]
display:none;を使えば、要素を非表示にできます。~
例）カウンターを非表示に
#profile_counter_head{
display:none;
}
*内容書き換え [#icfc6637]
CSSライクな独自の構文を使って、指定したID属性を持つタグの...
指定したテキストは通常のテキストはもちろん、BBCodeが使え...
CSS用のテキストボックスの下にある内容書き換えテキストボッ...
**構文 [#b1bc2990]
***既存の内容を書き換え [#qecac291]
#ID名{
書き換える内容
}
指定したIDを持つタグの中身を「書き換える内容」で置き換え...
実現方法は内部的にエレメントのinnerHTMLにJavaScriptでセッ...
例）「自己紹介」を「プロフィール」に書き換えます。~
#profile_comment_head{
プロフィール
}
***既存の内容の先頭に挿入 [#vb029d82]
#ID名:before{
書き換える内容
}
ID名の後に「:before」を付けると「書き換える内容」を対象の...
全体は「書き換える内容」＋「既存の内容」になります。~
例）「自己紹介」の前に「■」を挿入します。「■ 自己紹介」と...
#profile_comment_head:before{
■
}
***既存の内容の最後に追加 [#z04c9216]
#ID名:after{
書き換える内容
}
ID名の後に「:after」を付けると「書き換える内容」を対象の...
例）アクセス数の数字の後に「人」を追加します。「100人」の...
#profile_counter_number:after{
人
}
**BBCode [#s6e26a39]
書き換える内容にはBBCodeを使用することができます。
BBCodeは、角括弧 [ と ] でタグを囲んで簡単な書式を設定で...
以下のタグに対応しています。
***太字 [#r7f7dde2]
太字にしたい部分を[b][/b]で囲みます。~
[b]うぐぅ[/b]
とかくと、''うぐぅ''となります。
***斜体 [#c678216c]
斜体にしたい部分を[i][/i]で囲みます。~
[i]うぐぅ[/i]
とかくと、'''うぐぅ'''となります。
***下線 [#lca51e96]
下線を付けたい部分を[u][/u]で囲みます。~
***文字色 [#yaf5b834]
色を変えたい部分を[color=色][/color] で囲みます。~
***文字の大きさ [#vc21bf89]
大きさを変えたい部分を[size=サイズ][/size]で囲みます。~
***等幅フォント [#fba6be97]
等幅フォントで表示したい部分[code][/code]で囲みます。~
***引用（段を下げる） [#p519430b]
段を下げて表示したい部分[quote][/quote]で囲みます。~
***順不同リスト、番号付リスト [#d0c2e217]
順不同（番号なし）リストは全体を[list][/list]で囲みます。~
番号付リストの場合は[list=タイプ][/list]で囲みます。~
タイプは「1」で数字リスト、「a」でアルファベット、「i」で...
そのリスト内に「[*]項目」を記入します。~
[list]～[/list]の間は一行で記述して下さい。~
例）~
[list][*]白[*]黒[*]紫[/list]
これで下のようなリストができます。~
-白
-黒
-紫
***表 [#ua683315]
表全体を[table][/table]で囲みます。枠泉を付けたい場合は[t...
その中で行を[tr][/tr]で囲みます。[tr=背景色][/tr]とすると...
各セルの内容を[td][/td]で囲みます。[td=背景色][/td]とする...
[table]～[/table]の間で改行してしまうとその改行が<br>に変...
***定義リスト [#yb83ab73]
定義リスト全体を[dl][/dl]で囲みます。~
そのリスト内に定義する用語を[dt][/dt]で囲み、用語の説明を...
[dl]～[/dl]の間は一行で記述して下さい。~
***組み合わせ [#j6d54c38]
それぞれのタグを組み合わせることも可能です。その場合はし...
***リンクの作成 [#v473ab6c]
-[url=httpo://www.hoge.com]ここにアクセス！[/url] のよう...
-[url]httpo://www.hoge.com[/url] この場合URLにリンクされ...
***画像の表示 [#la433436]
画像URLを [img][/img] で囲むと画像が表示されます。[url][/...
[img=幅x高さ][/img]とすると画像の表示サイズを指定できます。
***YouTubeの表示 [#cbb3fe01]
[video]YouTubeのURL[/video]で、YouTubeの動画を張り付けら...
***DIVブロックの作成 [#t348e27f]
[div=ID名][/div] で、ID名をIDに持つDIVタグを作成できます。
終了行:
//edit user : No.2
*CSSカスタマイズ機能 [#rbb0c4cc]
プロフィールページをCSS（カスケーディングスタイルシート）...
また、独自拡張で指定したID属性を持つタグの内容を指定した...
CSSについてはごく簡単に説明しますが、CSSの詳細な文法はと...
*CSS基礎の基礎 [#v4f50d94]
CSSの基本的な構文
セレクター {
プロパティ : 値;
プロパティ : 値;
}
これで1セットとなり、セレクター、プロパティ、値の組み合わ...
**セレクター [#meed2451]
セレクターのうち、よく使う3種類は以下の三つです。~
このCSSカスタマイズでは、主にHTMLタグ要素と、IDセレクター...
***HTMLタグ要素 [#v6a9beef]
HTMLのタグ名です。指定したタグ要素すべてに適用されます。~
例）bodyタグを指定する場合~
body{
プロパティ : 値;
}
***クラス・セレクター [#p4223c5f]
タグのうち同じclass属性が設定されているタグに適用されます...
''.クラス名''というように、先頭にドットを付けその後クラス...
例）''profile_communication_cell''というクラスに適用させ...
.profile_communication_cell{
float:left;
}
***ID・セレクター [#pb703b9d]
タグのうち同じID属性が設定されているタグに適用されます。~
''#ID属性値''というように、先頭にシャープを付けてその後に...
例）''main_title_body''というID属性に適用させるには次のよ...
#main_title_body{
color:#7fffd4;
background-color:#2e8b57;
}
***複数のセレクターに一括設定 [#nb8b5216]
複数のセレクターに同じプロパティを設定したい場合、,(カン...
#profile_mylist_head, #profile_friend_head {
color: red
}
**プロパティ・値 [#i836cbee]
プロパティは数多くあり、設定できる効果も様々です。プロパ...
セレクターで指定した｛ ｝の中に~
プロパティ名 : 値 ;
のように、プロパティ名と値をコロン（:）で区切り、最後にセ...
この組み合わせを筆のセレクタ内に複数記述することが可能で...
例）body要素の文字色を青に設定します。~
body{
color : blue;
}
*CSSカスタマイズの方法 [#j7607ff3]
**注意点 [#bb4fde1c]
ここでカスタマイズできるのはあくまでスタイルシートの部分...
HTMLの構文はすでに決められてしまっているのでHTML要素を変...
そのため、出力されるHTMLを調べて、タグの構造、付与されて...
**HTML構文、クラス名、ID属性値を調べる [#g4d77a11]
自分が作成したのではないHTMLにスタイルシートを適用するた...
ソースの情報は公開されていないので、実際のソースを表示し...
また、FirefoxのFirebugなどのWeb開発支援アドオンを入れてお...
例）タイトル部分のHTML~
<div id=main_title_body><h2 id=main_title>○○のプロフィー...
ソースを表示すると<!-- ここからプロフィールページ //-->と...
これは、タイトルが「main_title_body」というID属性がついた...
**プロフィールページのHTMLの特徴 [#n9c8ac51]
大まかな枠組として、タイトルが横幅いっぱいにあり、その下...
そして左右それぞれにこまかなブロックが存在します。画面表...
そしてフッターとして横幅すべてを使ったブロックが存在しま...
*カスタマイズの具体例 [#mf3d08a1]
**背景画像の表示 [#qe1396f3]
画像のURLと書いてあるところに画像ファイルのURLを記入して...
かっこの中に余分なスペースとか入れるとはじかれるとおもう...
当然bodyだけでなく他の要素に変えればその要素の背景に画像...
body{
background-image:url(画像のURL);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
**文字色の変更 [#o7a1de5f]
背景画像が暗い画像で見にくくなった場合、文字色を明るい色...
また、あわせてリンクの文字色も変更します。~
色の指定はカラー名や16進でのカラーコード(#RRGGBB)、RGB10...
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;}
**背景色の変更 [#ac9406f4]
タイトルの背景色を変えてみます。~
#main_title_body{
background-color:#ffdb4f;
}
**枠線（ボーダー）の変更 [#f44bd4dd]
枠線は上下左右をそれぞれ別の設定にすることや線の種類など...
#main_title_body{
background-color:#ffdb4f;
border: 2px solid #3eb370;
}
**中央揃え [#ca7c38e6]
タイトルを中央揃えにしてみます。left:左、center:中央,righ...
#main_title_body{
background-color:#ffdb4f;
border: 2px solid #3eb370;
text-align:center;
}
**入力欄にフォーカスで変化をつける [#e95aba39]
擬似クラスというものを利用すると、状態によってスタイルを...
よく使われるのがリンクのマウスオーバーでの色替え等ですが...
#profile_footprintcomment_form_textarea:focus {
background-color: #93ca76;
}
**透過させる [#h3aa7107]
背景（文字色も一緒に透過されます）を透過させて後ろにある...
#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用、alp...
opacityは値が0～1の間の小数で、filterのalphaはopacity=の...
filterの場合、width属性をつけないと動作しない場合がありま...
**非表示にする [#i3b08622]
display:none;を使えば、要素を非表示にできます。~
例）カウンターを非表示に
#profile_counter_head{
display:none;
}
*内容書き換え [#icfc6637]
CSSライクな独自の構文を使って、指定したID属性を持つタグの...
指定したテキストは通常のテキストはもちろん、BBCodeが使え...
CSS用のテキストボックスの下にある内容書き換えテキストボッ...
**構文 [#b1bc2990]
***既存の内容を書き換え [#qecac291]
#ID名{
書き換える内容
}
指定したIDを持つタグの中身を「書き換える内容」で置き換え...
実現方法は内部的にエレメントのinnerHTMLにJavaScriptでセッ...
例）「自己紹介」を「プロフィール」に書き換えます。~
#profile_comment_head{
プロフィール
}
***既存の内容の先頭に挿入 [#vb029d82]
#ID名:before{
書き換える内容
}
ID名の後に「:before」を付けると「書き換える内容」を対象の...
全体は「書き換える内容」＋「既存の内容」になります。~
例）「自己紹介」の前に「■」を挿入します。「■ 自己紹介」と...
#profile_comment_head:before{
■
}
***既存の内容の最後に追加 [#z04c9216]
#ID名:after{
書き換える内容
}
ID名の後に「:after」を付けると「書き換える内容」を対象の...
例）アクセス数の数字の後に「人」を追加します。「100人」の...
#profile_counter_number:after{
人
}
**BBCode [#s6e26a39]
書き換える内容にはBBCodeを使用することができます。
BBCodeは、角括弧 [ と ] でタグを囲んで簡単な書式を設定で...
以下のタグに対応しています。
***太字 [#r7f7dde2]
太字にしたい部分を[b][/b]で囲みます。~
[b]うぐぅ[/b]
とかくと、''うぐぅ''となります。
***斜体 [#c678216c]
斜体にしたい部分を[i][/i]で囲みます。~
[i]うぐぅ[/i]
とかくと、'''うぐぅ'''となります。
***下線 [#lca51e96]
下線を付けたい部分を[u][/u]で囲みます。~
***文字色 [#yaf5b834]
色を変えたい部分を[color=色][/color] で囲みます。~
***文字の大きさ [#vc21bf89]
大きさを変えたい部分を[size=サイズ][/size]で囲みます。~
***等幅フォント [#fba6be97]
等幅フォントで表示したい部分[code][/code]で囲みます。~
***引用（段を下げる） [#p519430b]
段を下げて表示したい部分[quote][/quote]で囲みます。~
***順不同リスト、番号付リスト [#d0c2e217]
順不同（番号なし）リストは全体を[list][/list]で囲みます。~
番号付リストの場合は[list=タイプ][/list]で囲みます。~
タイプは「1」で数字リスト、「a」でアルファベット、「i」で...
そのリスト内に「[*]項目」を記入します。~
[list]～[/list]の間は一行で記述して下さい。~
例）~
[list][*]白[*]黒[*]紫[/list]
これで下のようなリストができます。~
-白
-黒
-紫
***表 [#ua683315]
表全体を[table][/table]で囲みます。枠泉を付けたい場合は[t...
その中で行を[tr][/tr]で囲みます。[tr=背景色][/tr]とすると...
各セルの内容を[td][/td]で囲みます。[td=背景色][/td]とする...
[table]～[/table]の間で改行してしまうとその改行が<br>に変...
***定義リスト [#yb83ab73]
定義リスト全体を[dl][/dl]で囲みます。~
そのリスト内に定義する用語を[dt][/dt]で囲み、用語の説明を...
[dl]～[/dl]の間は一行で記述して下さい。~
***組み合わせ [#j6d54c38]
それぞれのタグを組み合わせることも可能です。その場合はし...
***リンクの作成 [#v473ab6c]
-[url=httpo://www.hoge.com]ここにアクセス！[/url] のよう...
-[url]httpo://www.hoge.com[/url] この場合URLにリンクされ...
***画像の表示 [#la433436]
画像URLを [img][/img] で囲むと画像が表示されます。[url][/...
[img=幅x高さ][/img]とすると画像の表示サイズを指定できます。
***YouTubeの表示 [#cbb3fe01]
[video]YouTubeのURL[/video]で、YouTubeの動画を張り付けら...
***DIVブロックの作成 [#t348e27f]
[div=ID名][/div] で、ID名をIDに持つDIVタグを作成できます。
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
