Blog
2004/07/10のBlog
[ 19:14 ]
[ Doblogデザイン ]
エー、遅ればせながら[MY CSS DESIN ヒヨコ君増殖中]より、斜体表示部分を点線で囲んで独立ブロックとして表示するカスタマイズ法を、試してみました。該当方法の説明はこちら→[限定指定の応用編です。気合入れていきましょう]
MacでのSafari表示の場合、実はの斜線表示というのはちゃんと見えません。欧文と半角数字のみは斜体で表示されますが、日本語文自体は並字で表示されていました。大多数のユーザーにとってはそれでも良いのですが、Safariをメインで使用してる本人自体がどこか落ち着きがない。
だいたい、自分Doblogは引用記事がけっこう多いので、斜体という形よりももっと視覚的に一発で引用文とわかる形にできないかなぁと思っていたのですが、方法がよくわからない。Windows限定の機能ならば、どのみち導入できないんですが、Macユーザーの方で子の囲み形式を使ってる人が、残念ながら自分の周辺では見つからなかったモノで。
で、今日ヒヨコ君のテンプレを移植したこのDoblogを、もうちょいいじろうかと思ってヒヨコ君の方をツラツラ見ていたら、上記カスタマイズ方法を発見したわけです。さっそく試してみたところ、問題なくできました。コリャ便利ですね。まぁ、そのぶん過去には引用文の前後を1行ずつ改行していたのを変更しないといけなくなってしまいましたが。
取りあえず、トップページのヤツは手を入れ直して（おかげでヘンな表示になっているところも発見！ 慌てて修正）公開します。
.blog-text {
font-family : "ＭＳ Ｐゴシック", "OSAKA";
（中略）
word-break: break-all;
}
の後に、以下の形にカスタマイズして挿入しました。太字で表示されているところが、オリジナルからいじったところです。
/*以下、Blog本文の斜体指定を枠線で囲む設定*/
.blog-text i {
font-style: normal;
color: #008080;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 0px;
padding-top : 10px ;
padding-bottom : 15px ;
padding-left : 10px ;
padding-right : 5px ;
border: 3px dotted #66CDAA;
background-color: #FFFACD;
background-image: url("http://www.");
width: 500px;
display: block;
}
変更点の詳細と意味は、以下の通りです。
１）ヒヨコ君のデフォルトはwidth: 300px;ですが、自分の場合は引用文が長い場合が多いので、さらに長くした上で本文の幅よりもやや短い500ｐｘにしました。
２）このテンプレをコピー＆ペーストしてカスタマイズしたい方のことを考えて、
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 0px;
の文字列を加えて、margin-left: 10px;にして、点線で囲まれたブロックを、左側に10pxの余白をつけて本文との段差をつける形にしました。ここら辺は考え方次第ですが、自分はちょっと段差がある方が好きです。
３）このテンプレをコピー＆ペーストしてカスタマイズしたい方のことを考えて、ヒヨコ君では padding : 10px ; のみの設定でしたが、
padding-top : 10px ;
padding-bottom : 15px ;
padding-left : 10px ;
padding-right : 5px ;
に変更して、より細かいカスタマイズができるようにしました。まぁ、あんまり意味があることではないのですが、こだわりたい方のために。マージンで頭に段差をつけずに、paddingで枠からの余白を広く取った方が気分的に落ち着くという方は、こちらで微調整してください。
padding-bottom : 15px ;にしたのは、気分的に下側に余白がちょっと多めの方が見た目のバランスが良いと考えたからです。
４）後々背景に別の柄を配置することも考えて、リンクのための一文 background-image: url("http://www."); もあらかじめ加えておきました。
５）フォント（文字）の色を#008080に、囲み点線の色を#66CDAAに、背景の色を#FFFACDに変更しました。
なお蛇足ながら、上に加えてある
/*以下、Blog本文の斜体指定を枠線で囲む設定*/
は、後で再カスタマイズする時に混乱しないように、一緒に書き込んでおくようにします。慣れてくれば不要ですが、初心者の場合は「/* 設定の見出し */」をつけておくと、何かと便利です。/* */で挟まれた部分の文字列は、テンプレに影響を与えませんので。
MacでのSafari表示の場合、実はの斜線表示というのはちゃんと見えません。欧文と半角数字のみは斜体で表示されますが、日本語文自体は並字で表示されていました。大多数のユーザーにとってはそれでも良いのですが、Safariをメインで使用してる本人自体がどこか落ち着きがない。
だいたい、自分Doblogは引用記事がけっこう多いので、斜体という形よりももっと視覚的に一発で引用文とわかる形にできないかなぁと思っていたのですが、方法がよくわからない。Windows限定の機能ならば、どのみち導入できないんですが、Macユーザーの方で子の囲み形式を使ってる人が、残念ながら自分の周辺では見つからなかったモノで。
で、今日ヒヨコ君のテンプレを移植したこのDoblogを、もうちょいいじろうかと思ってヒヨコ君の方をツラツラ見ていたら、上記カスタマイズ方法を発見したわけです。さっそく試してみたところ、問題なくできました。コリャ便利ですね。まぁ、そのぶん過去には引用文の前後を1行ずつ改行していたのを変更しないといけなくなってしまいましたが。
取りあえず、トップページのヤツは手を入れ直して（おかげでヘンな表示になっているところも発見！ 慌てて修正）公開します。
.blog-text {
font-family : "ＭＳ Ｐゴシック", "OSAKA";
（中略）
word-break: break-all;
}
の後に、以下の形にカスタマイズして挿入しました。太字で表示されているところが、オリジナルからいじったところです。
/*以下、Blog本文の斜体指定を枠線で囲む設定*/
.blog-text i {
font-style: normal;
color: #008080;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 0px;
padding-top : 10px ;
padding-bottom : 15px ;
padding-left : 10px ;
padding-right : 5px ;
border: 3px dotted #66CDAA;
background-color: #FFFACD;
background-image: url("http://www.");
width: 500px;
display: block;
}
変更点の詳細と意味は、以下の通りです。
１）ヒヨコ君のデフォルトはwidth: 300px;ですが、自分の場合は引用文が長い場合が多いので、さらに長くした上で本文の幅よりもやや短い500ｐｘにしました。
２）このテンプレをコピー＆ペーストしてカスタマイズしたい方のことを考えて、
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 0px;
の文字列を加えて、margin-left: 10px;にして、点線で囲まれたブロックを、左側に10pxの余白をつけて本文との段差をつける形にしました。ここら辺は考え方次第ですが、自分はちょっと段差がある方が好きです。
３）このテンプレをコピー＆ペーストしてカスタマイズしたい方のことを考えて、ヒヨコ君では padding : 10px ; のみの設定でしたが、
padding-top : 10px ;
padding-bottom : 15px ;
padding-left : 10px ;
padding-right : 5px ;
に変更して、より細かいカスタマイズができるようにしました。まぁ、あんまり意味があることではないのですが、こだわりたい方のために。マージンで頭に段差をつけずに、paddingで枠からの余白を広く取った方が気分的に落ち着くという方は、こちらで微調整してください。
padding-bottom : 15px ;にしたのは、気分的に下側に余白がちょっと多めの方が見た目のバランスが良いと考えたからです。
４）後々背景に別の柄を配置することも考えて、リンクのための一文 background-image: url("http://www."); もあらかじめ加えておきました。
５）フォント（文字）の色を#008080に、囲み点線の色を#66CDAAに、背景の色を#FFFACDに変更しました。
なお蛇足ながら、上に加えてある
/*以下、Blog本文の斜体指定を枠線で囲む設定*/
は、後で再カスタマイズする時に混乱しないように、一緒に書き込んでおくようにします。慣れてくれば不要ですが、初心者の場合は「/* 設定の見出し */」をつけておくと、何かと便利です。/* */で挟まれた部分の文字列は、テンプレに影響を与えませんので。
※追記です。
ヒヨコ君の方で、トラックバックして注意点を追記されてくださいましたので、こちらも転載させて頂きます。
■ 2004/07/10追記
★ 正しいwidth値の計算方法
width + padding値 *2 で計算してください。
上記の場合なら、300px+10px*2 = 320px
width値が.blogの幅を越えると表示崩れを起こす危険があります。不安ならばwidthを消してしまいましょう。
なぜこうなるかは、ヒヨコ君増殖中の[こちらのBlog]を参照してください。Windows版InternetExplorerに関して、問題があるようです。念のため、回避方法についても転載しておきます。
★ 回避
width・height指定がある要素にパディング・ボーダーは指定しない。余計なwidth・heightは指定しない又は削除しましょう。
★ 対策
windows版Internetexplorerのみで表示確認してる人などは、この問題が表示崩れの原因となっている場合が多いようです。Mozilla系ブラウザを1つ手に入れて表示確認しましょう。Firefoxなんて軽くてお勧めです。
★ Mozilla Firefox - The Browser, Reloaded
≫ Mozilla Firefox - 日本語版ダウンロード
ヒヨコ君の方で、トラックバックして注意点を追記されてくださいましたので、こちらも転載させて頂きます。
■ 2004/07/10追記
★ 正しいwidth値の計算方法
width + padding値 *2 で計算してください。
上記の場合なら、300px+10px*2 = 320px
width値が.blogの幅を越えると表示崩れを起こす危険があります。不安ならばwidthを消してしまいましょう。
なぜこうなるかは、ヒヨコ君増殖中の[こちらのBlog]を参照してください。Windows版InternetExplorerに関して、問題があるようです。念のため、回避方法についても転載しておきます。
★ 回避
width・height指定がある要素にパディング・ボーダーは指定しない。余計なwidth・heightは指定しない又は削除しましょう。
★ 対策
windows版Internetexplorerのみで表示確認してる人などは、この問題が表示崩れの原因となっている場合が多いようです。Mozilla系ブラウザを1つ手に入れて表示確認しましょう。Firefoxなんて軽くてお勧めです。
★ Mozilla Firefox - The Browser, Reloaded
≫ Mozilla Firefox - 日本語版ダウンロード