とらんちょのブログ一覧

・カレンダーの所の画像の表示の仕方

画像の横サイズを120 ピクセルぐらいに縮小してから表示させます。
スタイルシート内の .CalendarPlate に以下の行を追加します。

padding-top:128px;
background: url(https://cdn.snsimg.carview.co.jp/～.jpg) no-repeat center top;


画像の大きさによって変わるので padding-top:128px; の
128px の数字を変えて調整してください。

画像のＵＲＬを https://cdn.snsimg.carview.co.jp/～.jpg に入れてください。

追加した例）

.CalendarPlate
{
color: #c5e4ff;
font-weight: bold;
font-size: 12px;
position: center;

padding-top:128px;
background: url(https://cdn.snsimg.carview.co.jp/～.jpg) no-repeat center top;
}

---

・ユーザーページヘッダー修正

2008.12.4 に機能変更になった一番上のヘッダーメニュー新デザインによる
ブログのずれを直します。

１．「ページレイアウト」の「全体の横幅 #Foundation」の所の
横幅指定 width を変更します。

width: 750; になってると思うので今回変更されたサイズ width: 930; に修正。
（本当は 940 ですが左により過ぎるため 930）

/*:::ページレイアウト:::*/
/*全体の横幅*/
#Foundation
{
width: 930;
margin: 0 auto 0 auto;
text-align: left;
}

２．サイドのメニュー「カラムメニュー #BlogMenu」の位置指定

float: right; を float: left; に変更。

/*カラムメニュー*/
#BlogMenu
{
width: 190px;
float: left;
margin: 5 auto 0 auto;
}

（ＩＥにしか対応してないらしいので最初の頃の設定に戻しました）

２．サイドのメニュー「カラムメニュー #BlogMenu」の位置指定 float を
削除します。

float: right; になってると思うのでそれを消してください。

/*カラムメニュー*/
#BlogMenu
{
width: 190px;
float: right;　　←　この１行を削除
margin: 5 auto 0 auto;
}

３．ヘッダーメニュー内の背景を透明

・ヘッダーメニューボタンの上だけを透明にする場合

/* ヘッダーメニュー上 透明 */
#UserHeader
{
background: transparent;
}

４．オリジナルヘッダーメニュー表示

ヘッダーメニューボタンをオリジナルボタンに変更できます。

注）利用規約に引っかかると思われるので自己責任でお願いします。

/* ヘッダーメニュー透過 */
body #UserHeader #gNav
{
filter: alpha(opacity=0);
-moz-opacity: 0.0;
opacity: 0.0;
}

/* ヘッダーメニューオリジナルボタン表示 */
#UserHeader
{
background: url(https://cdn.snsimg.carview.co.jp/～.jpg) no-repeat center bottom;
}


ボタンは１個　93ピクセル×27ピクセル で 10個あるので
全長 930ピクセル×27ピクセル になります。

↓これは 930ピクセル×27ピクセル にしてます。



↓ここでは↑の画像を 930×25 にして 93×25 のボタン画像を10個貼り付けました。



ボタンを作ったサイトは　ＡＵＴＯ　ＬＯＧＯ

「メニュー用ボタン作成」で作りました。簡単に作成できます。

５．文字色の変更

どこでもいいので以下の行を追加。

・「ようこそ○○○さん」の文字色

#UserHeader { color: blue; }

・「マイページ　ログアウト　ヘルプ」などのリンク文字色変更

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

１行目の link は通常の色。
２行目の visited はすでに見た色。（１度クリックされてればこの色）
３行目の hover はマウスカーソルが乗った時の色。

色はカラー１、カラー２で参考にしてください。

※カラー１はWindowsとMacintoshの共通の２１６色です。

---

・メニューボタンの変更

メニューボタン（ブログ・愛車紹介・おすすめスポット・My掲示板）を
画像に変更できます。

注）このやり方をやるとメニューボタン内の NEW が消えます。
（消さないとズレてしまうため。）

・表示されてる文字（ブログ・愛車紹介など）をそのまま使う場合。

ボタンは 135ピクセル×20ピクセル でちょうどいいです。

スタイルシート内の .TabActive と .TabInactive の中は以下のものに変更します。

/* アクティブ時 （押された後の表示）*/
.TabActive
{
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center top;
}

/* インアクティブ時 （押す前の表示）*/
.TabInactive
{
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center top;
}

そして以下のものを追加。
枠の太さは変えないほうがいいです。
枠の色 border-color: blue; は好きな色に。

/* ボタン・マウスカーソル認識範囲 */
.TabActive a,
.TabInactive a
{
width: 135px;
height: 20px;
}

/* メニューボタン「NEW」非表示 */
.TabActive img,
.TabInactive img
{

}

/* メニューボタンマウスカーソル時 枠表示 (線の太さ・色・種類) */
a.LinkTabActive:hover,
a.LinkTabInactive:hover
{
margin-top: -2;
border-width: 2px;
border-color: blue;
border-style: solid;
}


マウスカーソル時、枠ではなく画像にしたい場合は以下のものに変更。

/* メニューボタンマウスカーソル時 画像表示 */
a.LinkTabActive:hover,
a.LinkTabInactive:hover
{
margin-top: -2;
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center top;
}


・表示されてる文字を消してオリジナルを使う場合。

スタイルシート内の .TabActive と .TabInactive は消してください。

.TabActive1～4 と .TabInactive1～4 は変更。

枠の色 border-color: blue; は好きな色に。

そして以下のものを追加。

/* ボタン・マウスカーソル認識範囲 */
.TabActive a,
.TabInactive a
{
text-indent: -9999px;
width: 135px;
height: 21px;

display: block;
}

/* メニューボタン「NEW」非表示 */
.TabActive img,
.TabInactive img
{

}

/* アクティブ時 （ブログ）*/
.TabActive1
{
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center;
}

/* アクティブ時 （愛車紹介）*/
.TabActive2
{
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center;
}

/* アクティブ時 （おすすめスポット）*/
.TabActive3
{
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center;
}

/* アクティブ時 （My掲示板）*/
.TabActive4
{
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center;
}

/* インアクティブ時 （ブログ）*/
.TabInactive1
{
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center;
}

/* インアクティブ時 （愛車紹介）*/
.TabInactive2
{
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center;
}

/* インアクティブ時 （おすすめスポット）*/
.TabInactive3
{
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center;
}

/* インアクティブ時 （My掲示板）*/
.TabInactive4
{
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center;
}

/* メニューボタンマウスカーソル時 枠表示 (線の太さ・色・種類) */
a.LinkTabActive:hover,
a.LinkTabInactive:hover
{
margin-top: -2;
border-width: 2px;
border-color: blue;
border-style: solid;
}


マウスカーソル時、枠ではなく画像にしたい場合は以下のものに変更。

/* メニューボタンマウスカーソル時 画像表示 */
a.LinkTabActive:hover,
a.LinkTabInactive:hover
{
margin-top: -2;
background: url(https://cdn.snsimg.carview.co.jp/～.gif) no-repeat center top;
}


ボタンを簡単に作れるサイトは　ＡＵＴＯ　ＬＯＧＯ

「メニュー用ボタン作成」で作れます。



スタイルシートメニュー