Blog
2005/02/10のBlog
[ 16:13 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
メニュー部分をカスタマイズしてみよぉ！！
右の図の赤枠の部分ですね
さて、どんな風になるのか？？
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* メニュー */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）
/*---------------------------------------------*/
/* メニュー */
/*---------------------------------------------*/
.menu {
width : 180px ;
float : left ;
background-color : ;
}
.menu-header {
font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif ;
font-size : ;
font-weight : bold ;
line-height : 125% ;
color : #333333;
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 10px ;
border-bottom : 2px dotted #999999 ;
voice-family : "\"}\"";
voice-family : inherit;
}
.menu-contents {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : 75% ;
line-height : 150% ;
padding : 5px 0px 0px 0px ;
margin : 0px 0px 20px 10px ;
word-break : break-all ;
}
.menu-contents p {
margin : 0px 0px 3px 0px ;
}
.menu-contents hr {
color : #999999 ;
background-color : #999999 ;
width : 95% ;
height : 1px ;
border : none ;
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 0px ;
}
.menu input {
width : ;
}
.menu table {
text-align : center ;
font-size : 12px ;
color : #333333 ;
width : 170px ;
}
/*---------------------------------------------*/
【変更後】
.menu {
width : 180px ;
float : right ;
background-color : #e0f8e0 ;
}
.menu-header {
font-size : 14px ;
line-height : 200% ;
color : #ffffff;
padding : 0px 0px 0px 10px ;
margin : 0px 0px 0px 0px ;
background-color : #008080 ;
}
.menu-contents {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : 75% ;
line-height : 130% ;
padding : 5px 0px 0px 0px ;
margin : 0px 0px 10px 10px ;
word-break : break-all ;
}
.menu-contents p {
margin : 0px 0px 3px 0px ;
}
.menu-contents hr {
color : #999999 ;
background-color : #999999 ;
width : 95% ;
height : 1px ;
border : none ;
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 0px ;
}
.menu input {
width : ;
}
.menu table {
text-align : center ;
font-size : 12px ;
color : #333333 ;
width : 170px ;
}
右の図の赤枠の部分ですね
さて、どんな風になるのか？？
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* メニュー */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）
/*---------------------------------------------*/
/* メニュー */
/*---------------------------------------------*/
.menu {
width : 180px ;
float : left ;
background-color : ;
}
.menu-header {
font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif ;
font-size : ;
font-weight : bold ;
line-height : 125% ;
color : #333333;
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 10px ;
border-bottom : 2px dotted #999999 ;
voice-family : "\"}\"";
voice-family : inherit;
}
.menu-contents {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : 75% ;
line-height : 150% ;
padding : 5px 0px 0px 0px ;
margin : 0px 0px 20px 10px ;
word-break : break-all ;
}
.menu-contents p {
margin : 0px 0px 3px 0px ;
}
.menu-contents hr {
color : #999999 ;
background-color : #999999 ;
width : 95% ;
height : 1px ;
border : none ;
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 0px ;
}
.menu input {
width : ;
}
.menu table {
text-align : center ;
font-size : 12px ;
color : #333333 ;
width : 170px ;
}
/*---------------------------------------------*/
【変更後】
.menu {
width : 180px ;
float : right ;
background-color : #e0f8e0 ;
}
.menu-header {
font-size : 14px ;
line-height : 200% ;
color : #ffffff;
padding : 0px 0px 0px 10px ;
margin : 0px 0px 0px 0px ;
background-color : #008080 ;
}
.menu-contents {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : 75% ;
line-height : 130% ;
padding : 5px 0px 0px 0px ;
margin : 0px 0px 10px 10px ;
word-break : break-all ;
}
.menu-contents p {
margin : 0px 0px 3px 0px ;
}
.menu-contents hr {
color : #999999 ;
background-color : #999999 ;
width : 95% ;
height : 1px ;
border : none ;
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 0px ;
}
.menu input {
width : ;
}
.menu table {
text-align : center ;
font-size : 12px ;
color : #333333 ;
width : 170px ;
}
;)
■.menu { ～～～ } の変更点
float : right ;
メニュー部分の設置場所の設定→左から右に移動
background-color : #e0f8e0 ;
メニュー部分の背景色の設定→淡いブルーにしてみた
float : right ;
メニュー部分の設置場所の設定→左から右に移動
background-color : #e0f8e0 ;
メニュー部分の背景色の設定→淡いブルーにしてみた
;)
■.menu-header { ～～～ } の変更点
font-size : 14px ;
メニューの題字の大きさの設定→14pxにしてみた
line-height : 200% ;
メニューの題字部分の枠の大きさ？→200%にしてみた
color : #ffffff;
メニューの題字の色→白抜きにしてみた
padding : 0px 0px 0px 0px ;
メニューの題字の位置設定→左から 10px にしてみました
margin : 0px 0px 0px 0px ;
メニューの題字枠の位置設定？→左から 0px にしてみました
background-color : #008080 ;
メニューの題字部分の背景色→追記して、色をつけてみました
この部分↓↓↓は削除してしまった（笑）
font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif ;
font-weight : bold ;
border-bottom : 2px dotted #999999 ;
voice-family : "\"}\"";
voice-family : inherit;
font-size : 14px ;
メニューの題字の大きさの設定→14pxにしてみた
line-height : 200% ;
メニューの題字部分の枠の大きさ？→200%にしてみた
color : #ffffff;
メニューの題字の色→白抜きにしてみた
padding : 0px 0px 0px 0px ;
メニューの題字の位置設定→左から 10px にしてみました
margin : 0px 0px 0px 0px ;
メニューの題字枠の位置設定？→左から 0px にしてみました
background-color : #008080 ;
メニューの題字部分の背景色→追記して、色をつけてみました
この部分↓↓↓は削除してしまった（笑）
font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif ;
font-weight : bold ;
border-bottom : 2px dotted #999999 ;
voice-family : "\"}\"";
voice-family : inherit;
;)
■.menu-contents { ～～～ } の変更点
line-height : 130% ;
行間の設定か？→130%にしてみた
margin : 0px 0px 10px 10px ;
文字の入る枠の位置設定？→下から10pxに変更
下記の部分は変更していません
■.menu-contents p { ～～～ } の変更点
■.menu-contents hr { ～～～ } の変更点
■.menu input { ～～～ } の変更点
■.menu table { ～～～ } の変更点
どれが何の設定なのかすらわかってないけど・・・誰か教えてくださいませ<(_ _)>←ヲイ！！
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
line-height : 130% ;
行間の設定か？→130%にしてみた
margin : 0px 0px 10px 10px ;
文字の入る枠の位置設定？→下から10pxに変更
下記の部分は変更していません
■.menu-contents p { ～～～ } の変更点
■.menu-contents hr { ～～～ } の変更点
■.menu input { ～～～ } の変更点
■.menu table { ～～～ } の変更点
どれが何の設定なのかすらわかってないけど・・・誰か教えてくださいませ<(_ _)>←ヲイ！！
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
[ 08:07 ]
[ kazeっぽ写真部 ]
;)
2005/02/09のBlog
[ 23:43 ]
[ 食べる ]
;)
けんちん汁
納豆
黒酢のもずく酢
昨日の残り物のけんちん汁に納豆とモズク酢
とっても健康食っぽいと思いませんか？？（笑）
納豆
黒酢のもずく酢
昨日の残り物のけんちん汁に納豆とモズク酢
とっても健康食っぽいと思いませんか？？（笑）
[ 02:08 ]
[ doblogカスタマイズＱ＆Ａ ]
;)
ページタイトル部分を変えてみよう！！
右の図の赤い枠の中がページタイトルです
文字の大きさやフォントなどを変えてみます
自分らしいデザインを目指し、もうちょっと頑張ってみましょう
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* ページタイトル */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）/*---------------------------------------------*/
/* ページタイトル */
/*---------------------------------------------*/
.mydoblog-header {
background-color : ;
width : ;
height : ;
padding : 25px 10px 0px 10px ;
margin : 0px 0px 25px 0px ;
border-bottom : 2px dotted #999999 ;
voice-family : "\"}\"";
voice-family : inherit;
}
.mydoblog-header-text {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size: ;
font-weight : bold ;
line-height : ;
color : #333333 ;
}
.mydoblog-header img {
vartical-align : text-bottom ;
margin : 0px 0px 0px 0px ;
}
/*---------------------------------------------*/
変更後
.mydoblog-header {
padding : 25px 10px 0px 10px ;
margin : 0px 0px 25px 0px ;
background-color: #008080 ;
border-bottom : 5px dotted #ffffff ;
}
.mydoblog-header-text {
font-size: 30px;
color : #ffffff;
}
.mydoblog-header img {
vartical-align : text-bottom ;
margin : 0px 0px 0px 0px ;
}
右の図の赤い枠の中がページタイトルです
文字の大きさやフォントなどを変えてみます
自分らしいデザインを目指し、もうちょっと頑張ってみましょう
では、まず手順から
１：ログインした状態でデザインカスタマイズをクリック
２：デザインテンプレートのカスタマイズの中に /* ページタイトル */ があります
変更前の記述は↓↓↓（シンプルデザイン使用）/*---------------------------------------------*/
/* ページタイトル */
/*---------------------------------------------*/
.mydoblog-header {
background-color : ;
width : ;
height : ;
padding : 25px 10px 0px 10px ;
margin : 0px 0px 25px 0px ;
border-bottom : 2px dotted #999999 ;
voice-family : "\"}\"";
voice-family : inherit;
}
.mydoblog-header-text {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size: ;
font-weight : bold ;
line-height : ;
color : #333333 ;
}
.mydoblog-header img {
vartical-align : text-bottom ;
margin : 0px 0px 0px 0px ;
}
/*---------------------------------------------*/
変更後
.mydoblog-header {
padding : 25px 10px 0px 10px ;
margin : 0px 0px 25px 0px ;
background-color: #008080 ;
border-bottom : 5px dotted #ffffff ;
}
.mydoblog-header-text {
font-size: 30px;
color : #ffffff;
}
.mydoblog-header img {
vartical-align : text-bottom ;
margin : 0px 0px 0px 0px ;
}
;)
■.mydoblog-header { ～～～ } の変更点
width : ;
height : ;
voice-family : "\"}\"";
voice-family : inherit;
上記の部分は指定がないので削除してみました
background-color :#008080 ;
背景色の設定は？リンクの色と統一してみました
border-bottom : 5px dotted #ｆｆｆｆｆｆ ;
ボーダーのドットの大きさと色の設定は？どうせだから白抜きにしてドットも大きくしてみた
三箇所変更しただけでこんなに見た目がかわります
結構楽しいでしょ？
width : ;
height : ;
voice-family : "\"}\"";
voice-family : inherit;
上記の部分は指定がないので削除してみました
background-color :#008080 ;
背景色の設定は？リンクの色と統一してみました
border-bottom : 5px dotted #ｆｆｆｆｆｆ ;
ボーダーのドットの大きさと色の設定は？どうせだから白抜きにしてドットも大きくしてみた
三箇所変更しただけでこんなに見た目がかわります
結構楽しいでしょ？
;)
■.mydoblog-header-text { ～～～ }の変更点
ここではプログ名の文字をどんな大きさにするのか、どんな色にするのかなどを設定します
font-family : ;
font-weight : ;
line-height : ;
この部分は削除しました
font-size: 30px;
フォントのサイズは？思い切ってでっかくしてみました
color : #ｆｆｆｆｆｆ ;
フォントの色は？どうせだから白抜きになるように白に設定
■.mydoblog-header img { ～～～ }
ここは、いじってません
多分、MyDoblogで登録するイメージ画像用の設定だと思います（自信ないけど(^o^;）
ひとつずつ確認しながらやっていくとわかりやすくていいと思います
文字の大きさとか色とか変えていくとほんと楽しいですよ
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
ここではプログ名の文字をどんな大きさにするのか、どんな色にするのかなどを設定します
font-family : ;
font-weight : ;
line-height : ;
この部分は削除しました
font-size: 30px;
フォントのサイズは？思い切ってでっかくしてみました
color : #ｆｆｆｆｆｆ ;
フォントの色は？どうせだから白抜きになるように白に設定
■.mydoblog-header img { ～～～ }
ここは、いじってません
多分、MyDoblogで登録するイメージ画像用の設定だと思います（自信ないけど(^o^;）
ひとつずつ確認しながらやっていくとわかりやすくていいと思います
文字の大きさとか色とか変えていくとほんと楽しいですよ
doblogの使い方Ｑ＆Ａの他の記事は⇒doblogの使い方Ｑ＆Ａ-index-
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兄貴）
以前の真っ白のブログが印象的で削るだけ削るにはどうすればいいのか勉強になりました（笑）