Blog
2005/02/08のBlog
[ 23:36 ]
[ 食べる ]
;)
けんちん汁
大根とホタテのサラダ
ホコホコあったまりました
こんにゃくは手でちぎってみたよ（笑）
お豆腐に味がしみててんまかったなー
大根とホタテのサラダ
ホコホコあったまりました
こんにゃくは手でちぎってみたよ（笑）
お豆腐に味がしみててんまかったなー
[ 18:48 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
私が一番いじりたかった場所
統一されてるけど全体のデザインから考えると浮いてる感じがしてとにかくシンプルにしたかった！（笑）
でも、ないと不便（笑）
ということで右の図の矢印部分をなんとかしてみましょう！！
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* Doblogヘッダー */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）
/*---------------------------------------------*/
/* Doblogヘッダー */
/*---------------------------------------------*/
.mydoblog-position form table {
color : #ffffff ;
width : 760px ;
padding : ;
border : ;
background-image : url("/image/mypage/mypage_bg_header.gif") ;
background-position : right ;
}
.mydoblog-position form td {
padding-left : 10px ;
text-align : left ;
}
.mydoblog-position A.portalbar:link {
color : #ffffff ;
text-decoration : none ;
}
.mydoblog-position A.portalbar:active {
color : #ffffff ;
text-decoration : none ;
}
.mydoblog-position A.portalbar:visited {
color : #ffffff ;
text-decoration : none ;
}
.mydoblog-position A.portalbar:hover {
color: #FF0000 ;
text-decoration : none ;
}
/*---------------------------------------------*/
【変更後】
.mydoblog-position form table { background-image : none ;
background-color: #ffffff ;
}
.mydoblog-position form td {
padding-left : 10px ;
text-align : right ;
}
.mydoblog-position A.portalbar:link {
color : #008080 ;
text-decoration : none ;
}
.mydoblog-position A.portalbar:active {
color : #008080 ;
}
.mydoblog-position A.portalbar:visited {
color : #008080 ;
}
.mydoblog-position A.portalbar:hover {
color: #FF0000 ;
text-decoration : underline ;
background-color: #ffffff ;
}
統一されてるけど全体のデザインから考えると浮いてる感じがしてとにかくシンプルにしたかった！（笑）
でも、ないと不便（笑）
ということで右の図の矢印部分をなんとかしてみましょう！！
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* Doblogヘッダー */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）
/*---------------------------------------------*/
/* Doblogヘッダー */
/*---------------------------------------------*/
.mydoblog-position form table {
color : #ffffff ;
width : 760px ;
padding : ;
border : ;
background-image : url("/image/mypage/mypage_bg_header.gif") ;
background-position : right ;
}
.mydoblog-position form td {
padding-left : 10px ;
text-align : left ;
}
.mydoblog-position A.portalbar:link {
color : #ffffff ;
text-decoration : none ;
}
.mydoblog-position A.portalbar:active {
color : #ffffff ;
text-decoration : none ;
}
.mydoblog-position A.portalbar:visited {
color : #ffffff ;
text-decoration : none ;
}
.mydoblog-position A.portalbar:hover {
color: #FF0000 ;
text-decoration : none ;
}
/*---------------------------------------------*/
【変更後】
.mydoblog-position form table { background-image : none ;
background-color: #ffffff ;
}
.mydoblog-position form td {
padding-left : 10px ;
text-align : right ;
}
.mydoblog-position A.portalbar:link {
color : #008080 ;
text-decoration : none ;
}
.mydoblog-position A.portalbar:active {
color : #008080 ;
}
.mydoblog-position A.portalbar:visited {
color : #008080 ;
}
.mydoblog-position A.portalbar:hover {
color: #FF0000 ;
text-decoration : underline ;
background-color: #ffffff ;
}
;)
■.mydoblog-position form table { ～～～ }の変更点
background-image : none ;
Doblogヘッダーの背景画像を消してしまいます
色とか背景画像（ドブログってロゴのあるグレーのグラデーション）とか幅とかいっぱい書いてありますが全部削除してしまいました
■.mydoblog-position form td { ～～～ }の変更点
text-align : right ;
テキストの場所をどこにするのか？私は右寄せにしてみました
ログアウトボタンも一緒に移動します
あ！真っ白になっちゃった！！大丈夫、慌てなくていいです（笑）
この状態でも一応ポイントあわせるとこうやって色が変わって使用はできます←そんなでいいのかぁ！！（笑）
background-image : none ;
Doblogヘッダーの背景画像を消してしまいます
色とか背景画像（ドブログってロゴのあるグレーのグラデーション）とか幅とかいっぱい書いてありますが全部削除してしまいました
■.mydoblog-position form td { ～～～ }の変更点
text-align : right ;
テキストの場所をどこにするのか？私は右寄せにしてみました
ログアウトボタンも一緒に移動します
あ！真っ白になっちゃった！！大丈夫、慌てなくていいです（笑）
この状態でも一応ポイントあわせるとこうやって色が変わって使用はできます←そんなでいいのかぁ！！（笑）
;)
■.mydoblog-position A.portalbar:link { ～～～ } の変更点
color : #008080 ;
リンクされている文字の色の設定です
基本は白に設定されていたので全体のリンクの文字色と一緒にしました
■.mydoblog-position A.portalbar:active { ～～～ } の変更点
color : #008080 ;
リンクをクリックした時の文字の色の設定です
基本は白だったのでこれも全体のリンクの色と統一させました
text-decoration の部分はあってもなくても一緒みたいなんで思い切って削除
ここまでやってみるとこんな感じリンクをクリックしたことのあるものはまだ真っ白ですねぇ
ポイントをあわせるとちゃんと表示されますけど、見た目はこんな感じです（右上の図）
color : #008080 ;
リンクされている文字の色の設定です
基本は白に設定されていたので全体のリンクの文字色と一緒にしました
■.mydoblog-position A.portalbar:active { ～～～ } の変更点
color : #008080 ;
リンクをクリックした時の文字の色の設定です
基本は白だったのでこれも全体のリンクの色と統一させました
text-decoration の部分はあってもなくても一緒みたいなんで思い切って削除
ここまでやってみるとこんな感じリンクをクリックしたことのあるものはまだ真っ白ですねぇ
ポイントをあわせるとちゃんと表示されますけど、見た目はこんな感じです（右上の図）
;)
■.mydoblog-position A.portalbar:visited { ～～～ }の変更点
color : #008080 ;
訪れたコトのあるリンクの文字色の設定
基本の状態だと白なんで他のリンクの文字色と統一させてみました
text-decoration : none ;の部分は削除してみた
ここまでで見た目はこんな感じになりましたすっきりでしょ？表示はこんな感じですね
color : #008080 ;
訪れたコトのあるリンクの文字色の設定
基本の状態だと白なんで他のリンクの文字色と統一させてみました
text-decoration : none ;の部分は削除してみた
ここまでで見た目はこんな感じになりましたすっきりでしょ？表示はこんな感じですね
;)
■.mydoblog-position A.portalbar:hover { ～～～ } の変更点
text-decoration : underline ;
リンクにポイントをあわせた時、色は赤のまま下線がでるようにする設定を追記してみたbackground-color: #ffffff ;
基本の設定ではグレーに反転していましたが、背景色を白にしたのでポイントあわせてもすっきりです
さぁ、ここまですべての作業を終えるとこんな感じになりました
ちょっと手間がかかりますがブログの全体のデザインとの統一感がこれで出せると思います
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
text-decoration : underline ;
リンクにポイントをあわせた時、色は赤のまま下線がでるようにする設定を追記してみたbackground-color: #ffffff ;
基本の設定ではグレーに反転していましたが、背景色を白にしたのでポイントあわせてもすっきりです
さぁ、ここまですべての作業を終えるとこんな感じになりました
ちょっと手間がかかりますがブログの全体のデザインとの統一感がこれで出せると思います
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
[ 17:32 ]
[ doblogカスタマイズＱ＆Ａ ]
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /*フォーム*/ があります
変更前の記述は↓↓↓（シンプルデザイン使用）/*---------------------------------------------*/
/* フォーム */
/*---------------------------------------------*/
form {
margin : 0px ;
}
input {
}
textarea {
}
/*---------------------------------------------*/
多分、簡単な変更程度ならいじる必要はないかと思います
私も、フォームはさわらずにやっていますので・・・(^o^;
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /*フォーム*/ があります
変更前の記述は↓↓↓（シンプルデザイン使用）/*---------------------------------------------*/
/* フォーム */
/*---------------------------------------------*/
form {
margin : 0px ;
}
input {
}
textarea {
}
/*---------------------------------------------*/
多分、簡単な変更程度ならいじる必要はないかと思います
私も、フォームはさわらずにやっていますので・・・(^o^;
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
[ 02:03 ]
[ doblogカスタマイズＱ＆Ａ ]
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* リンク */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）/*---------------------------------------------*/
/* リンク */
/*---------------------------------------------*/
a:link {
color : #003366 ;
}
a:active {
color : #003366 ;
}
a:visited {
color : #003366 ;
}
a:hover {
color : #FF0000 ;
}
.blog-scene img {
border : solid 1px #FF0000 ;
}
/*---------------------------------------------*/
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* リンク */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）/*---------------------------------------------*/
/* リンク */
/*---------------------------------------------*/
a:link {
color : #003366 ;
}
a:active {
color : #003366 ;
}
a:visited {
color : #003366 ;
}
a:hover {
color : #FF0000 ;
}
.blog-scene img {
border : solid 1px #FF0000 ;
}
/*---------------------------------------------*/
;)
リンクの色を自分の好きな色に変えてみよー！！
シンプルデザインのテンプレートだとリンクの色は紺色
画像の周りは赤いリンクのふちどりがでてますね
右の画像はシンプルデザインの変更前の画像です
さぁ、色を変えていくとどうなるのでしょう？？？楽しみです
色の№なんかはいろんなサイトで調べることが出来ますよ
ちなみに私は『Mari のいろえんぴつ』さんのカラーチャートをよく参考にしています【変更後】
a:link {
color : #008080 ;
}
a:active {
color : #008080 ;
}
a:visited {
color : #008080 ;
}
a:hover {
color : #FF0000 ;
text-decoration : underline ;
}
.blog-scene img {
border-style : none ;
}
a { text-decoration : none ; }
シンプルデザインのテンプレートだとリンクの色は紺色
画像の周りは赤いリンクのふちどりがでてますね
右の画像はシンプルデザインの変更前の画像です
さぁ、色を変えていくとどうなるのでしょう？？？楽しみです
色の№なんかはいろんなサイトで調べることが出来ますよ
ちなみに私は『Mari のいろえんぴつ』さんのカラーチャートをよく参考にしています【変更後】
a:link {
color : #008080 ;
}
a:active {
color : #008080 ;
}
a:visited {
color : #008080 ;
}
a:hover {
color : #FF0000 ;
text-decoration : underline ;
}
.blog-scene img {
border-style : none ;
}
a { text-decoration : none ; }
;)
■a:link { ～～～ } の変更点
a:link { color : #008080 ; }
リンクの色を #003366 から #008080 にしてみる
（訪れたことのないリンクの色はこれで表示されるのかな？？）
■a:active { ～～～ } の変更点
a:active { color : #008080 ; }
activeの色を #003366 から #008080 にしてみる
（見た目はあんまり変わらない？？？あれ？？？)
クリックした時の色みたいです←ｋｊ兄貴サンクス
■a:visited { ～～～ }の変更点
a:visited { color : #008080 ; }
visited の色を #003366 から #008080 にしてみる
（訪れたことのあるリンクの色はこれで表示されるのかな？？）
■a:hover { ～～～ }の変更点
text-decoration : underline ;
a:hover の色はそのまま、アンダーライン（下線）が出るようにしてみる
ポイントをあわせると色がかわる設定
■.blog-scene img { ～～～ }の変更点
.blog-scene img { border-style : none ; }
画像の周りにあるボーダーをなくします
（写真をアップしたときに周りのふちどりが気になって、それをなくしたかったのでこういう記述になりました）
■追記分
a { text-decoration : none ; }
リンクの文字の装飾はなくします？？？？だっけかな？？
リンクの下線を消しました←ｋｊ兄貴の指摘で思い出した（笑）
さぁ、全部変更したらこんな感じになりました
リンクの色が統一されているので色を変えるだけで淡い感じにも、しっかりした感じにもなると思います
私はリンクの下線が鬱陶しかったので消しましたけど、その辺はお好みでやってみてください
好きな色に設定してみると、結構楽しいですよ
＃2005/02/08 追記訂正＃
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
a:link { color : #008080 ; }
リンクの色を #003366 から #008080 にしてみる
（訪れたことのないリンクの色はこれで表示されるのかな？？）
■a:active { ～～～ } の変更点
a:active { color : #008080 ; }
activeの色を #003366 から #008080 にしてみる
（見た目はあんまり変わらない？？？あれ？？？)
クリックした時の色みたいです←ｋｊ兄貴サンクス
■a:visited { ～～～ }の変更点
a:visited { color : #008080 ; }
visited の色を #003366 から #008080 にしてみる
（訪れたことのあるリンクの色はこれで表示されるのかな？？）
■a:hover { ～～～ }の変更点
text-decoration : underline ;
a:hover の色はそのまま、アンダーライン（下線）が出るようにしてみる
ポイントをあわせると色がかわる設定
■.blog-scene img { ～～～ }の変更点
.blog-scene img { border-style : none ; }
画像の周りにあるボーダーをなくします
（写真をアップしたときに周りのふちどりが気になって、それをなくしたかったのでこういう記述になりました）
■追記分
a { text-decoration : none ; }
リンクの文字の装飾はなくします？？？？だっけかな？？
リンクの下線を消しました←ｋｊ兄貴の指摘で思い出した（笑）
さぁ、全部変更したらこんな感じになりました
リンクの色が統一されているので色を変えるだけで淡い感じにも、しっかりした感じにもなると思います
私はリンクの下線が鬱陶しかったので消しましたけど、その辺はお好みでやってみてください
好きな色に設定してみると、結構楽しいですよ
＃2005/02/08 追記訂正＃
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
[ 01:54 ]
[ doblogカスタマイズＱ＆Ａ ]
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* 全体 */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）
/*---------------------------------------------*/
/* 全体 */
/*---------------------------------------------*/
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
.mydoblog-position {
text-align : left ;
width : 760px ;
position : absolute ;
left : 50% ;
margin : 0px 0px 0px -380px ;
border : ;
background-color : #ffffff ;
}
.mydoblog-contents {
margin : 25px 0px 0px 0px ;
}
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size : 8pt ;
border : ;
width : 100% ;
}
/*---------------------------------------------*/
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* 全体 */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）
/*---------------------------------------------*/
/* 全体 */
/*---------------------------------------------*/
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
.mydoblog-position {
text-align : left ;
width : 760px ;
position : absolute ;
left : 50% ;
margin : 0px 0px 0px -380px ;
border : ;
background-color : #ffffff ;
}
.mydoblog-contents {
margin : 25px 0px 0px 0px ;
}
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size : 8pt ;
border : ;
width : 100% ;
}
/*---------------------------------------------*/
;)
■ body { ～～～～ } 部分の変更
背景画像を右下の固定にする
（ 【番外：壁紙の貼りかた】固定の背景画像をいれる場合 参照）
背景の色をグレーから白に変更する
【変更後】
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #ffffff ;
background-image: url(http://www.doblog.com/img/●●●●/△△△△.jpg);
background-repeat: no-repeat ;
background-position: right bottom ;
background-attachment: fixed ;
text-align : left ;
margin-top : 0px ;
margin-bottom : 10px ;
}
background-color : #ffffff ;
ブログの全体の背景色を #dddddd から #ffffff に変更
background-image: url(http://www.doblog.com/img/●●●●/△△△△.jpg);
背景画像のURLを指定（画像のアップの仕方は⇒ココ）
background-repeat: no-repeat;
背景画像を繰り返さない指定
background-position: right bottom;
背景画像を右下にする指定
background-attachment: fixed;
背景画像を固定させる指定
text-align : left ;
テキストを左寄せの指定？？・・・・・だったと思うのです・・・ちょっと不安
（誰かヘルプミー！！！）
ブログの記事とバックの色が同じ色になったのでちょっとすっきり感がでましたね
背景画像を右下の固定にする
（ 【番外：壁紙の貼りかた】固定の背景画像をいれる場合 参照）
背景の色をグレーから白に変更する
【変更後】
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #ffffff ;
background-image: url(http://www.doblog.com/img/●●●●/△△△△.jpg);
background-repeat: no-repeat ;
background-position: right bottom ;
background-attachment: fixed ;
text-align : left ;
margin-top : 0px ;
margin-bottom : 10px ;
}
background-color : #ffffff ;
ブログの全体の背景色を #dddddd から #ffffff に変更
background-image: url(http://www.doblog.com/img/●●●●/△△△△.jpg);
背景画像のURLを指定（画像のアップの仕方は⇒ココ）
background-repeat: no-repeat;
背景画像を繰り返さない指定
background-position: right bottom;
背景画像を右下にする指定
background-attachment: fixed;
背景画像を固定させる指定
text-align : left ;
テキストを左寄せの指定？？・・・・・だったと思うのです・・・ちょっと不安
（誰かヘルプミー！！！）
ブログの記事とバックの色が同じ色になったのでちょっとすっきり感がでましたね
;)
■mydoblog-position { ～～～ } 部分の変更
基本の設定ではブログ全体がセンターにくるように
body の text-align で ブログの左端を center に指定
mydoblog-position で 左を 50% の指定
左へ -380px に左端を設定
という処理をしているようです
私はあまりセンター表示に拘らないのでシンプルに左からどのくらい離すかだけ設定しました【変更後】
.mydoblog-position {
text-align : left ;
width : 760px ;
position : absolute ;
margin : 0px 0px 0px 50px
background-color : ;;
}
margin : 0px 0px 0px 50px ;
ブログの設置場所を設定
上・右・下・左の順番になっています
左から 50px に左端がくるようになりました
border : ;
指定がないので削除しちゃった（笑）
background-color : ;
背景画像を透かしたかったので色を設定しませんでした
ちょっと左よりだけれどウィンドウをスクロールさせなくてもいいくらいの大きさでバランスがいいんじゃないかなって思います
※モバイルなんかで見ると、基本の設定の -380px に左端を設定すると左端が２文字くらい読めないこともあったりします。表示しきれないブラウザもあるんですかねぇ？？そういうの見ないと気がつかないけれど、やっぱりどんなもので見てもちゃんと表示させたいと思うのです
PCで見る分には問題ないですよ
■mydoblog-contents { ～～～ } 部分
.mydoblog-contents {
margin : 25px 0px 0px 0px ;
}いじってませーん（笑）
■footer { ～～～ } 部分の変更
【変更後】
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size : 8pt ;
width : 100% ;
}border : ;
指定がないから削除しましたー
長文になりましたが全体部分のカスタマイズはこんな感じでやっていけばいいと思います
基本の分なんでそんなに見た目が大変わりしないとは思いますが、背景画像なんかはここで変更させますので覚えておいた方がいいかもしれませんね。
では、頑張ってください
※どこか間違っているところあれば、どうぞご指摘ください
※わからないなりにやってきて、これを変えれば、見た目がこう変わるみたい・・・くらいの理解しかできていないので詳しく教えていただけるととてもありがたいです<(_ _)>
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
基本の設定ではブログ全体がセンターにくるように
body の text-align で ブログの左端を center に指定
mydoblog-position で 左を 50% の指定
左へ -380px に左端を設定
という処理をしているようです
私はあまりセンター表示に拘らないのでシンプルに左からどのくらい離すかだけ設定しました【変更後】
.mydoblog-position {
text-align : left ;
width : 760px ;
position : absolute ;
margin : 0px 0px 0px 50px
background-color : ;;
}
margin : 0px 0px 0px 50px ;
ブログの設置場所を設定
上・右・下・左の順番になっています
左から 50px に左端がくるようになりました
border : ;
指定がないので削除しちゃった（笑）
background-color : ;
背景画像を透かしたかったので色を設定しませんでした
ちょっと左よりだけれどウィンドウをスクロールさせなくてもいいくらいの大きさでバランスがいいんじゃないかなって思います
※モバイルなんかで見ると、基本の設定の -380px に左端を設定すると左端が２文字くらい読めないこともあったりします。表示しきれないブラウザもあるんですかねぇ？？そういうの見ないと気がつかないけれど、やっぱりどんなもので見てもちゃんと表示させたいと思うのです
PCで見る分には問題ないですよ
■mydoblog-contents { ～～～ } 部分
.mydoblog-contents {
margin : 25px 0px 0px 0px ;
}いじってませーん（笑）
■footer { ～～～ } 部分の変更
【変更後】
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size : 8pt ;
width : 100% ;
}border : ;
指定がないから削除しましたー
長文になりましたが全体部分のカスタマイズはこんな感じでやっていけばいいと思います
基本の分なんでそんなに見た目が大変わりしないとは思いますが、背景画像なんかはここで変更させますので覚えておいた方がいいかもしれませんね。
では、頑張ってください
※どこか間違っているところあれば、どうぞご指摘ください
※わからないなりにやってきて、これを変えれば、見た目がこう変わるみたい・・・くらいの理解しかできていないので詳しく教えていただけるととてもありがたいです<(_ _)>
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
[ 01:53 ]
[ doblogカスタマイズＱ＆Ａ ]
スタイルシートっていうほどのものでもないのですが・・・・
私が、CSSをいじってみたところをちょっと公表してみようと思います。
よろしかったら、一緒に簡単なところからいじってみませんか？？
私も最初は何をいじればどうなるのか全然わからなかったけれど
少しずつ変えてみて、記述を変えたらここが変わるってひとつずつ
確認しながらやってみたのでそんな感じでやってみてもいいんじゃないかな？
では、うちの基本のテンプレートから
Doblogさんから提供されているシンプルデザインというのを利用してます
これをちょっと変形させてるだけです
基本からどこを変えているのか、変えたら見た目がどうかわるのか？
一つずつ確認していきましょう
１：全体の変更点
２：リンクの変更点
３：フォームの変更点
４：Doblogヘッダーの変更点
５：ページタイトルの変更点
６：メニューの変更点
７：カレンダーの変更点
８：記事の変更点－【その１】－【その２】－【その３】
９：ポップアップの変更点
番外：壁紙の貼りかた-基本形
-固定の背景画像をいれる場合
-全体に繰り返し背景画像をいれる場合
-横方向に繰り返し背景画像をいれる場合
-縦方向に繰り返し背景画像をいれる場合
＃記事をアップ次第リンクしていきます＃
自分のデザインカスタマイズを開いて確認しながらやってみたらいいと思います
ただし、バックアップはかならず取っておいた方がいいですよ
メモ帳でもいいですし、失敗してもすぐに戻れるようにしておかないと怖くていじれませんからね（笑）
では、ちょっとずつ頑張りましょう！！
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
■参考にさせていただいたBlog■
『 どぶさぽちゃんv - どぶちゃん助け合い書き込み寺 - 』（どぶさぽちゃん）
未だにわからないいじり方なんかはこっそり勉強させていただいてます
『 MY CSS DESIGN ~ ヒヨコ君増殖中 』（kazusiblogさん）
丁寧に教えて下さっているので、この配置はどうするんだろう？なんてときに勉強させていただいてます
『 短時間睡眠日記 ドラクエ 超合金DX 』（渦ちゃん）
こまかい技が多いので参考になります。テンプレも配布されてますよ
『 メガネロック 』（kj兄貴）
以前の真っ白のブログが印象的で削るだけ削るにはどうすればいいのか勉強になりました（笑）
私が、CSSをいじってみたところをちょっと公表してみようと思います。
よろしかったら、一緒に簡単なところからいじってみませんか？？
私も最初は何をいじればどうなるのか全然わからなかったけれど
少しずつ変えてみて、記述を変えたらここが変わるってひとつずつ
確認しながらやってみたのでそんな感じでやってみてもいいんじゃないかな？
では、うちの基本のテンプレートから
Doblogさんから提供されているシンプルデザインというのを利用してます
これをちょっと変形させてるだけです
基本からどこを変えているのか、変えたら見た目がどうかわるのか？
一つずつ確認していきましょう
１：全体の変更点
２：リンクの変更点
３：フォームの変更点
４：Doblogヘッダーの変更点
５：ページタイトルの変更点
６：メニューの変更点
７：カレンダーの変更点
８：記事の変更点－【その１】－【その２】－【その３】
９：ポップアップの変更点
番外：壁紙の貼りかた-基本形
-固定の背景画像をいれる場合
-全体に繰り返し背景画像をいれる場合
-横方向に繰り返し背景画像をいれる場合
-縦方向に繰り返し背景画像をいれる場合
＃記事をアップ次第リンクしていきます＃
自分のデザインカスタマイズを開いて確認しながらやってみたらいいと思います
ただし、バックアップはかならず取っておいた方がいいですよ
メモ帳でもいいですし、失敗してもすぐに戻れるようにしておかないと怖くていじれませんからね（笑）
では、ちょっとずつ頑張りましょう！！
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
■参考にさせていただいたBlog■
『 どぶさぽちゃんv - どぶちゃん助け合い書き込み寺 - 』（どぶさぽちゃん）
未だにわからないいじり方なんかはこっそり勉強させていただいてます
『 MY CSS DESIGN ~ ヒヨコ君増殖中 』（kazusiblogさん）
丁寧に教えて下さっているので、この配置はどうするんだろう？なんてときに勉強させていただいてます
『 短時間睡眠日記 ドラクエ 超合金DX 』（渦ちゃん）
こまかい技が多いので参考になります。テンプレも配布されてますよ
『 メガネロック 』（kj兄貴）
以前の真っ白のブログが印象的で削るだけ削るにはどうすればいいのか勉強になりました（笑）
[ 00:07 ]
[ 食べる ]
;)
アーリオ・オーリオ
タマネギとイタリアンパセリと赤パプリカ入り
彩りはキレイになったね
もちょっとニンニク効いてもよかったな（笑）
タマネギとイタリアンパセリと赤パプリカ入り
彩りはキレイになったね
もちょっとニンニク効いてもよかったな（笑）
2005/02/07のBlog
[ 23:33 ]
ログインできなーい！
コメント書けなーい！
サバ落ち攻撃に涙ちょちょ切れ
ちまちま携帯からアクセスしてみる
無事に送信出来るでしょうか？
今日の晩ご飯は明日だなぁトホホ
コメント書けなーい！
サバ落ち攻撃に涙ちょちょ切れ
ちまちま携帯からアクセスしてみる
無事に送信出来るでしょうか？
今日の晩ご飯は明日だなぁトホホ
[ 22:48 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
まずは壁紙の貼りかたから
■手順その１：画像のアップ
記事の作成画面をたちあげます。
壁紙にしたい画像をイメージのファイルで参照ボタン（図の矢印部分）を押し、自分のPC内の壁紙用の画像を選択します
どこかのフリーの画像を利用するのであれば、きちんと利用規約を読んで対応してくださいね
（画像は自分のPCに取り込んでから使用してくださいとか、直リンク禁止とか、借りたサイトへ借りてますと明記してくれとか、サイトへリンクをページ中ではってくれとか色々ありますので注意しましょう）
そして、記事を送信します
※【記事を下書き保存する】を選ぶと他の人にはその記事を見ることができません※
※【記事を公開する】を選ぶとどなたでもその記事を見ることができます※
■手順その１：画像のアップ
記事の作成画面をたちあげます。
壁紙にしたい画像をイメージのファイルで参照ボタン（図の矢印部分）を押し、自分のPC内の壁紙用の画像を選択します
どこかのフリーの画像を利用するのであれば、きちんと利用規約を読んで対応してくださいね
（画像は自分のPCに取り込んでから使用してくださいとか、直リンク禁止とか、借りたサイトへ借りてますと明記してくれとか、サイトへリンクをページ中ではってくれとか色々ありますので注意しましょう）
そして、記事を送信します
※【記事を下書き保存する】を選ぶと他の人にはその記事を見ることができません※
※【記事を公開する】を選ぶとどなたでもその記事を見ることができます※
;)
■手順その２：アップされた記事から画像のページを開く
ページの更新をすればアップされた記事が確認できます
画像の記事をまず表示させてください
画像の部分（図の矢印部分）をクリックします
すると新しくウィンドウが開き、画像のページがみれます
ページの更新をすればアップされた記事が確認できます
画像の記事をまず表示させてください
画像の部分（図の矢印部分）をクリックします
すると新しくウィンドウが開き、画像のページがみれます
;)
画像のページはこんな感じ
必要なのはそのアドレス＝URL（図の矢印部分）です
こんな風なアドレスになってます
http://img.doblog.com/●/○/▲/△.ファイル拡張子
●には、数字
○には、uあなたのブログ№
▲には、数字
△には、画像の№？が入っているはずです
若干表記が違う場合があるかもしれませんが、こんな感じのURLだと思います
※2007/08/30 文面が古かったので現在のＵＲＬ表記の説明に修正しました※
必要なのはそのアドレス＝URL（図の矢印部分）です
こんな風なアドレスになってます
http://img.doblog.com/●/○/▲/△.ファイル拡張子
●には、数字
○には、uあなたのブログ№
▲には、数字
△には、画像の№？が入っているはずです
若干表記が違う場合があるかもしれませんが、こんな感じのURLだと思います
※2007/08/30 文面が古かったので現在のＵＲＬ表記の説明に修正しました※
■手順その３：デザインカスタマイズで背景画像を表示させる
まず、ログインした状態でデザインカスタマイズをクリックしてみてください
すると、下記のような訳のわからない文字がずらずらずらーーーーと並んでいます
ちなみに下に表示されているのはシンプルデザインの全体の部分のCSSデータです
/*---------------------------------------------*/
/* 全体 */
/*---------------------------------------------*/
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
.mydoblog-position {
text-align : left ;
width : 760px ;
position : absolute ;
left : 50% ;
margin : 0px 0px 0px -380px ;
border : ;
background-color : #ffffff ;
}
.mydoblog-contents {
margin : 25px 0px 0px 0px ;
}
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size : 8pt ;
border : ;
width : 100% ;
}
/*---------------------------------------------*/
背景画像を表示させるためには一番上の body{ ～～～～ } の部分に背景画像のアドレス＝URL（手順その２の記述参照）と画像を入れたい場所（右上とか右下とか左下とか固定にするかどうかなど）を指定してやらなければいけません
では、色んなカタチの背景画像の設定をやってみましょう
実践編はこちら
固定の背景画像をいれる場合
全体に繰り返し背景画像をいれる場合
横方向に繰り返し背景画像をいれる場合
縦方向に繰り返し背景画像をいれる場合
Q：背景画像と背景色をあわせるには？
Q：背景画像がメニュー部分にかくれてしまいます
Q：背景画像が記事部分にかくれてしまいます
Q：背景画像をうっすらと透かすにはどうするの？
Q：記事の部分にワンポイントの背景画像をいれるには？
Q：記事部分に大きめのワンポイント画像を背景にしたい
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
■非常に参考になったblog■
『 MY CSS DESIGN ~ ヒヨコ君増殖中 』（kazusiblogさん）の
第4回ヒヨコ君の適当CSS講座 (背景画像編）
■個人的応援企画■
『どぶさぽちゃんv - どぶちゃん助け合い書き込み寺 - 』
掲示板Q&A記録帳 ■ リスト ■ '05/02/07更新
↑↑↑
Doblogについてわからないことがあったらここに書きこんでみてください
私よりよーっぽどよくご存知の方がいろんなこと教えてくださると思います(^o^;
まず、ログインした状態でデザインカスタマイズをクリックしてみてください
すると、下記のような訳のわからない文字がずらずらずらーーーーと並んでいます
ちなみに下に表示されているのはシンプルデザインの全体の部分のCSSデータです
/*---------------------------------------------*/
/* 全体 */
/*---------------------------------------------*/
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
.mydoblog-position {
text-align : left ;
width : 760px ;
position : absolute ;
left : 50% ;
margin : 0px 0px 0px -380px ;
border : ;
background-color : #ffffff ;
}
.mydoblog-contents {
margin : 25px 0px 0px 0px ;
}
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size : 8pt ;
border : ;
width : 100% ;
}
/*---------------------------------------------*/
背景画像を表示させるためには一番上の body{ ～～～～ } の部分に背景画像のアドレス＝URL（手順その２の記述参照）と画像を入れたい場所（右上とか右下とか左下とか固定にするかどうかなど）を指定してやらなければいけません
では、色んなカタチの背景画像の設定をやってみましょう
実践編はこちら
固定の背景画像をいれる場合
全体に繰り返し背景画像をいれる場合
横方向に繰り返し背景画像をいれる場合
縦方向に繰り返し背景画像をいれる場合
Q：背景画像と背景色をあわせるには？
Q：背景画像がメニュー部分にかくれてしまいます
Q：背景画像が記事部分にかくれてしまいます
Q：背景画像をうっすらと透かすにはどうするの？
Q：記事の部分にワンポイントの背景画像をいれるには？
Q：記事部分に大きめのワンポイント画像を背景にしたい
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
■非常に参考になったblog■
『 MY CSS DESIGN ~ ヒヨコ君増殖中 』（kazusiblogさん）の
第4回ヒヨコ君の適当CSS講座 (背景画像編）
■個人的応援企画■
『どぶさぽちゃんv - どぶちゃん助け合い書き込み寺 - 』
掲示板Q&A記録帳 ■ リスト ■ '05/02/07更新
↑↑↑
Doblogについてわからないことがあったらここに書きこんでみてください
私よりよーっぽどよくご存知の方がいろんなこと教えてくださると思います(^o^;
[ 16:14 ]
[ doblogカスタマイズＱ＆Ａ ]
まず、ログインした状態でデザインカスタマイズをクリックしてみてください
すると、下記のような訳のわからない文字がずらずらずらーーーーと並んでいます
今回変更する場所は
/*---------------------------------------------*/
/* 全体 */
/*---------------------------------------------*/
と書いてある部分の中で body { ～～～～ } と括られている部分のみです
シンプルデザインのテンプレートを利用した場合で考えていきましょう
【変更前】
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
右下固定の背景画像をいれる場合はこのように記述します
【変更後】
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
background-image: url("http://img.doblog.com/～中略～.ファイル拡張子");
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
http://img.doblog.com/～中略～.ファイル拡張子
↑↑↑
これは背景画像のURLをいれてくださいね♪
背景画像のＵＲＬがわからない人は ⇒ 【番外：壁紙の貼りかた】 の手順１・手順２を参照
すると、下記のような訳のわからない文字がずらずらずらーーーーと並んでいます
今回変更する場所は
/*---------------------------------------------*/
/* 全体 */
/*---------------------------------------------*/
と書いてある部分の中で body { ～～～～ } と括られている部分のみです
シンプルデザインのテンプレートを利用した場合で考えていきましょう
【変更前】
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
右下固定の背景画像をいれる場合はこのように記述します
【変更後】
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
background-image: url("http://img.doblog.com/～中略～.ファイル拡張子");
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
http://img.doblog.com/～中略～.ファイル拡張子
↑↑↑
これは背景画像のURLをいれてくださいね♪
背景画像のＵＲＬがわからない人は ⇒ 【番外：壁紙の貼りかた】 の手順１・手順２を参照
;)
変更した部分は太字の部分のみ追記しただけです
すると表示画面はこんな感じになります
background-image: url("http://img.doblog.com/～中略～.ファイル拡張子");
↑↑↑
背景画像のURLはここにあるよ！という指定
background-repeat: no-repeat;
↑↑↑
背景画像を繰り返しますか？いいえ繰り返しませんという指定
background-position: right bottom;
↑↑↑
背景画像の場所はどこにしますか？右の下にするよという指定
background-attachment: fixed;
↑↑↑
背景画像をスクロールさせるの？固定させるの？固定させますという指定
すると表示画面はこんな感じになります
background-image: url("http://img.doblog.com/～中略～.ファイル拡張子");
↑↑↑
背景画像のURLはここにあるよ！という指定
background-repeat: no-repeat;
↑↑↑
背景画像を繰り返しますか？いいえ繰り返しませんという指定
background-position: right bottom;
↑↑↑
背景画像の場所はどこにしますか？右の下にするよという指定
background-attachment: fixed;
↑↑↑
背景画像をスクロールさせるの？固定させるの？固定させますという指定
;)
こういう作業をしたわけです
ちょっと難しかったですかね？
では、次は 左下固定の背景画像をいれる場合 をやってみましょう
左下固定の背景画像をいれる場合はこのように記述します
【変更後】
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
background-image: url("http://img.doblog.com/～中略～.ファイル拡張子");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
ちょっと難しかったですかね？
では、次は 左下固定の背景画像をいれる場合 をやってみましょう
左下固定の背景画像をいれる場合はこのように記述します
【変更後】
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
background-image: url("http://img.doblog.com/～中略～.ファイル拡張子");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
;)
右上固定の背景画像をいれる場合はこのように記述します
【変更後】
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
background-image: url("http://img.doblog.com/～中略～.ファイル拡張子");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
;)
左上固定の背景画像をいれる場合はこのように記述します
【変更後】
body {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
color : #000000 ;
background-color : #dddddd ;
background-image: url("http://img.doblog.com/～中略～.ファイル拡張子");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
}
というように固定された背景画像の上下左右はこのような記述で設定することができます
ただ、このままだと重なってしまってせっかくの画像がかくれてしまいますね・・・
かくれないようにするにはどうするのか？？？
それは、おいおいやっていきましょうね。
記事が書けたらここにリンクします。（笑）
Q：背景画像と背景色をあわせるには？
Q：背景画像がメニュー部分にかくれてしまいます
Q：背景画像が記事部分にかくれてしまいます
Q：背景画像をうっすらと透かすにはどうするの？
Q：記事の部分にワンポイントの背景画像をいれるには？
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-