• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ＋
■ナビゲーション
  1. 車・自動車SNSみんカラ
    2. >
  2. ブログ
    3. >
  3. 日記
    4. >
  4. ブログ一覧
    5. >
  5. ■■続・スタイルシート編集。青いバーをいちばん上に。 [山ちャん]
イイね！
   
2008年12月07日

■■続・スタイルシート編集。青いバーをいちばん上に。

■■続・スタイルシート編集。青いバーをいちばん上に。 ■■ 重要 ■■

なぜだか分かりませんが、せっかく変更したスタイルシートなのに・・

強制的に元に戻されてしまいました｡･ﾟ･(ﾉ∀`)･ﾟ･｡
一旦、このブログのもともとの本文は、取り消させていただきます。

前のブログで紹介した、背景画像を入れる方法はＯＫなようですので、そちらを参考にしてくださいm(__)m


先日から変更された、いちばん↑のヘッダ。

背景色または画像を変更していると、いちばん上（「ようこそ○○さん」 のところ）だけが真っ白で、あまりにも見栄えが悪いので、本体と同じ背景を設定する方法を発見したため、先日アップしました。


たくさんの方からコメント等々いただいて、先ほど、やっと返信を打たせていただきましたm(__)m


で、コメントくださった方のブログからさらにリンク先に飛んで・・・
そこにある情報を参考にさせていただきながら・・・



青いバーをいちばん上に持っていくことに、成功しました。


よろしければ、参考にしてください。

【注意事項】
・Win XP SP2上の、IE 6.0 および Sleipnir 2.8.3 で表示を確認していますが、環境 & ブラウザとバージョンによっては、表示が乱れるかもしれません。
・スタイルシート編集ページの、「プレビュー」の画面では、うまく表示できないことがあります。いったん保存して、実ページを確認してください。
また念のため、自信ない方は、編集前のスタイルシートのソースを保存しておくといいと思います。



■前回は、このように記述しました。
/* ---------- ここから ---------- */
#hdUserPage
{
background-image: url('@@@ 表示したい背景画像のURL @@@');
}

/* ---------- ここまで ---------- */


■今回は、このようにします。
↑をすでに追加した場合は、その部分を消して、↓をコピペするなどして、「#hdUserPage」という記述が重複しないようにしてくださいね。

/* ---------- ここから ---------- */
#UserHeader
{
background-image: url('@@@ 表示したい背景画像のURL @@@');
height: 58px;
}

#hdUserPage
{
position: absolute; top: 27px; left: 30px;
}

#gNav
{
width: 0;
position: absolute; top: 0px; left: 30px;
}
/* ---------- ここまで ---------- */

【解説】 よく分からんという方は、スルーしてください。

#から始まる3つの名前（UserHeader, hdUserPage, gNav)ですが、、、
hdUserPageというのが、今回真っ白になった部分
gNavというのが、「トップ」「ブログ」などのボタンのある、青いバー
で、これらを合わせて、UserHeaderという構成になっています。

で、前回→今回の違いは、
(1)background-imageの定義を、hdUserPageから、上位のUserHeaderに移しました。これによって、hdUserPageと、gNavのどちらにも、背景が設定されるようになります。
(2)gNavを、いちばん上に持っていくため、"position"を定義します。
それだけだとうまくいかないので、"width"も追加します。
width: 0; とすると、青いバーの左右（ボタンがないところ）がカットされます。カットされたところには背景画像を流し込むため、(1)のように変更してあります。
(3)gNavの高さが27ピクセルあるので、hdUserPageは、上から27ピクセル空けたところから表示するように、"position"を定義します。
(4)ここまでだと、それ以下の表示（ヘッダ画像とかカウンタとか、それ以下すべて）が持ち上がってしまうので、UserHeader全体の高さを、58ピクセル確保するように、"height"を定義します。



いかがでしょうか？？？



ワタシの場合は、畳調の壁紙を背景にしていますが、もし背景を写真などにしている場合は、切れ目のところがズレちゃうかもしれないので、もう少し細工が必要かもしれません。
小さい画像を繰り返し表示している場合なら、UserHeaderの"height"を、ベース画像の高さに合わせてやるのも手だと思います・・・





この記事は、ユーザーページ ヘッダー変更実施のお知らせ について書いています。

この記事は、■スタイルシートを直してみました。 について書いています。
ブログ一覧 | みんカラ | 日記
Posted at 2008/12/07 12:18:47

   

イイね！0件



タグ

スタイルシート ヘッダ変更 見栄え悪い 青いバーをいちばん上に
ガソリン・軽油7円/L引クーポン・全国の宇佐美SSで使えます ※マイカー登録が必要になります。

今、あなたにおすすめ

この記事へのトラックバック

「ＵＥＳＥＲ　ＨＥＡＤＥＲまたまた変更★」 From [ ＠みちのくＢＬＯＧ ] 2008年12月8日 04:21
この記事は、■■続・スタイルシート編集。青いバーをいちばん上に。 について書いています。 ↑ トラバ先の山ちゃんのこれ　そのままパクリました。 ただし
ブログ人気記事

あっ！細長いカルガモがデュエットフ ...
カンチ.さん

アンリ・シャルパンティエ 横浜高島 ...
こうた with プレッサさん

【拡散希望です🙇】8/11 10 ...
narukipapaさん

0813
どどまいやさん

朝の一杯　8/15
とも ucf31さん

2025 網走＆知床 巡り 後編
hokutinさん

この記事へのコメント

★みゅう★
2008年12月7日 12:28
前回のやつ今してるんですが
その場所がさっぱり判らず
老眼が要りそう（汗）

どの辺ですか？
目がショボショボ・・・
ただ黒くしたいだけなんですが
コメントへの返答
2008年12月7日 12:40
おジィちゃん、大丈夫ですか？(爆


もともと編集してるスタイルシートなら、
「#hdUserPage」という記述は、どこにもないはずなので、自分で追記するんですよ。

他の定義のカッコに割り込まないようにだけ気をつけて。
∀￡ёЙ
2008年12月7日 13:48
お初コメです

情報ありがとうございました(v^-^v)
ページがスッキリしました！
コメントへの返答
2008年12月7日 21:10
細かいことを言うと、もうヒトコエ・・・って気もしてるんですが・・

個人的に、なんとかして一番上にもって行きたかったので、だいぶすっきりしたかと。
kinchaku
2008年12月7日 15:38
こんにちわ♪

おかげさまで、私にも出来ました(^0^)/
スッキリしました！！

有難うございましたm(_ _)m
コメントへの返答
2008年12月7日 21:11
背景色（または画像）によっては、今回デザインの変わった青いバーだけが、どう見ても浮いてましたからね・・

一番上に行ってくれれば、ちょっとは見栄えもいいかと。。
マコリ
2008年12月7日 16:47
こんにちわ。

とても、参考になりました。

早速、実施しました。
また、色々と教えて下さい。
コメントへの返答
2008年12月7日 21:12
最初は、なかなかうまく行かなかったんですが・・・

あれこれ挑戦してみて、やっとできました。。。

－CROSSWIND－
2008年12月8日 17:54
はじめまして！！！

この解析、先ほど勝手に試して成功したんですが・・・

今日（12月8日）の17時くらいからなぜか強制的に戻されちゃってます！！！

これはみんカラ編集部の仕業かなぁ？？？？悲
コメントへの返答
2008年12月8日 19:40
こんにちは＆はじめまして。

情報ありがとうございますm(__)m

確かに、戻されちゃってますね・・
恨みでもあるんでしょうか・・・
JUNKFREAKS
2008年12月8日 18:14
初コメ失礼します☆
参考にさせていただきますね。
コメントへの返答
2008年12月8日 19:40
はじめまして。

↑のとおり、なぜだか分かりませんが、この「上下入れ替え」は強制的に元に戻されちゃいました。

一旦取り消します・・・

   

プロフィール

「昨日から断酒、今朝から断食で健康診断。
このクソ暑い中、朝から水を飲むのも制限されて、検診のクリニックに向かうだけで不健康に…

てことで、仕事終わりにやよい軒で水分補給。せん「べろ」までは行かないものの、この組み合わせなら1000円でお釣りがくるのはありがや」
何シテル？   08/01 20:50
【クルマ歴】 レガシィ（BG5C GT-B） ステップワゴン（RG1） アバルト500 ↓ エルグランド（E52） ジムニー （JB64） ...
みんカラ新規会員登録

ユーザー内検索

掲示板

山ちャんの掲示板

<< 2025/8 >>

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

ブログカテゴリー

リンク・クリップ

メンテナンスは大事...アバルト500　エンジンオイル交換　MOTUL 
カテゴリ：その他（カテゴリ未設定）
2024/09/24 12:48:06
「小諸そば」 
カテゴリ：その他（カテゴリ未設定）
2024/06/11 12:23:09
ホンダ(純正) オデッセイ　サングラスケース付きマップランプ 
カテゴリ：その他（カテゴリ未設定）
2024/04/29 20:18:47
[ 他のクリップをチェック ]

愛車一覧

スバル フォレスター スバル フォレスター
2023年6月中旬契約 → 7月納車 E型→F型の切替えタイミングだったこともあり、販 ...
スズキ ジムニー スズキ ジムニー
2019年4月契約 2020年6月初回登録、7月納車。 待った分、可愛がってあげます
その他 その他 その他 その他
D80と入れ替えにやってきました。 D300ボディ＋VR18-200のキットで購入。
その他 その他 その他 その他
通勤＆運動のために・・・ 以前はマウンテンバイク乗ってましたが、今回はクロスバイク。
[ 愛車一覧 ]

過去のブログ

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月
2005年
01月02月03月04月05月06月
07月08月09月10月11月12月
ヘルプ｜ 利用規約｜ サイトマップ

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

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

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