Blog
2007/11/06のBlog
[ 19:26 ]
[ kazeっぽ写真部 ]
[ 01:23 ]
[ doblogカスタマイズQ&A ]
Q:ナビゲーションバー(Doblogヘッダー)をページタイトルと一体化させるには?から一歩すすんでみましょう。
新緑・陽だまり・ベーシックデザインの基本はこの記述
/* Doblogヘッダー */
.myblog-position form table {
background-image : none ;
width : 776px ;
position: absolute; }
.myblog-position form td {
text-align : right ; }
.myblog-position A.portalbar:link {
color : #61bf6a ; }
.myblog-position A.portalbar:active {
color : #61bf6a ; }
.myblog-position A.portalbar:visited {
color : #61bf6a ; }
.myblog-position A.portalbar:hover {
color: #FF0000 ;
text-decoration : underline ;
background-color: #FFFFFF ; }
/*記述の説明は、Q:ナビゲーションバー(Doblogヘッダー)のグレーの背景をどうにかしたいをお読みください*/
/*細字にしてある#●●●●●● のカラー番号はお好きな色を設定してくださいね*/シンプルデザインの方は width : 776px ; を width : 760px ; へ変えてください。
Dデザインの方は width : 776px ; を width : 760px ; へ変えてください。
飛行機デザインの方は width : 776px ; を width : 760px ; へ変えてください。
このままだとつまりすぎなので、ちょっと高さを出してみましょう。・・・①
/* ページタイトル */ の中の .myblog-header { ~ } 部分に
height : 60px ; ←ページタイトル部分の高さの設定
と追記してください。・・・②
ナビゲーションバー(Doblogヘッダー)の位置を変えるつもりがないなら、ページタイトル部分の高さを変えるよりも
/* ページタイトル */ の中の .myblog-header { ~ } 部分に
padding-top : 60px ; ←ページタイトル部分の文字の高さの設定
このほうが色々調整する必要がないのでオススメです。
【新緑デザイン】【陽だまりデザイン】【ベーシックデザイン】は、この方法でページタイトルとDoblogヘッダーを一体化させることができます。
高さの設定は各自好みに調整してください。
新緑・陽だまり・ベーシックデザインの基本はこの記述
/* Doblogヘッダー */
.myblog-position form table {
background-image : none ;
width : 776px ;
position: absolute; }
.myblog-position form td {
text-align : right ; }
.myblog-position A.portalbar:link {
color : #61bf6a ; }
.myblog-position A.portalbar:active {
color : #61bf6a ; }
.myblog-position A.portalbar:visited {
color : #61bf6a ; }
.myblog-position A.portalbar:hover {
color: #FF0000 ;
text-decoration : underline ;
background-color: #FFFFFF ; }
/*記述の説明は、Q:ナビゲーションバー(Doblogヘッダー)のグレーの背景をどうにかしたいをお読みください*/
/*細字にしてある#●●●●●● のカラー番号はお好きな色を設定してくださいね*/シンプルデザインの方は width : 776px ; を width : 760px ; へ変えてください。
Dデザインの方は width : 776px ; を width : 760px ; へ変えてください。
飛行機デザインの方は width : 776px ; を width : 760px ; へ変えてください。
このままだとつまりすぎなので、ちょっと高さを出してみましょう。・・・①
/* ページタイトル */ の中の .myblog-header { ~ } 部分に
height : 60px ; ←ページタイトル部分の高さの設定
と追記してください。・・・②
ナビゲーションバー(Doblogヘッダー)の位置を変えるつもりがないなら、ページタイトル部分の高さを変えるよりも
/* ページタイトル */ の中の .myblog-header { ~ } 部分に
padding-top : 60px ; ←ページタイトル部分の文字の高さの設定
このほうが色々調整する必要がないのでオススメです。
【新緑デザイン】【陽だまりデザイン】【ベーシックデザイン】は、この方法でページタイトルとDoblogヘッダーを一体化させることができます。
高さの設定は各自好みに調整してください。
そして、ナビゲーションバー(Doblogヘッダー)の位置を下にもっていく場合は、
/* Doblogヘッダー */ の中の .myblog-position form table { ~ }に
top : 20px ; ←高さの設定
と変更してください。・・・③
これでナビゲーションバー(Doblogヘッダー)が下にきます。
ここの数値を変えることで高さの設定は自由に変更できます。
【シンプルデザイン】の場合
グレーのナビゲーションバー(Doblogヘッダー)を消すために
.myblog-position form table { ~ } の中にある
background-image : url("/image/mypage/mypage_bg_header.gif") ; を
/* Doblogヘッダー */ の中の .myblog-position form table { ~ }に
top : 20px ; ←高さの設定
と変更してください。・・・③
これでナビゲーションバー(Doblogヘッダー)が下にきます。
ここの数値を変えることで高さの設定は自由に変更できます。
【シンプルデザイン】の場合
グレーのナビゲーションバー(Doblogヘッダー)を消すために
.myblog-position form table { ~ } の中にある
background-image : url("/image/mypage/mypage_bg_header.gif") ; を
background-image : none ;
と変更し
position: absolute;
と追記します・・・①
.myblog-position A.portalbar:link { ~ }
.myblog-position A.portalbar:active { ~ }
.myblog-position A.portalbar:visited { ~ }
の color : #ffffff ; は、白地に白文字なので見えなくなってしまいますから別の色に変えましょう
白文字のまま使用する場合は、ページタイトル部分に背景色をつけましょう
背景色をつける設定は、 /* ページタイトル */ の中の .myblog-header { ~ } 部分にある
background-color : ; で任意の色に変更できます
今回は background-color : #818181 ; としてみます
/* ページタイトル */ の中の .myblog-header { ~ } 部分にある
height : ; ←ページタイトル部分の高さの設定を
height : 100px ; と変更しましょう(任意の数値)。・・・②
そして、ナビゲーションバー(Doblogヘッダー)の位置を下にもっていく場合は、
/* Doblogヘッダー */ の中の .myblog-position form table { ~ }に
top : 50px ; ←高さの設定
と追記します。・・・③
これでナビゲーションバー(Doblogヘッダー)が下にきます。
ここの数値を変えることで高さの設定は自由に変更できます。
ついでにナビゲーションバー(Doblogヘッダー)を右に移動させたい場合は、
/* Doblogヘッダー */ の中の .myblog-position form td { ~ }にある
text-align : left ; を
text-align : right ;
と変更してください。・・・④
【紙飛行機デザイン】の場合
グレーのナビゲーションバー(Doblogヘッダー)を消すために
.myblog-position form table { ~ } の中にある
background-image : url("/image/mypage/mypage_bg_header.gif") ; を
と変更し
position: absolute;
と追記します・・・①
.myblog-position A.portalbar:link { ~ }
.myblog-position A.portalbar:active { ~ }
.myblog-position A.portalbar:visited { ~ }
の color : #ffffff ; は、白地に白文字なので見えなくなってしまいますから別の色に変えましょう
白文字のまま使用する場合は、ページタイトル部分に背景色をつけましょう
背景色をつける設定は、 /* ページタイトル */ の中の .myblog-header { ~ } 部分にある
background-color : ; で任意の色に変更できます
今回は background-color : #818181 ; としてみます
/* ページタイトル */ の中の .myblog-header { ~ } 部分にある
height : ; ←ページタイトル部分の高さの設定を
height : 100px ; と変更しましょう(任意の数値)。・・・②
そして、ナビゲーションバー(Doblogヘッダー)の位置を下にもっていく場合は、
/* Doblogヘッダー */ の中の .myblog-position form table { ~ }に
top : 50px ; ←高さの設定
と追記します。・・・③
これでナビゲーションバー(Doblogヘッダー)が下にきます。
ここの数値を変えることで高さの設定は自由に変更できます。
ついでにナビゲーションバー(Doblogヘッダー)を右に移動させたい場合は、
/* Doblogヘッダー */ の中の .myblog-position form td { ~ }にある
text-align : left ; を
text-align : right ;
と変更してください。・・・④
【紙飛行機デザイン】の場合
グレーのナビゲーションバー(Doblogヘッダー)を消すために
.myblog-position form table { ~ } の中にある
background-image : url("/image/mypage/mypage_bg_header.gif") ; を
background-image : none ;
と変更し
position: absolute;
と追記します
.myblog-position A.portalbar:link { ~ }
.myblog-position A.portalbar:active { ~ }
.myblog-position A.portalbar:visited { ~ }
の color : #ffffff ; は、白地に白文字なので見えなくなってしまいますから別の色に変えましょう
今回は #003366 としてみます・・・①
そして、ナビゲーションバー(Doblogヘッダー)の位置を下にもっていく場合は、
/* Doblogヘッダー */ の中の .myblog-position form table { ~ }に
top : 60px ; ←高さの設定
と追記します。・・・②
これでナビゲーションバー(Doblogヘッダー)が下にきます。
ここの数値を変えることで高さの設定は自由に変更できます。
ついでにナビゲーションバー(Doblogヘッダー)を右に移動させたい場合は、
/* Doblogヘッダー */ の中の .myblog-position form td { ~ }にある
text-align : left ; を
text-align : right ;
と変更してください。・・・③
このままだとページタイトルと重なってしまいますから、ページタイトルをちょっと上に移動させます
/* ページタイトル */ の中の .myblog-header-text { ~ } 部分にある
padding : 55px 10px 0px 0px ; を
padding : 35px 10px 0px 0px ;
と変更してください・・・④
【Dデザイン】の場合
グレーのナビゲーションバー(Doblogヘッダー)を消すために
.myblog-position form table { ~ } の中にある
background-image : url("/image/mypage/mypage_bg_header.gif") ; を
と変更し
position: absolute;
と追記します
.myblog-position A.portalbar:link { ~ }
.myblog-position A.portalbar:active { ~ }
.myblog-position A.portalbar:visited { ~ }
の color : #ffffff ; は、白地に白文字なので見えなくなってしまいますから別の色に変えましょう
今回は #003366 としてみます・・・①
そして、ナビゲーションバー(Doblogヘッダー)の位置を下にもっていく場合は、
/* Doblogヘッダー */ の中の .myblog-position form table { ~ }に
top : 60px ; ←高さの設定
と追記します。・・・②
これでナビゲーションバー(Doblogヘッダー)が下にきます。
ここの数値を変えることで高さの設定は自由に変更できます。
ついでにナビゲーションバー(Doblogヘッダー)を右に移動させたい場合は、
/* Doblogヘッダー */ の中の .myblog-position form td { ~ }にある
text-align : left ; を
text-align : right ;
と変更してください。・・・③
このままだとページタイトルと重なってしまいますから、ページタイトルをちょっと上に移動させます
/* ページタイトル */ の中の .myblog-header-text { ~ } 部分にある
padding : 55px 10px 0px 0px ; を
padding : 35px 10px 0px 0px ;
と変更してください・・・④
【Dデザイン】の場合
グレーのナビゲーションバー(Doblogヘッダー)を消すために
.myblog-position form table { ~ } の中にある
background-image : url("/image/mypage/mypage_bg_header.gif") ; を
background-image : none ;
と変更し
position: absolute;
と追記します
.myblog-position A.portalbar:link { ~ }
.myblog-position A.portalbar:active { ~ }
.myblog-position A.portalbar:visited { ~ }
の color : #ffffff ; は、白地に白文字なので見えなくなってしまいますから別の色に変えましょう
今回は #cc3366 としてみます・・・①
そして、ナビゲーションバー(Doblogヘッダー)の位置を下にもっていく場合は、
/* Doblogヘッダー */ の中の .myblog-position form table { ~ }に
top : 60px ; ←高さの設定
と追記します。・・・②
これでナビゲーションバー(Doblogヘッダー)が下にきます。
ここの数値を変えることで高さの設定は自由に変更できます。
ついでにナビゲーションバー(Doblogヘッダー)を右に移動させたい場合は、
/* Doblogヘッダー */ の中の .myblog-position form td { ~ }にある
text-align : left ; を
text-align : right ;
と変更してください。・・・③
このままだとページタイトルと重なってしまいますから、ページタイトルをちょっと上に移動させます
/* ページタイトル */ の中の .myblog-header-text { ~ } 部分にある
padding : 80px 0px 0px 10px ; を
padding : 50px 10px 0px 0px ;
と変更してください・・・④
以上、長い記事になってしまいましたが、きっとあなたも出来るはず♪
よく読んで、順序どおりにやってみましょう
うまくいかない場合は、お気軽に声をかけてくださいね
doblogの使い方Q&Aの他の記事は⇒doblogの使い方Q&A-index-
doblogの使い方Q&A-index-で見当たらない質問は⇒doblogの使い方Q&A 質問受付箱 へどうぞ
と変更し
position: absolute;
と追記します
.myblog-position A.portalbar:link { ~ }
.myblog-position A.portalbar:active { ~ }
.myblog-position A.portalbar:visited { ~ }
の color : #ffffff ; は、白地に白文字なので見えなくなってしまいますから別の色に変えましょう
今回は #cc3366 としてみます・・・①
そして、ナビゲーションバー(Doblogヘッダー)の位置を下にもっていく場合は、
/* Doblogヘッダー */ の中の .myblog-position form table { ~ }に
top : 60px ; ←高さの設定
と追記します。・・・②
これでナビゲーションバー(Doblogヘッダー)が下にきます。
ここの数値を変えることで高さの設定は自由に変更できます。
ついでにナビゲーションバー(Doblogヘッダー)を右に移動させたい場合は、
/* Doblogヘッダー */ の中の .myblog-position form td { ~ }にある
text-align : left ; を
text-align : right ;
と変更してください。・・・③
このままだとページタイトルと重なってしまいますから、ページタイトルをちょっと上に移動させます
/* ページタイトル */ の中の .myblog-header-text { ~ } 部分にある
padding : 80px 0px 0px 10px ; を
padding : 50px 10px 0px 0px ;
と変更してください・・・④
以上、長い記事になってしまいましたが、きっとあなたも出来るはず♪
よく読んで、順序どおりにやってみましょう
うまくいかない場合は、お気軽に声をかけてくださいね
doblogの使い方Q&Aの他の記事は⇒doblogの使い方Q&A-index-
doblogの使い方Q&A-index-で見当たらない質問は⇒doblogの使い方Q&A 質問受付箱 へどうぞ
[ 01:15 ]
[ 食べる ]
[ 00:44 ]
[ デザイン変更用画像 ]
2007/11/05のBlog
[ 23:56 ]
[ 日記 ]
東寺
京都市内を北へ南へ
バスでとことこ旅した最後は、東寺
今回は、この五重塔の内部を見ることが出来たんです!!!
照明もほとんどなく目が慣れるのを待って柱や壁の画をじっくり見ることができました。
感動・・・・
京都市内を北へ南へ
バスでとことこ旅した最後は、東寺
今回は、この五重塔の内部を見ることが出来たんです!!!
照明もほとんどなく目が慣れるのを待って柱や壁の画をじっくり見ることができました。
感動・・・・
[ 08:57 ]
[ 日記 ]
冷泉家
烏丸今出川にある京都の旧家、いわゆるお公家さんの住宅です。
ここは土間の台所。
まるでお寺の庫裏のような風情です。
飾ってある「しゃぐま」は、祇園祭のとき長刀鉾に飾り付けられていたものを貰い受け厄除けとしているそうです。
烏丸今出川にある京都の旧家、いわゆるお公家さんの住宅です。
ここは土間の台所。
まるでお寺の庫裏のような風情です。
飾ってある「しゃぐま」は、祇園祭のとき長刀鉾に飾り付けられていたものを貰い受け厄除けとしているそうです。
2007/11/04のBlog
[ 22:46 ]
[ 日記 ]
[ 22:14 ]
[ 日記 ]
京都非公開文化財の特別拝観が11月1日~11月11日まで行われています。
某氏より招待券を戴いたので、いそいそと市内へおでかけ♪
さすがに文化の日なだけあって、京都駅は大混雑(@_@;)
市バスの一日乗車券をゲットし、大徳寺へ向かう
大徳寺黄梅院
某氏より招待券を戴いたので、いそいそと市内へおでかけ♪
さすがに文化の日なだけあって、京都駅は大混雑(@_@;)
市バスの一日乗車券をゲットし、大徳寺へ向かう
大徳寺黄梅院
2007/11/03のBlog
[ 22:11 ]
[ 食べる ]
2007/11/02のBlog
[ 21:24 ]
[ 食べる ]