スタイルシートと格闘
私のこのブログのデザインは、Dr.Blogからとってきたものを元に、自分でサイドバーにいろいろつけたし、スタイルシートを夫にカスタマイズしてもらったものでした。
しかし、人間の欲望はつきないもので、「ここがこうなったらいいのに！」と思うことは山のようにありました。でも、夫は忙しいので、またまた夫にお願いするのも憚られます。今回、「blog移転顛末記」で触れた背景画像が表示できなくなる事件を受けて、スタイルシートの勉強を初めてみることにしました。
プロマネ兼デザイナー、自称インフォメーションアーキテクトの夫が仕事のために買って、たまたま家にあった「Web Site Design」Vol.4からVol.5にかけてののCSSへの招待を斜め読みしました。
「Web Site Design」Vol.4
それから、やさしいホームページ入門のCSS入門、CSSスピード・ラーニングを適当に読みこなします。
どうやらCSSにはidとclassというのがあるのが分かりました。一度だけ登場するのがid、何度も登場するのがclass。HTML内で書くときはidはid、classはclass。CSS内で書くときは、idが「#」、classが「.」。それぞれのidやclassの、marginなどのプロパティに10pxなどの値を指定することによって、スタイルを決めていくようです。
ここらあたりで普通の解説には物足りなさを感じてきました。もうちょっと詳しくて、理路整然とした仕様書のような解説はないものか。と、思ったら床に「詳細HTML&XHTML&CSS辞典」が転がっているのを発見しました！まるで我が家は宝の山です。
「詳解HTML&XHTML&CSS辞典」
辞典っていうからプロパティしか載ってないのかと思いきや、記述ルールについても事細かく書いてあります。感激です。
どうやら「*」は省略できること、「.content blockquote」って書くと「classがcontentであるところのタグの後の、blockquoteタグについてのスタイル」を記述できるらしいことを発見！なるほど、そうなってるのねー。その他にもいろいろなプロパティが載っていて、やっと自分が使ってるスタイルシートの全貌らしきものが把握できてきました。
まずは、サイドバーで、行間が空き過ぎていることが気になっていたので、調節することにします。私のブログはやたらカテゴリ数やアーカイブ数が多いので、行間が空いているとすごく見づらくなってしまうなあ、と思っていたんです。
margin-topが10pxになっていたので、5pxに変更です。
.sidebar li {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: left;
line-height: 150%;
margin-top: 5px;
list-style-type: none;
}
間が詰まってなかなかいい感じになりました。
次は、BLOCKQUOTEタグを使うときに、ぜひともまわりを点線で囲って、文字サイズを小さくすることに挑戦です。.content blockquoteのスタイルをいじります。
他のブログを参考に、フォントサイズを85%にし、マージンを設定し、枠線のスタイルなどを設定します。
.content blockquote {
line-height: 150%;
font-size: 85%;
margin: 15px 15px 15px 60px;
border-style: dotted;
border-width: medium;
border-color: #FC9;
color: #333;
background-color: #FFF;
padding: 5px;
}
かわいい！！！超かわいい！！！！これぞ、私の望んでいたブログよ！
ただ、いろいろ確認してみていると、引用部分に空行が挟まると、文字サイズが元の大きさに戻ってしまうことが判明しました。どうやら空行が入るとMovable TypeがPタグを使ってしまうのが原因のようです。何でBLOCKQUOTEの中でPタグを使うとうまくいかないのか私の知識がまだ足りないので不明なのですが、応急措置で、.content blockquote pのスタイルを設定する事で逃げることにしました。font-sizeを.content blockquoteと同じ85%にしたら、85%の85%になってしまって焦ったので100%に変更しました。
.content blockquote p {
line-height: 150%;
font-size: 100%;
color: #333;
}
どうも応急処置っぽい感じが免れませんが、まあ、かわいいからいいでしょう。
最後に、どうもコメントを投稿するときの確認画面がかわいくないことが気になっていました。HTMLファイルを確認してみると、投稿確認画面ではidがpagebodyというタグの下にいろいろな要素が詰まっていることを発見しました。
スタイル自体は、indexのページなどと一緒ならかわいいなあ、と思ったので、.contentのスタイルをそのままコピーして、新たに#pagebodyと#pagebody p、#pagebody h3（どうやら修飾にh3タグが使用されているようだったので）を定義します。
#pagebody {
padding: 15px 15px 5px 15px;
background-color: #FFFFFF;
color: #333;
font-family: ‘Hiragino Kaku Gothic Pro’,'Osaka’,'MS UI Gothic’, Verdana, Arial, sans-serif;
font-size: small;
}
#pagebody p{
color: #333;
font-family: ‘Hiragino Kaku Gothic Pro’,'Osaka’,'MS UI Gothic’, Verdana, Arial, sans-serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}
#pagebody h3 {
color: #333;
font-family: ‘Hiragino Kaku Gothic Std’, ‘Osaka’, ‘MS UI Gothic’, Verdana, Arial, sans-serif;
font-size: medium;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}
うーん、コメント欄もかわいくなった。副次的効果で、検索結果画面も少しかわいくなりました。
満足、満足。お勉強したかいがあるというものです。これからも、このブログをかわいくするためにスタイルシートの勉強をがんばろう、と心に固く誓いました。
-
カウンタ
リンク
オイシックスとか、冷凍食品コーナーとか、実にヤバイ
楽しいiPhoneアプリを見つけると幸せになれる。iPhoneの正体は実は育てゲーなのかも
さりげなくいい曲があるのがフリーダウンロードの不思議
amadanaのケトル。罪な外観です
amadanaのコーヒーメーカー。ケトルと一緒に揃えたくなります
深沢直人デザインのLEDデスクライト。シンプルで機能的で、本読み用にかなり欲しいです
EIZOの新しいモニタ。AV入力対応です。PS3もXbox360も1080pでイケて、PC画面上に同時にAV画像も表示出来るみたいです。キレイな画面でゲームしながら、テレビ見ながら、ネットサーフィンに
なかのひと&うごくひと
ランキングリンク
