• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ＋
■ナビゲーション
  1. 車・自動車SNSみんカラ
    2. >
  2. ブログ
    3. >
  3. 日記
    4. >
  4. ブログ一覧
    5. >
  5. かれんだ～がぞう [とらんちょ]
イイね！
   
2007年01月25日

かれんだ～がぞう


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

画像の横サイズを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;
}


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

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



スタイルシートメニュー
ブログ一覧 | 旧・ブログ設定 | 日記
Posted at 2007/01/26 00:50:04

   

イイね！0件



タグ

ユーザーページヘッダー スタイルシート カレンダー画像
ガソリン・軽油7円/L引クーポン・全国の宇佐美SSで使えます ※マイカー登録が必要になります。

今、あなたにおすすめ

ブログ人気記事

お盆の風物詩ですね〜🎵
あしぴーさん

HE33SからDKLFYへ
hivaryやすさん

曇りのち雨時々晴れ（久しぶりに）
らんさまさん

気になる車・・・(^^)1446
よっさん６３さん

言えばきれいになる？は無いでしょ！
kuta55さん

福井県エンゼルライン🎵
あん☆ちゃんさん

この記事へのコメント

tatsu-line
2008年12月6日 10:02
いつも参考になります！
いろいろ制限かかったりしてますが試験中だからなんですかね…ヘッダ上のリンク文字等も変えられなくなってしまいました｡
黒系だとかなり見づらいんですよね(ーー；
コメントへの返答
2008年12月6日 13:42
かなり変な制限かけてますね。
広告などを消すやつも制限かけてきたし。
解除しましたが（笑）

たぶんまたいろいろと制限かけてきますよ。
MIZM
2008年12月6日 10:23
参考にさせていただいております。
#gNavのwidthを0～940までにするとメニューの両サイドの帯が消えることを自分で偶然発見しましたが、同じ方法が追加になっていたので驚きました。
朝になると、その記載がなくなり画像縮小など上級技が更新されており、2度驚きました。
マイページ、ログアウト、ヘルプの文字色の変更方法についても教えていただければと思います。

コメントへの返答
2008年12月6日 13:45
帯を消すやつは制限がかかる前には画像の横幅が変えられるやつだったんですよね。
それをなんとか別なやりかたで消せないかなぁ～と調べてなんとかやりました。
#gNavのwidthを変えるやり方だけだと右側が少しだけ残るので。
MikeyZ_7
2008年12月6日 21:52
こんにちは。通りがかりました。非常に設定にお詳しいのですね。色々と設定の奥の深さがあるのだと知りました。また是非とも訪問させてください。僕も色々と勉強させていただきたいです。
コメントへの返答
2008年12月6日 23:47
たいしたこと書いて無いですけどね。
いろいろと試してみてください。

同じガルみたいだし（笑）
サムズ･アップ
2008年12月6日 23:18
初めまして。
勝手ながら、参考にさせていただきました。
ようやく問題解決方法にたどり着き、
大変感謝いたしております。
コメントへの返答
2008年12月6日 23:48
こんにちは。
なんとか調べてやっとですよ。
参考になればうれしいです。
MikeyZ_7
2008年12月6日 23:54
そうなんですね☆大黒画像拝見させていただきました！ガルもさることながら、色々と手が込んでいて凝っておられますね☆いつかお会いできる事がありましたらどうぞよろしくお願い致します。
コメントへの返答
2008年12月7日 0:04
どこかで会ったらヨロピク♪
ヽ(ENGEL)ノ。
2008年12月7日 10:14
こんにちは！
私もとらんちょのページはいつも参考にさせてもらってます♪
自分では何も分からないのでコピーしまくりです（*^_^*）
本当にお世話になっちゃってます、ありがとうございます。
これからもコッソリ覗きに来ちゃいます(^_^;)
足跡ペタペタつけちゃいますがゆるしてくださいね♪
コメントへの返答
2008年12月7日 12:20
いえいえ私もいろいろと調べてやっとこんなもんです。
参考になれればコピーでもしてください。
のんのパパ
2008年12月7日 10:20
はじめまして<(_ _)>

今回の変更は自力ではどうにもならず参考にさせて頂きました。
ありがとうございました。
コメントへの返答
2008年12月7日 12:21
自分ではまだまだですがこんなんでよかったら参考にしてください。
すずき.
2008年12月11日 2:29
はじめまして！

いろいろと参考にさせて頂いております。
私には知識がないのでありがたいです。
これからも覗かせて頂きますので
よろしくお願いします、
コメントへの返答
2008年12月11日 2:49
こんちは♪

コピペだけで簡単に出来るものばかりなのでぜひ使ってくださいね。
いもむし２３T
2009年2月3日 12:50
はじめまして、こんにちは
勝手に参考にさせていただいてます
ありがとうございます
本当にすごいですね！！
スタイルシート弄りにはまってますので
ぜひ！参考にさせてください！
質問なんですが、ヘッダーメニューオリジナルボタンの
ボタンは作成させていただいたんですが、これを１０個貼り付けるというのが
よくわかりません。background: url(http://carview-img02.bmcdn.jp/～.jpg)
この中に、1個ずつではなくて、1個の中に10個保存してここに貼り付けるのでしょうか？
また、10個並べて保存、貼りつけする場合にはどのようにしたらよいのでしょうか？
お手数ですが、教えていただければ嬉しいです、よろしくおねがいします
コメントへの返答
2009年2月3日 20:54
こんちは。

1個の中に10個保存ということになります。

10個貼り付けるというのは例えば作成したボタンが 93×25 だとしたら
グラフィックエディタ（ペイントなど）で適当に 930×25 の画像を作ってその画像に 93×25 のボタン画像を10個並べて１つの画像にします。

その１つにした画像を貼り付ければいいということになります。

ちょっと説明が難しくてすみません。
判らなかったらもう一度説明します。
いもむし２３T
2009年2月3日 22:49
お返事ありがとうございます
さっそくペイントでやってみましたが、いまいちうまくできません
ペイントでやると、同じ幅のはずのボタンがでこぼこになり、画像保存にて
やると、背景（ボタンからはみ出た部分）がしろで目立ちます。
画像も荒くなってる気もします
うまく隠せる方法はありますか？
コメントへの返答
2009年2月3日 23:40
それではですねぇ違うやり方をしてみましょう。

まず、ブログに画像を表示します。
表示の仕方は

<img src="http://carview-img02.bmcdn.jp/～.jpg"><img src="http://carview-img02.bmcdn.jp/～.jpg">～

と10個分の画像を繋げて表示してください。
それを「下書きとして保存」してブログを投稿します。

そうするとブログに10個繋がったように見えるメニューバーが表示したらキーボードの「PrintScreen」ボタンを押します。右側にあると思います。
「PrtSc」と書いてある場合もあります。

押したらペイントを開いて［編集］に「貼り付け」があるのでそれを選択すると画面の画像が表示されます。

そこでメニューバーを四角で囲ってコピーしてから［ファイル］の「新規」をやり、また貼り付けをしてください。

ペイントで画像を保存するときは「ファイルの種類」は元のボタンの画像と同じ「GIF」にするか「JPEG」で保存してください。

これでうまく出来ると思います（たぶん）

   

プロフィール

「なんか・・・気のせいか？」
何シテル？   10/19 19:26
みんカラ以外では 『またしろ』 になってます。 基本的に何でも出来ます（嘘）
みんカラ新規会員登録

ユーザー内検索

掲示板

とらんちょの掲示板

<< 2025/8 >>

日 月 火 水 木 金 土
     12
345678 9
10111213141516
17181920212223
24252627282930
31      

ブログカテゴリー

リンク・クリップ

ユーザー内検索変更 
カテゴリ：スタイルシート設定
2010/05/24 21:46:50 		 
タブメニューボタン画像設定 
カテゴリ：スタイルシート設定
2009/10/30 17:57:11 		 
ユーザーコンテンツの使い方 
カテゴリ：スタイルシート設定
2009/10/30 17:49:52 		 
[ 他のクリップをチェック ]

愛車一覧

スバル WRX STI またしろ２号 (スバル WRX STI)
暇な時、もしくは気が向いた時に乗る車。
その他 その他 またしろ号 (その他 その他)
すかいらいんがなぜか好きです。 へなちょこＲ３３ｔｙｐｅ－Ｍに乗ってます。 たまに空を ...
[ 愛車一覧 ]

過去のブログ

2025年
01月02月03月04月05月06月
07月08月09月10月11月12月
2024年
01月02月03月04月05月06月
07月08月09月10月11月12月
2023年
01月02月03月04月05月06月
07月08月09月10月11月12月
2022年
01月02月03月04月05月06月
07月08月09月10月11月12月
2021年
01月02月03月04月05月06月
07月08月09月10月11月12月
2020年
01月02月03月04月05月06月
07月08月09月10月11月12月
2019年
01月02月03月04月05月06月
07月08月09月10月11月12月
2018年
01月02月03月04月05月06月
07月08月09月10月11月12月
2017年
01月02月03月04月05月06月
07月08月09月10月11月12月
2016年
01月02月03月04月05月06月
07月08月09月10月11月12月
2015年
01月02月03月04月05月06月
07月08月09月10月11月12月
2014年
01月02月03月04月05月06月
07月08月09月10月11月12月
2013年
01月02月03月04月05月06月
07月08月09月10月11月12月
2012年
01月02月03月04月05月06月
07月08月09月10月11月12月
2011年
01月02月03月04月05月06月
07月08月09月10月11月12月
2010年
01月02月03月04月05月06月
07月08月09月10月11月12月
2009年
01月02月03月04月05月06月
07月08月09月10月11月12月
2008年
01月02月03月04月05月06月
07月08月09月10月11月12月
2007年
01月02月03月04月05月06月
07月08月09月10月11月12月
2006年
01月02月03月04月05月06月
07月08月09月10月11月12月
ヘルプ｜ 利用規約｜ サイトマップ

あなたの愛車、今いくら？

複数社の査定額を比較して愛車の最高額を調べよう！

あなたの愛車、今いくら？
メーカー
モデル
年式
走行距離（km）
© LY Corporation