« 週末、月末、年度末 | トップページ | 入社式 »

2006年4月 2日 (日)

カスタムCSSを試す(備忘録)

ココログがバージョンアップしてから、自作のテンプレートのタイトル部が正しく表示されなくなってしまった。
たまたま今回のバージョンアップでは、カスタムCSSと言う機能が加わり、ユーザが簡単にスタイルシートを追加して見栄えが変更できるようになった。これを使って修正を試みたらうまく行ったので、ご紹介しておく。

まず、どこをいじれば良いかは、カスタムCSS入力欄を眺めても全く分からない。ココログの見栄えは、style.cssと言うファイルにまとめて記述してあるので、自分のルートフォルダからこのstyle.cssをダウンロードして、じっくりと眺めてみる。

表示不具合の第1点は、タイトル画像の右端と枠の間に2ミリほど隙間が開いてしまったこと。
そこで、style.cssの中を見ると、#containerと言う部分がある。これがブログ全体の大枠の見え方を書いてある部分だ。そこで、

#container {
width: 700px;
}

と書いてやる。700pxとは画像の横幅である。それにブログの外枠を合わせてやる訳だ。
これで隙間問題は解決した。

次にタイトルの「ウィークエンドとど」の文字が上にも左にもマージンが全くない状態で左上隅に張り付いて表示されてしまっている不具合を直す。今度は、#bannerと言う部分に注目。

#banner {
height: 150px;
padding-top: 20px;
padding-left: 10px;
}

と書いてやった。
上からのマージンを20px、左からのマージンを10pxheight指定は、マージンを追加したら何故か画像の下側に隙間ができたので、バナーの高さを画像の大きさに合わせて指定してやったもの。

以上でタイトル部の表示不具合は完全に修正できた。メデタシメデタシ。

と言うことでCSSで色々できて面白くなってきたので、以前からやりたいと思っていた文字サイズの調整にチャレンジ。

今度はブログのソースを眺めると、本文は全て<p>タグで囲まれている。と言うことはこの<p>を定義するスタイルの記述がどこかにあり、それを変更すれば本文の見え方を一気に変えられるはずだ。はずだ、と言うのは、スタイルシートとはそもそもがそういうものだからだ。
そこでstyle.css内を探すと、今度は.content pと言う部分がある。これが怪しい。

.content p {
font-size: 115%;
line-height: 125%;
}

と書いてやる。すると、本文のフォントサイズと行間を変更できた。もちろん、Pt(ポイント数)や、large、smallと言った書き方でも良いが、上記のように%で書くのが微妙な調整がしやすいのでお奨めである。

調子に乗って、以前引用枠の作成(備忘録)の記事で引用枠の見栄えを変更した時には、まだカスタムCSS機能が無かったので、ブログのサブタイトル欄に書いてしまうと言う荒業を使っていたことを思い出し、これもカスタムCSS記述欄に移してみることにした。

.content blockquote {
font-size: 115%;
line-height: 125%;
background-color: #eeeeee;
border:1px solid #999999;
padding: 3px 7px;
}

全く問題なし。うまく行った。

とどめに、サイドバーの各項目タイトルの文字間が空いていて気に入らなかったので、詰めてやる。

.sidebar h2 {
letter-spacing: .0em;
}

以上のように、細かい見栄えを色々調整できて面白いので、ぜひ挑戦してみて下さい。

|

« 週末、月末、年度末 | トップページ | 入社式 »

コメント

TODOさん!僕のもやってください。直したいところがいっぱいあります。

ところで、うちの部署で翻訳を頼んでいる大学の先生にTODOさんの「自家製迷惑メールフィルター」を教えたら、喜んでました。アメリカ人なので海外とのメールが多く、1日100件もスパムメールが来るそうです。僕の翻訳依頼メールも捨てられてました・・・

投稿: salmon | 2006年4月 2日 (日) 10時18分

TODOさん、こんにちは!

CSSの詳しい解説をしてくださって、ありがとうございました。
TODOさん、CSSの深みにはまりそうですね(^m^ )クスッ

