Blog
2005/02/17のBlog
[ 08:08 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
Q：ページタイトルを可愛く変更したいんですが、どうしたらいいでしょう？手取り足取り教えて下さい・・・とMarried life♪のらいむさんよりリクエストありました。
では、簡単なところからいきましょうか・・・・
１０minutes さんの画像をお借りして実験してみましょう
今回はベーシックデザインを元にやってみます（笑）
では、簡単なところからいきましょうか・・・・
１０minutes さんの画像をお借りして実験してみましょう
今回はベーシックデザインを元にやってみます（笑）
;)
Q：ページタイトルにかわいいワンポイントをいれてみたいの変形バージョンとなります
■/* ページタイトル */ の中の .mydoblog-header { ～～ } 部分にのどこでもいいので
background-image: url("背景画像のＵＲＬ");
background-repeat: repeat-x;
background-position: right top;
と追記してください。すると右図のようになります。せっかくの雲が全然でていませんねぇ・・・
背景画像のＵＲＬに関しては ⇒ 【番外：壁紙の貼りかた】参照
※2007/08/30 古い内容だったので背景画像のＵＲＬ部分を修正いたしました※
■/* ページタイトル */ の中の .mydoblog-header { ～～ } 部分にのどこでもいいので
background-image: url("背景画像のＵＲＬ");
background-repeat: repeat-x;
background-position: right top;
と追記してください。すると右図のようになります。せっかくの雲が全然でていませんねぇ・・・
背景画像のＵＲＬに関しては ⇒ 【番外：壁紙の貼りかた】参照
※2007/08/30 古い内容だったので背景画像のＵＲＬ部分を修正いたしました※
;)
background-color : #ffffff ;
背景色を白にします
padding-top : 100px;
ページタイトルの高さを100px（画像に合わせて高くした）に設定
はい、ちゃんとはいりました。
文字の色を変えるには ⇒ ページタイトルのリンク色を変えるには？ 参照
文字のフォントを変えるには font-family : "ＭＳ Ｐゴシック", "Osaka"; の部分を変えればいいです。ただし、見え方はブラウザによって変わる場合もありますので共通のフォントにした方がいいと思います。フォントの参考は、wordなどで確認すればいいんじゃないでしょうか？
あとは、フォトショップなどでタイトル入りの画像を作ってしまう手もありますが・・・それだとフォントの表示を気にしなくてよくなりますが、ページタイトルを消すという作業をしなくてはいけませんネ。状況に応じてやってみてください。
背景色を白にします
padding-top : 100px;
ページタイトルの高さを100px（画像に合わせて高くした）に設定
はい、ちゃんとはいりました。
文字の色を変えるには ⇒ ページタイトルのリンク色を変えるには？ 参照
文字のフォントを変えるには font-family : "ＭＳ Ｐゴシック", "Osaka"; の部分を変えればいいです。ただし、見え方はブラウザによって変わる場合もありますので共通のフォントにした方がいいと思います。フォントの参考は、wordなどで確認すればいいんじゃないでしょうか？
あとは、フォトショップなどでタイトル入りの画像を作ってしまう手もありますが・・・それだとフォントの表示を気にしなくてよくなりますが、ページタイトルを消すという作業をしなくてはいけませんネ。状況に応じてやってみてください。
;)
【オマケ：上級編】
ついでにDoblogヘッダーも一緒にいじっちゃえ！
ということで、ベーシックタイプの場合空欄のDoblogヘッダー部分に下記のように追記してみましょう
.mydoblog-position form table { background-image: none;
position: absolute;
left: 0px;
top: 110px;
width: 765px;
color: #FFFFFF;
height: 20px; }
.mydoblog-position form td { text-align: right;}
.mydoblog-position A.portalbar:link { color : #3366ff ;
text-decoration : none ; }
.mydoblog-position A.portalbar:active { color : #3366ff ; }
.mydoblog-position A.portalbar:visited { color : #3366ff ; }
.mydoblog-position A.portalbar:hover { color: #FF0000 ;
text-decoration : underline ;
background-color: #FFFFFF ; }
結構一体感がでましたね。背景画像に合わせてカラーは変えた方がいいと思います
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
ついでにDoblogヘッダーも一緒にいじっちゃえ！
ということで、ベーシックタイプの場合空欄のDoblogヘッダー部分に下記のように追記してみましょう
.mydoblog-position form table { background-image: none;
position: absolute;
left: 0px;
top: 110px;
width: 765px;
color: #FFFFFF;
height: 20px; }
.mydoblog-position form td { text-align: right;}
.mydoblog-position A.portalbar:link { color : #3366ff ;
text-decoration : none ; }
.mydoblog-position A.portalbar:active { color : #3366ff ; }
.mydoblog-position A.portalbar:visited { color : #3366ff ; }
.mydoblog-position A.portalbar:hover { color: #FF0000 ;
text-decoration : underline ;
background-color: #FFFFFF ; }
結構一体感がでましたね。背景画像に合わせてカラーは変えた方がいいと思います
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
[ 08:00 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
同じ画像を使って上下逆転バージョンにしてみましょう。
■/* ページタイトル */ の中の .mydoblog-header { ～～ } 部分にのどこでもいいので
background-image: url("背景画像のＵＲＬ");
background-repeat: repeat-x;
background-position: right top;
と追記してください。
背景画像のＵＲＬに関しては ⇒ 【番外：壁紙の貼りかた】参照
※2007/08/30 古い内容だったので背景画像のＵＲＬ部分を修正いたしました※
color : #ffffff ;
フォントの色を白にします
background-color : #ffffff ;
背景色を白にします
padding-top : 10px;
上から 10px に設定
padding-bottom : 100px;
下から 100px に設定してみます
■/* Doblogヘッダー */ の空欄に下記を追記してください
.mydoblog-position form table { background-image: none;
position: absolute;
left: 0px;
top: 10px;
width: 765px;
color: #FFFFFF;
height: 20px; }
.mydoblog-position form td { text-align: right;}
.mydoblog-position A.portalbar:link { color : #3366ff ;
text-decoration : none ; }
.mydoblog-position A.portalbar:active { color : #3366ff ; }
.mydoblog-position A.portalbar:visited { color : #3366ff ; }
.mydoblog-position A.portalbar:hover { color: #FF0000 ;
text-decoration : underline ;
background-color: #FFFFFF ; }
あ、重なった・・・・ではDoblogヘッダーの位置を下にずらします
■/* ページタイトル */ の中の .mydoblog-header { ～～ } 部分にのどこでもいいので
background-image: url("背景画像のＵＲＬ");
background-repeat: repeat-x;
background-position: right top;
と追記してください。
背景画像のＵＲＬに関しては ⇒ 【番外：壁紙の貼りかた】参照
※2007/08/30 古い内容だったので背景画像のＵＲＬ部分を修正いたしました※
color : #ffffff ;
フォントの色を白にします
background-color : #ffffff ;
背景色を白にします
padding-top : 10px;
上から 10px に設定
padding-bottom : 100px;
下から 100px に設定してみます
■/* Doblogヘッダー */ の空欄に下記を追記してください
.mydoblog-position form table { background-image: none;
position: absolute;
left: 0px;
top: 10px;
width: 765px;
color: #FFFFFF;
height: 20px; }
.mydoblog-position form td { text-align: right;}
.mydoblog-position A.portalbar:link { color : #3366ff ;
text-decoration : none ; }
.mydoblog-position A.portalbar:active { color : #3366ff ; }
.mydoblog-position A.portalbar:visited { color : #3366ff ; }
.mydoblog-position A.portalbar:hover { color: #FF0000 ;
text-decoration : underline ;
background-color: #FFFFFF ; }
あ、重なった・・・・ではDoblogヘッダーの位置を下にずらします
;)
■/* Doblogヘッダー */ の中の .mydoblog-position form table { ～～ } 部分にある
top: 10px; ⇒ top: 110px; にしてみてください
できあがりはコレ。上下が入れ替わりましたぁ♪
使いたい画像によって、文字の色は適宜変えてくださいね。
ページタイトルの文字色変更は ⇒ ページタイトルのリンク色を変えるには？ 参照
Ｏｎｅｆａｉｎｅｄａｙのbooさんがクールでおしゃれなタイトル画像をDoblogユーザーに公開されてますので利用されるのも手だと思います。
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
top: 10px; ⇒ top: 110px; にしてみてください
できあがりはコレ。上下が入れ替わりましたぁ♪
使いたい画像によって、文字の色は適宜変えてくださいね。
ページタイトルの文字色変更は ⇒ ページタイトルのリンク色を変えるには？ 参照
Ｏｎｅｆａｉｎｅｄａｙのbooさんがクールでおしゃれなタイトル画像をDoblogユーザーに公開されてますので利用されるのも手だと思います。
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
2005/02/16のBlog
[ 22:41 ]
[ 食べる ]
;)
ヤキソバ
ポテトコンソメスープ
所要時間三分♪
こんな姿をしていますが、実は・・・
とってもジャンキーなメニューです（笑）
ポテトコンソメスープ
所要時間三分♪
こんな姿をしていますが、実は・・・
とってもジャンキーなメニューです（笑）
[ 11:16 ]
[ デザイン変更用画像 ]
;)
;)
ほんとに使おうと思ってた福寿草バージョンはこっち
同じく、自然いっぱいの素材集さんよりお借りしてます
同じく、自然いっぱいの素材集さんよりお借りしてます
;)
縦並べ用の福寿草
これまた自然いっぱいの素材集さん
これまた自然いっぱいの素材集さん
2005/02/15のBlog
[ 23:15 ]
[ 食べる ]
;)
スキヤキ風煮
トロロ飯
ワカメとフのお味噌汁
温泉たまご
スキヤキ風煮は残ったダシがもったいなかったので、ごぼうと玉子とエノキとネギを追加して煮込んでみました。味がしみておいしーーー♪
トロロ飯
ワカメとフのお味噌汁
温泉たまご
スキヤキ風煮は残ったダシがもったいなかったので、ごぼうと玉子とエノキとネギを追加して煮込んでみました。味がしみておいしーーー♪
[ 08:15 ]
[ 日記 ]
誰が最初に気がつくんだろう？（笑）
#追記#
ヒント：昨日から一部分マイナーチェンジ
#答え#
カレンダー部分のお花マークでーっす♪
#追記#
ヒント：昨日から一部分マイナーチェンジ
#答え#
カレンダー部分のお花マークでーっす♪
[ 03:50 ]
[ kazeっぽ写真部 ]
;)
[kazeっぽ写真部]
[メジロ]shiokazeさんち
銀行の帰り道
歩道を歩いていると
どこからともなく鳥のさえずりが聞こえてきた
どこ？どこ？？？と立ち止まりキョロキョロと見回すと
植え込みの向こう側のちょっと高い木の枝に
ウグイス色の小さな鳥を発見！
目の周りが白い！！！
こ・これは！！！！
メジロ？？
あってますか？(^^ゞ
初めて野鳥が撮れて喜び勇んでいる ちびkaze
[メジロ]shiokazeさんち
銀行の帰り道
歩道を歩いていると
どこからともなく鳥のさえずりが聞こえてきた
どこ？どこ？？？と立ち止まりキョロキョロと見回すと
植え込みの向こう側のちょっと高い木の枝に
ウグイス色の小さな鳥を発見！
目の周りが白い！！！
こ・これは！！！！
メジロ？？
あってますか？(^^ゞ
初めて野鳥が撮れて喜び勇んでいる ちびkaze
;)
;)
2005/02/14のBlog
[ 19:28 ]
[ 日記 ]
昨日と今日、別々の新聞勧誘を受けた。
一件目は、新聞社名をいったのでインターフォンごしに撃退したが、
二件目は、お届けモノですときやがった！
実際、届けられる荷物待っていたのでノコノコ玄関あけちまったじゃねーか！
いきなりJCBの商品券渡されて、私は受け取り用に、右手にハンコもってるのに！！（笑）
なんのこっちゃない一年取ってくれって・・・・
いらんわい！！！！！
商品券とっとと返して、いらない！！！と玄関しめた。（笑）
よかったーーーーおとなしい勧誘員で（笑）
これからは、届け物でも、誰か聞いてから開けることにしよう。
アブナイ危ない。
社名を言わないお届けものには気をつけましょう。
一件目は、新聞社名をいったのでインターフォンごしに撃退したが、
二件目は、お届けモノですときやがった！
実際、届けられる荷物待っていたのでノコノコ玄関あけちまったじゃねーか！
いきなりJCBの商品券渡されて、私は受け取り用に、右手にハンコもってるのに！！（笑）
なんのこっちゃない一年取ってくれって・・・・
いらんわい！！！！！
商品券とっとと返して、いらない！！！と玄関しめた。（笑）
よかったーーーーおとなしい勧誘員で（笑）
これからは、届け物でも、誰か聞いてから開けることにしよう。
アブナイ危ない。
社名を言わないお届けものには気をつけましょう。
[ 09:20 ]
[ 日記 ]
無作為に○○名の方を選び、お送りしています・・・・
なんじゃあああ？？？
すいません、市民意識調査らしいです。
１／８０の確率に当たってしまいました（笑）
今年はアタリ年なのかもしれないので、宝くじでも買いましょうか？苦笑
なんじゃあああ？？？
すいません、市民意識調査らしいです。
１／８０の確率に当たってしまいました（笑）
今年はアタリ年なのかもしれないので、宝くじでも買いましょうか？苦笑