ひまわり動画マニュアル

CSSカスタマイズ機能

プロフィールページをCSS（カスケーディングスタイルシート）を記述してデザインを自分の好きなようにカスタマイズすることができます。

また、独自拡張で指定したID属性を持つタグの内容を指定したテキスト（BBCode使用可）で置き換えることができるので独自の要素を追加したり、既存の要素を書き換えたりもできます。

CSS基礎の基礎

CSSの基本的な構文

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

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

セレクター

セレクターのうち、よく使う3種類は以下の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タグを作成できます。

稼働状況

ひまわり動画 マニュアル