先ほど、CSSの件につきまして、
メールをしましたので、よろしくどうぞ(。_。*ペコッ♪  Rita

投稿: Rita | 2006年4月 2日 (日) 11時20分

>サーモンさん

サーモンさんのところはココログじゃないから全く分かりませんーーん。(笑)
私の迷惑メールフィルターは海外からのスパムメールには効果ないのではないですか???

>Ritaさん

いや、深みにははまりませんよ。大人ですから。(と一応言っておいてみる(笑)

投稿: TODO | 2006年4月 2日 (日) 17時38分

ふぅ~
この日記読み終わって頭の中に何が残ったかというと、125%という数字だけ・・・(笑)

これは理解してやりだしたら楽しいでしょーね。でもダメだ、私には無理無理!!

で、TODOさんはこれやっていて日曜日は終わってしまったとか?

投稿: hirorin | 2006年4月 3日 (月) 03時10分

いいです。先生よろこんでいたから??

投稿: salmon | 2006年4月 3日 (月) 20時17分

こんばんは♪

CSS編集、さらに追加されたのですね☆
本文が、一日ごと枠で囲まれて…(*'o'*)

TODOさん、「CSSはわかりませ~ん!」
などとおっしゃいましたが、
本当はCSSの達人でいらっしゃるのですね(驚)


投稿: Rita | 2006年4月 3日 (月) 21時10分

>hirorinさん

まあ元来こういうことするのが好きなんだろうと思いますよ。私は。
昔は趣味でソフト作ってたこともあるくらいですから。
でも今はそこまでの気力体力がないので、こんなことで遊んでるのがちょうどいい刺激って感じかな。

>サーモンさん

なんで喜ぶのか分からないですが、まあいっか。(笑)

>Ritaさん

いえいえ。
本当はCSSのクラスとかIDとか全く理解しないで見よう見まねでやってるんです。
この枠も猿真似と言うかパクリです。
下記のサイトを参考にしました。
http://maru.cocolog-nifty.com/manabi/

投稿: TODO | 2006年4月 3日 (月) 21時45分

TODOさん、ありがとうございました。

おかげさまで、本文に枠がつきました(*^^*)
どのようにするのかしら、と悩んでいたのです。

TODOさんは、ネット検索がお上手ですね!
これからも、よろしくどうぞm(_ _)m   Rita

投稿: Rita | 2006年4月 3日 (月) 23時22分

>Ritaさん

あのサイトはニフティの古河社長のブログにトラックバックしていたサイトなんです。特に検索したのではなくて偶然そこに行ったら私のやりたかったことをやっていたと言う訳で・・。

投稿: TODO | 2006年4月 3日 (月) 23時53分

おはようございます。
はじめまして、シマのママと申します。
「備忘録」zuccaさんのところから引用枠作成にやって来ました。
そしてこちらを拝見して、スタイルシートを拝借させていただきました。
お陰で私のブログにも引用枠をつけることが出来ました。

事後承諾になって申し訳ありませんが、ブログの紹介とTBさせて頂きましたのでヨロシクお願いいたします。
TBまだ届いていないようですが、時差があるのでしょうか?
時間を見てもう一度やってみますが、もしダブって行きましたら一つ削除していただけますと幸いです。

また時々やって来て、いろいろと参考にさせていただきたいと思いますのでヨロシクお願いいたします。

投稿: シマのママ | 2006年8月 3日 (木) 10時22分

>シマのママさん

初めまして。
拙いスタイルシートがお役に立てたようでうれしく思います。
こちらこそ、これからもよろしくお願いします!

投稿: TODO | 2006年8月 3日 (木) 22時32分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/113165/9387624

この記事へのトラックバック一覧です: カスタムCSSを試す(備忘録):

» 引用枠つけました [ 茶飲み話]
ブログのデザインを変えてから、引用枠を付けたいとずっと思っていました。 昨日、時 [続きを読む]

受信: 2006年8月 3日 (木) 14時00分

« 週末、月末、年度末 | トップページ | 入社式 »