Blog
2005/02/14のBlog
[ 08:09 ]
[ 食べる ]
;)
豚キムチ
納豆
もずく
お味噌汁
キムチチャーハンで使ったキムチを消化しました（笑）
からーーーーーーい！！
でも、んまーーーーーーい（笑）
納豆
もずく
お味噌汁
キムチチャーハンで使ったキムチを消化しました（笑）
からーーーーーーい！！
でも、んまーーーーーーい（笑）
2005/02/13のBlog
[ 21:33 ]
[ doblogカスタマイズＱ＆Ａ ]
;){kind=small}
Q：メニュータイトルにかわいいワンポイントをいれたい
これまた、私がやってみたかったことだったりします（笑）
「Mariのいろえんぴつ」さんから借りた、小さめのボタンを利用してみよう！！
『MY CSS DESIGN ~ ヒヨコ君増殖中』／kazusiblogさんの【メニューの見出しにプチ画像を付けたくてしかたない。】という記事を参考に頑張ってみます！（笑）
これまた、私がやってみたかったことだったりします（笑）
「Mariのいろえんぴつ」さんから借りた、小さめのボタンを利用してみよう！！
『MY CSS DESIGN ~ ヒヨコ君増殖中』／kazusiblogさんの【メニューの見出しにプチ画像を付けたくてしかたない。】という記事を参考に頑張ってみます！（笑）
;)
■/* メニュー */の中の .menu-header { ～～～ } 部分のどこでもいいので、
background-image: url("背景画像のＵＲＬ");
background-repeat: no-repeat;
background-position: left bottom;と追記してください。
あ・・・これじゃ文字と重なってる（笑）
色が濃いから、せっかくの花が隠れちゃってるし・・・
※background-image: urlの説明は ⇒ 【番外：壁紙の貼りかた】 をご覧ください※
※2007/08/30 文面が古かったので現在の表記に修正いたしました※
background-image: url("背景画像のＵＲＬ");
background-repeat: no-repeat;
background-position: left bottom;と追記してください。
あ・・・これじゃ文字と重なってる（笑）
色が濃いから、せっかくの花が隠れちゃってるし・・・
※background-image: urlの説明は ⇒ 【番外：壁紙の貼りかた】 をご覧ください※
※2007/08/30 文面が古かったので現在の表記に修正いたしました※
;)
■行の高さを高くし、文字の色を変えて、背景色を薄くしてみよう
line-height : 200% ;
行の高さを200%にしてみた。これで花がちゃんと表示されるかな？
color : #993300 ;
文字の色をページタイトルの色を同じにしよう・・・
background-color : #FFFFF0 ;
背景色をページタイトルと同じにしよう・・・
line-height : 200% ;
行の高さを200%にしてみた。これで花がちゃんと表示されるかな？
color : #993300 ;
文字の色をページタイトルの色を同じにしよう・・・
background-color : #FFFFF0 ;
背景色をページタイトルと同じにしよう・・・
;)
■文字を大きくして、位置を微調整しよう
font-size : 90% ;
文字の大きさの設定を、90% にしてみた
padding-top : 0px ;
枠の中の位置の設定？上から 0px にしてみた
padding-bottom :0px ;
枠の中の位置の設定？下から 0px にしてみた
text-indent : 30px ;
文字の位置を画像分だけ右によせてみた
成功！！！かわいらしくなりました（笑）
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
font-size : 90% ;
文字の大きさの設定を、90% にしてみた
padding-top : 0px ;
枠の中の位置の設定？上から 0px にしてみた
padding-bottom :0px ;
枠の中の位置の設定？下から 0px にしてみた
text-indent : 30px ;
文字の位置を画像分だけ右によせてみた
成功！！！かわいらしくなりました（笑）
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
[ 21:16 ]
[ doblogカスタマイズＱ＆Ａ ]
;){kind=small}
Q：ページタイトルにかわいいワンポイントをいれてみたい
って、私がやってみたかったんですけどね（笑）
陽だまりテンプレートでためしてみよう！！
「Mariのいろえんぴつ」さんから小さめの画像をお借りしてみました！
って、私がやってみたかったんですけどね（笑）
陽だまりテンプレートでためしてみよう！！
「Mariのいろえんぴつ」さんから小さめの画像をお借りしてみました！
;)
/* ページタイトル */の中の .mydoblog-header { ～～～ } 部分のどこでもいいので、
background-image: url("背景画像のＵＲＬ");
background-repeat: no-repeat;
background-position: left bottom;と追記してください。
ありゃ？タイトル文字が上にのってわかんないや・・・
（背景画像のＵＲＬに関しては ⇒ 【番外：壁紙の貼りかた】 参照）
※2007/08/30 内容が古かったので、背景画像部分修正いたしました※
background-image: url("背景画像のＵＲＬ");
background-repeat: no-repeat;
background-position: left bottom;と追記してください。
ありゃ？タイトル文字が上にのってわかんないや・・・
（背景画像のＵＲＬに関しては ⇒ 【番外：壁紙の貼りかた】 参照）
※2007/08/30 内容が古かったので、背景画像部分修正いたしました※
;)
■タイトル文字の場所を微調整します。
text-indent : 5px ;
padding-top : 5px;
padding-bottom : 3px;
この部分を
text-indent : 50px ;
行のあたまの位置？50pxにしてみた
padding: 10px 0px 0px 0px;
文字の設置場所を上から10ｐｘ、右・下・左はそれぞれ0pxとしました。
padding-top : 10px;
padding-bottom : 0px;でも同じ意味です。
なんか、かわいくなりましたね（笑）
私の実験企画におつきあいくださってありがとうございます。
実際にやってみて、こんなんなったよーって報告してくださると、とーっても嬉しいです。
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
text-indent : 5px ;
padding-top : 5px;
padding-bottom : 3px;
この部分を
text-indent : 50px ;
行のあたまの位置？50pxにしてみた
padding: 10px 0px 0px 0px;
文字の設置場所を上から10ｐｘ、右・下・左はそれぞれ0pxとしました。
padding-top : 10px;
padding-bottom : 0px;でも同じ意味です。
なんか、かわいくなりましたね（笑）
私の実験企画におつきあいくださってありがとうございます。
実際にやってみて、こんなんなったよーって報告してくださると、とーっても嬉しいです。
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
[ 21:06 ]
[ デザイン変更用画像 ]
;){kind=small}
「Mariのいろえんぴつ」さんからお借りしてます
;){kind=small}
「Mariのいろえんぴつ」さんからお借りしてます
;){kind=small}
「Mariのいろえんぴつ」さんからお借りしてます
;){kind=small}
「Mariのいろえんぴつ」さんからお借りしてます
[ 17:26 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
Q：記事部分に大きめのワンポイント画像を背景にしたいんですが、 Q：記事の部分にワンポイントの背景画像をいれるには？をためしてみたら、画像が全部表示されません。全部表示させるにはどうしたらいいですか？
私も悩んでました。（笑）
もっといい方法が、 『MY CSS DESIGN ~ ヒヨコ君増殖中』／kazusiblogさんの【記事毎に画像表示しようぜ！】という記事で紹介されていました。どうやら背景画像を入れる場所が違うようです。ほんとに助かりました。
私も悩んでました。（笑）
もっといい方法が、 『MY CSS DESIGN ~ ヒヨコ君増殖中』／kazusiblogさんの【記事毎に画像表示しようぜ！】という記事で紹介されていました。どうやら背景画像を入れる場所が違うようです。ほんとに助かりました。
;)
■/* 記事 */の中の .blog-entry { ～～～ } 部分のどこでもいいので、
background-image: url(http://www.doblog.com/img/○○○○/△△△△.jpg);
background-repeat: no-repeat;
background-position: right bottom;と追記してください。
（○○○○/△△△△には数字や記号がはいります）
すると、こんな感じになります。うまくいきました。
background-image: url(http://www.doblog.com/img/○○○○/△△△△.jpg);
background-repeat: no-repeat;
background-position: right bottom;と追記してください。
（○○○○/△△△△には数字や記号がはいります）
すると、こんな感じになります。うまくいきました。
;)
[ 01:43 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
Q：記事の部分にワンポイントの背景画像をいれるには？どうしたらいいでしょう
記事の部分だけにワンポイントで背景画像をいれてみましょう。
新緑のデザインテンプレートでみてみます。
デザインカスタマイズやってみる？？ 【番外：壁紙の貼りかた】を参照してワンポイント用の小さめの背景画像をアップさせてください。
/* 記事 */の中の .blog-entry-footer { ～～～～ } 部分のどこでもいいので、
background-image: url(http://www.doblog.com/img/○○○○/△△△△.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
と追記してください（○○○○/△△△△には数字や記号がはいります）。すると、こんな感じになります。
記事の部分だけにワンポイントで背景画像をいれてみましょう。
新緑のデザインテンプレートでみてみます。
デザインカスタマイズやってみる？？ 【番外：壁紙の貼りかた】を参照してワンポイント用の小さめの背景画像をアップさせてください。
/* 記事 */の中の .blog-entry-footer { ～～～～ } 部分のどこでもいいので、
background-image: url(http://www.doblog.com/img/○○○○/△△△△.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
と追記してください（○○○○/△△△△には数字や記号がはいります）。すると、こんな感じになります。
;)
ちなみに大きな画像だと、こうなります（笑）
;)
更新日時のところも背景画像を表示させたい場合は、どうするのか？
/* 記事 */の中の .blog-update { ～～～～ } 部分にある、background-color : #FFFFFF ; という背景色指定を background-color : ; としてください。
見た目はこんな感じになります。
/* 記事 */の中の .blog-update { ～～～～ } 部分にある、background-color : #FFFFFF ; という背景色指定を background-color : ; としてください。
見た目はこんな感じになります。
背景画像の大きさに関係なく、記事部分だけに背景をいれる方法はこちらの記事でご紹介してます。
Q：記事部分に大きめのワンポイント画像を背景にしたい
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
Q：記事部分に大きめのワンポイント画像を背景にしたい
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
2005/02/12のBlog
[ 22:33 ]
[ 食べる ]
;)
とろろ飯
具沢山味噌汁
長いもが安売りしていたので。。。とろろ飯（笑）
作り上げたら、きざみ海苔をきらしてた＿l￣l○
なので、ちょっぴりワサビをのっけてみた（笑）
具沢山味噌汁
長いもが安売りしていたので。。。とろろ飯（笑）
作り上げたら、きざみ海苔をきらしてた＿l￣l○
なので、ちょっぴりワサビをのっけてみた（笑）
[ 15:12 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
Q：背景画像が記事部分にかくれてしまいます。記事部分にも背景画像を表示させるにはどうしたらいいですか？
はい、これは応用編ですね。
まずは、【番外：壁紙の貼りかた】固定の背景画像をいれる場合 と Q：背景画像と背景色をあわせるには？ と Q：背景画像がメニュー部分にかくれてしまいます までの作業をすませましょう。
わかりやすいようにメニューのヘッダーは表示させておきますね。
はい、これは応用編ですね。
まずは、【番外：壁紙の貼りかた】固定の背景画像をいれる場合 と Q：背景画像と背景色をあわせるには？ と Q：背景画像がメニュー部分にかくれてしまいます までの作業をすませましょう。
わかりやすいようにメニューのヘッダーは表示させておきますね。
;)
/*記事*/の中の .blog { ～～～～ } 部分をみてください。
background-color : ?????? ;
という記事部分の背景色設定がありますので、?????? （??????には記号や数字やアルファベットが入ってます）を消してしまいます。
表示は background-color : ; こうなります。
するとこんな感じになります。
かなり雰囲気がかわりましたね。記事にはりつけられている画像に影響はありません。
background-color : ?????? ;
という記事部分の背景色設定がありますので、?????? （??????には記号や数字やアルファベットが入ってます）を消してしまいます。
表示は background-color : ; こうなります。
するとこんな感じになります。
かなり雰囲気がかわりましたね。記事にはりつけられている画像に影響はありません。
;)
ちなみに、淡い小さな背景画像を全体に表示させてみましょう。
作業は【番外：壁紙の貼りかた】固定の背景画像をいれる場合 と 【番外：壁紙の貼りかた】全体に繰り返し背景画像をいれる場合 と Q：背景画像と背景色をあわせるには？ と Q：背景画像がメニュー部分にかくれてしまいます の作業をすませ /*記事*/の中の .blog { ～～～～ } 部分で、
background-color : ?????? ;という記事部分の背景色設定がありますので、?????? （??????には記号や数字やアルファベットが入ってます）を消してしまいます。
表示は background-color : ; こうなります。
【/* 全体 */の中の body { ～～～～ } 部分】
background-color : #ffffff ; 背景色を白にする
background-image: url(http://www.doblog.com/img/○○○○/△△△△.jpg);
background-repeat: repeat; と追記する
【/* メニュー */ の中の .menu { ～～～～ } 部分】
background-color : ; 背景色設定を空欄にする
【/*記事*/の中の .blog { ～～～～ } 部分】
background-color : ; 背景色設定を空欄にする
作業は【番外：壁紙の貼りかた】固定の背景画像をいれる場合 と 【番外：壁紙の貼りかた】全体に繰り返し背景画像をいれる場合 と Q：背景画像と背景色をあわせるには？ と Q：背景画像がメニュー部分にかくれてしまいます の作業をすませ /*記事*/の中の .blog { ～～～～ } 部分で、
background-color : ?????? ;という記事部分の背景色設定がありますので、?????? （??????には記号や数字やアルファベットが入ってます）を消してしまいます。
表示は background-color : ; こうなります。
【/* 全体 */の中の body { ～～～～ } 部分】
background-color : #ffffff ; 背景色を白にする
background-image: url(http://www.doblog.com/img/○○○○/△△△△.jpg);
background-repeat: repeat; と追記する
【/* メニュー */ の中の .menu { ～～～～ } 部分】
background-color : ; 背景色設定を空欄にする
【/*記事*/の中の .blog { ～～～～ } 部分】
background-color : ; 背景色設定を空欄にする
;)
【/* ページタイトル */の中の .mydoblog-header { ～～～～ } 部分】
background-color : ; 背景色の設定を空欄にしてください
【/* 記事 */の中の.blog-header { ～～～～ } 部分】
background-color : ; 背景色の設定を空欄にしてください
color : #993300 ; 文字色をわかりやすい色に設定してください
【/* 記事 */の中の .blog-title { ～～～～ } 部分】
background-color : ; 背景色の設定を空欄にしてください
background-color : ; 背景色の設定を空欄にしてください
【/* 記事 */の中の.blog-header { ～～～～ } 部分】
background-color : ; 背景色の設定を空欄にしてください
color : #993300 ; 文字色をわかりやすい色に設定してください
【/* 記事 */の中の .blog-title { ～～～～ } 部分】
background-color : ; 背景色の設定を空欄にしてください
;)
仕上げは /* Doblogヘッダー */の中身を
.mydoblog-position form table { background-image : none ;}
.mydoblog-position form td {
padding-left : 10px ;
text-align : right ;
}
.mydoblog-position A.portalbar:link {
color : #FF6633 ;
text-decoration : none ; }
.mydoblog-position A.portalbar:active { color :#FF6633 ; }
.mydoblog-position A.portalbar:visited { color : #FF6633 ; }
.mydoblog-position A.portalbar:hover {
color: #CC3010 ;
text-decoration : underline ;
background-color: #FFFFFF ;
}と変更してください
淡い背景ならば、文字の色はそれほど影響はでないと思います。
自分の好きな背景に変えて、楽しむことができますヨ
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
.mydoblog-position form table { background-image : none ;}
.mydoblog-position form td {
padding-left : 10px ;
text-align : right ;
}
.mydoblog-position A.portalbar:link {
color : #FF6633 ;
text-decoration : none ; }
.mydoblog-position A.portalbar:active { color :#FF6633 ; }
.mydoblog-position A.portalbar:visited { color : #FF6633 ; }
.mydoblog-position A.portalbar:hover {
color: #CC3010 ;
text-decoration : underline ;
background-color: #FFFFFF ;
}と変更してください
淡い背景ならば、文字の色はそれほど影響はでないと思います。
自分の好きな背景に変えて、楽しむことができますヨ
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
[ 15:11 ]
[ デザイン変更用画像 ]
;)
「Mariのいろえんぴつ」 さんよりお借りしました
;){kind=small}
「Mariのいろえんぴつ」 さんよりお借りしました
;)
「Mariのいろえんぴつ」 さんよりお借りしました
;)
「Mariのいろえんぴつ」 さんよりお借りしました
;){kind=small}
「Mariのいろえんぴつ」 さんよりお借りしました
[ 12:32 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
Q：背景画像がメニュー部分にかくれてしまいます。メニュー部分の文字の下にも背景画像を表示させるにはどうすればいいですか？
これはちょっと難しい？？
まずは、 【番外：壁紙の貼りかた】固定の背景画像をいれる場合 と Q：背景画像と背景色をあわせるには？ を参考にして背景画像をはりつけてください。ここまでだと、たしかにメニュー部分で背景画像がかくれてしまっていますね。
これはちょっと難しい？？
まずは、 【番外：壁紙の貼りかた】固定の背景画像をいれる場合 と Q：背景画像と背景色をあわせるには？ を参考にして背景画像をはりつけてください。ここまでだと、たしかにメニュー部分で背景画像がかくれてしまっていますね。
;)
デザインカスタマイズで/* メニュー */ の中の .menu { ～～～～ } 部分をみてください。
background-color : ?????? ;
というメニュー部分の背景色設定がありますので、?????? （??????には記号や数字やアルファベットが入ってます）を消してしまいます。
表示は background-color : ; こうなります。
すると、あぁら不思議！右図のようにメニュー部分にも背景画像が表示されました。一体感がでてきたでしょう？
※注意点※
文字の色によっては、背景画像に同化してしまい見えにくくなる場合があります。
その場合は文字色をわかりやすく変えた方がいいでしょう。
background-color : ?????? ;
というメニュー部分の背景色設定がありますので、?????? （??????には記号や数字やアルファベットが入ってます）を消してしまいます。
表示は background-color : ; こうなります。
すると、あぁら不思議！右図のようにメニュー部分にも背景画像が表示されました。一体感がでてきたでしょう？
※注意点※
文字の色によっては、背景画像に同化してしまい見えにくくなる場合があります。
その場合は文字色をわかりやすく変えた方がいいでしょう。
;)
どうせだからメニューのヘッダー部分にも背景を表示させたい！そんなあなたには、もうちょっと頑張ってもらいましょう（笑）
/* メニュー */ の中の .menu-header { ～～～～ } 部分にbackground-color : ?????? ;
というメニューヘッダー部分の背景色設定がありますので、?????? を消してしまいます。表示は background-color : ; こうなります。
はい、こんな感じになりました。
ただし、ヘッダーの文字色が白なので、これではまったくわかりません(^o^;
/* メニュー */ の中の .menu-header { ～～～～ } 部分にbackground-color : ?????? ;
というメニューヘッダー部分の背景色設定がありますので、?????? を消してしまいます。表示は background-color : ; こうなります。
はい、こんな感じになりました。
ただし、ヘッダーの文字色が白なので、これではまったくわかりません(^o^;
;)
/* メニュー */ の中の .menu-header { ～～～～ } 部分の文字色をわかりやすい色に変えてください。
color : ?????? ; が文字色の設定です。
この場合、color : #993300 ; と変更してみました。
他の人がみてもわかりやすい色かどうか？みやすいかどうか？そういうこともブログデザインにとって大事なことだと思います。文字の色の番号がわからない人は、わたしがよく利用している「Mariの色えんぴつ」さんで探してみてください。
さぁ、どうでしょう？？すっきりしました？？
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
color : ?????? ; が文字色の設定です。
この場合、color : #993300 ; と変更してみました。
他の人がみてもわかりやすい色かどうか？みやすいかどうか？そういうこともブログデザインにとって大事なことだと思います。文字の色の番号がわからない人は、わたしがよく利用している「Mariの色えんぴつ」さんで探してみてください。
さぁ、どうでしょう？？すっきりしました？？
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-