Turboringのブログ一覧

今週からユーザーページヘッダーが変更になりましたよね。

私の場合、スタイルシート変更で青を基調としたページにしているため、比較的ボタンの部分はあってるかなと思うのですが、その上の白いところがどうも違和感ありますよね。



できれば、この部分の色を変えたいところです。ちょっと遊んでみました(^^)

たとえば、黒にすると、こんな感じ。


紺だと、こんな感じ。


最後は、ブルー。



どれがいいかなぁ(^^;) これって、スタイルシートで変えられないんですかねぇ。。。



（追記）
K-20さんに教えて頂いたページを参考に、変更することが出来ました♪
結局、ページのバックグラウンドと統一しました(^^;)

この部分の背景を変えるには、スタイルシートの編集で、下記の部分を加えるみたいです。

#UserHeader #hdUserPage
{
background-color: #○○○○○○;
}

この○○○○○○の所には、色を表す16進数の数字を入れます。たとえば、黒は000000なので、

#UserHeader #hdUserPage
{
background-color: #000000;
}

とすると、背景が黒くなると思います。

私の場合は、この部分でbackground-imageを使って、背景を指定しました。

#UserHeader #hdUserPage
{
background-image: url('http://○○○...');
}

○○○...のところは、スタイルシート用画像にUPしたurlを指定します。

この部分を変えたいと思っている方は、チャレンジしてみて下さい(^^)/


ちなみに、、、

この部分の背景を暗い色にすると、”ようこそ○○さん”とか”マイページ...”の文字が見にくくなることがあります。ついでにそのフォントの色を変えちゃいましょう。

”ようこそ”の部分は、

#UserHeader #hdUserPage #hdUserPageMinkara .hdMinkaraMember .reg
{
color: #○○○○○○;
}

で、色を指定してあげると変わると思います。

”マイページ...”の部分は、リンクが貼られているので、ちょっと面倒ですが、

#UserHeader #hdUserPage #hdUserPageMinkara a
{
color: #○○○○○○;
}
#UserHeader #hdUserPage #hdUserPageMinkara a:link
{
color: #○○○○○○;
}
#UserHeader #hdUserPage #hdUserPageMinkara a:visited
{
color: #○○○○○○;
}
#UserHeader #hdUserPage #hdUserPageMinkara a:hover
{
color:#○○○○○○;
}

このように、それぞれの色を指定してあげると変わると思います。ちなみに、上から、初期の色、未訪問時の色、訪問済みの色、マウスポインタを合わせたときの色になります。ちなみに私は、初期値とlinkをdeepskyblueで00BFFF、visitedをaquaで00FFFF、hoverを赤でFF0000にしています。

追記する分は、どこでもいいと思いますが、私は一番最後に追加しました。


では、頑張って変えてみましょう(^^)/


＊スタイルシート変更は自己責任でお願いしますm(_ _)m