Blog
2005/02/13のBlog
[ 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-
[ 11:38 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
Q：背景画像をいれてみたけれ背景色とあってません、どうしたらいいでしょう？
単純に右下固定の背景画像のはりつけだと、右の図のように淡いオレンジに画像がはりついてるとモロわかりですね。自然にするにはどうするのか？
【番外：壁紙の貼りかた】固定の背景画像をいれる場合を参考にして、 /* 全体 */の中の body { ～～～～ } 部分に下記の表記を追記しただけだと、右図の状態ですね
background-image: url(http://www.doblog.com/img/○○○○/△△△△.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
単純に右下固定の背景画像のはりつけだと、右の図のように淡いオレンジに画像がはりついてるとモロわかりですね。自然にするにはどうするのか？
【番外：壁紙の貼りかた】固定の背景画像をいれる場合を参考にして、 /* 全体 */の中の body { ～～～～ } 部分に下記の表記を追記しただけだと、右図の状態ですね
background-image: url(http://www.doblog.com/img/○○○○/△△△△.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
;)
■次の作業は、バックに色がついているので、この背景画像のように白背景用ならば背景色を白に、黒背景用の画像ならば黒にすればいいでしょう。そのほうが統一感もでます。
先ほど追記した /* 全体 */ の body { ～～～～ } に
background-color : ?????? ;
という背景色の設定がありますので、?????? の部分（??????には記号や数字やアルファベットが入ってます）に #FFFFFF と入れます。#FFFFFF は白色の色番号、黒の色番号は #000000 です。
ここまでの作業だと見た目はこんな感じです。うまくいきましたか？
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
先ほど追記した /* 全体 */ の body { ～～～～ } に
background-color : ?????? ;
という背景色の設定がありますので、?????? の部分（??????には記号や数字やアルファベットが入ってます）に #FFFFFF と入れます。#FFFFFF は白色の色番号、黒の色番号は #000000 です。
ここまでの作業だと見た目はこんな感じです。うまくいきましたか？
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
[ 10:40 ]
[ デザイン変更用画像 ]
;)
素材は １０minutes さんよりお借りしました
;)
;)
;)
素材は １０minutes さんよりお借りしました
;)
素材は １０minutes さんよりお借りしました
2005/02/11のBlog
[ 20:34 ]
[ 食べる ]
;)
という訳で、本日話題の
牛丼
おくらのゴマ和え
ワカメスープ（昨日の残り）
だぁってぇ！今日はお昼からニュースじゃあ牛丼の話題で持ちきりだったんだもん
こりゃ、食べたくもなりますって（笑）
ということで我が家も牛丼作りました！（笑）
牛丼
おくらのゴマ和え
ワカメスープ（昨日の残り）
だぁってぇ！今日はお昼からニュースじゃあ牛丼の話題で持ちきりだったんだもん
こりゃ、食べたくもなりますって（笑）
ということで我が家も牛丼作りました！（笑）
[ 16:37 ]
[ kazeっぽ写真部 ]
;)
[ 11:51 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
ポップアップ部分をカスタマイズしてみよぉ！！
【コメントをみる】【トラックバックをみる】【訪問者リスト】【ブックマークリスト】【ブックマーカーリスト】など別窓を開いて表示させる部分です
カスタマイズ中には確認できないので注意しましょうね
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* ポップアップ */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）
/*---------------------------------------------*/
/* ポップアップ */
/*---------------------------------------------*/
.blog-popup {
text-align : left ;
padding : 5px ;
margin : 5px ;
border : 2px dotted #999999 ;
background-color : #ffffff ;
clear : both ;
}
.blog-popup-text {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : 75% ;
line-height : 125% ;
}
.blog-popup-text .blog-title-title {
border : none ;
}
.blog-popup-text .list-pagenumber {
display : block ;
border-bottom : solid 1px #808080 ;
padding-bottom : 8px ;
margin-bottom : 5px ;
}
.blog-popup-text input {
width : 450px ;
}
.blog-popup-text textarea {
width : 450px ;
margin-bottom : 10px ;
}
【変更後】
.blog-popup {
text-align : left ;
padding : 5px ;
margin : 5px ;
border : 2px dotted #999999 ;
clear : both ;
background-color : #e0f8e0 ;
}
.blog-popup-text {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : 75% ;
line-height : 125% ;
}
.blog-popup-text .blog-title-title {
border : none ;
}
.blog-popup-text .list-pagenumber {
display : block ;
border-bottom : solid 1px #808080 ;
padding-bottom : 8px ;
margin-bottom : 5px ;
}
.blog-popup-text input {
width : 450px ;
}
.blog-popup-text textarea {
width : 450px ;
margin-bottom : 10px ;
【コメントをみる】【トラックバックをみる】【訪問者リスト】【ブックマークリスト】【ブックマーカーリスト】など別窓を開いて表示させる部分です
カスタマイズ中には確認できないので注意しましょうね
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* ポップアップ */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）
/*---------------------------------------------*/
/* ポップアップ */
/*---------------------------------------------*/
.blog-popup {
text-align : left ;
padding : 5px ;
margin : 5px ;
border : 2px dotted #999999 ;
background-color : #ffffff ;
clear : both ;
}
.blog-popup-text {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : 75% ;
line-height : 125% ;
}
.blog-popup-text .blog-title-title {
border : none ;
}
.blog-popup-text .list-pagenumber {
display : block ;
border-bottom : solid 1px #808080 ;
padding-bottom : 8px ;
margin-bottom : 5px ;
}
.blog-popup-text input {
width : 450px ;
}
.blog-popup-text textarea {
width : 450px ;
margin-bottom : 10px ;
}
【変更後】
.blog-popup {
text-align : left ;
padding : 5px ;
margin : 5px ;
border : 2px dotted #999999 ;
clear : both ;
background-color : #e0f8e0 ;
}
.blog-popup-text {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : 75% ;
line-height : 125% ;
}
.blog-popup-text .blog-title-title {
border : none ;
}
.blog-popup-text .list-pagenumber {
display : block ;
border-bottom : solid 1px #808080 ;
padding-bottom : 8px ;
margin-bottom : 5px ;
}
.blog-popup-text input {
width : 450px ;
}
.blog-popup-text textarea {
width : 450px ;
margin-bottom : 10px ;
;)
■.blog-popup { ～～～ } の変更点
background-color : #e0f8e0 ;
背景色を変えてみました
右図はコメントをみるを表示させてみました
background-color : #e0f8e0 ;
背景色を変えてみました
右図はコメントをみるを表示させてみました
;)
■.blog-popup-text { ～～～ } の変更点
■.blog-popup-text .blog-title-title { ～～～ } の変更点
■.blog-popup-text .list-pagenumber { ～～～ } の変更点
■.blog-popup-text input { ～～～ } の変更点
■.blog-popup-text textarea { ～～～ } の変更点
変更なし
【トラックバックをみる】はこんな感じになります
■.blog-popup-text .blog-title-title { ～～～ } の変更点
■.blog-popup-text .list-pagenumber { ～～～ } の変更点
■.blog-popup-text input { ～～～ } の変更点
■.blog-popup-text textarea { ～～～ } の変更点
変更なし
【トラックバックをみる】はこんな感じになります
;)
【訪問者リスト】はこんな感じ
ブックマークリストもブックマーカーリストも同様です
見た目が確認できないので、いじるときは気をつけてくださいね
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
ブックマークリストもブックマーカーリストも同様です
見た目が確認できないので、いじるときは気をつけてくださいね
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-