珍しく、このブログのCSSを弄ってみました。
といっても、今までCSSなんていじったことないので、google頼み、grep頼みです。今回は以下の3点を修正してみました。
- カテゴリリスト表示
- タイトル部分の表示
- ソース表示に使うpre用CSSの作成
これだけやるだけでも相当大変でした。なんせ、どこの指定が効いているのか、わかりにくいのです。タグごとにまとめられたり、特定の指定だけ別に記載されたり・・・、ホントに扱いにくいですねCSSは。
格闘する事3時間ほど、なんとか今の状態になりました。
カテゴリリスト表示変更
これは以下のを弄りました。
##### mt-static/themes-base/blog.css ##### .widget-list, .archive-list { margin: 0; padding: 0; list-style: none; font-weight: 900; /* フォントの太さ */ font-size: 15px; /* フォントのサイズ */ } .widget-list .widget-list { margin-left: 15px; list-style: circle; font-weight: normal; /* フォントの太さ */ font-size: 10px; /* フォントのサイズ */ }
こうすると、トップカテゴリのフォントが大きく強調され、第2階層以下のカテゴリに白抜き丸が付きます。私の場合トップカテゴリには記事を入れないので、この表示が気に入っています。
記事タイトルの変更
実はこれが一番つらかった。スタイルキャッチャでスタイルを変更しているので固有CSSを見つけるに一苦労だった。
##### mt-static/themes-base/blog.css ##### .entry-title { /* 新規に追加 */ background: #e0f2fe; border: thin dashed gray; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; } ##### mt-static/support/themes/cityscape-sydney/cityscape-sydney.css ##### .asset-footer { border-top-color: gray; } .asset-footer { margin-top: 10px; border-top-width: 1px; border-top-style: dashed; padding-top: 5px; font-weight: normal; }
こうすることで、色を変更し、タイトル部分を囲むように波線を引くようにしている。二つ目のCSSはスタイルキャッチャで選んだ固有CSSです。
ソース・コマンド表示用preタグ
これは完全にググってますので特に解説できません。
pre,code { font-family: "MS ゴシック"; /* フォントファミリ */ border: thin gray dashed; /* 枠線 太さ 色 形状 */ padding: 10px; /* 要素内でのアイテムのスタート位置 */ background-color:#E8E8E8; /* 背景色 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word; /* IE 5.5+ */ }
フォントファミリ、枠線、背景色を指定してます。paddingにより書き出し位置もズラしています。残りのやつはソースが長い場合に適度に改行するためのもののようです。
いやーー疲れました。特に散在して指定されているあたりがつらいですね。grepがなかったらどうにもならない・・・。デザイナさんは大変だな・・・。でもCSSのありがたみは分かった気がする、一箇所変えれば、同じ変更をしなくて済むので管理が楽ですね。便利だなCSS。
お!!
ついにCSSを!!!
いじってみるとはまりますよ?>v<
今度つまづいたら、気軽に声かけてくださいね?^^;
ザク隊員よりw
とりあえずは、自分のclass作って、
ブログ書くときによく使うタグだけ
CSSに書いていくつもり・・・。
サイト全体で統一的に管理できるのはよいですね。
HTMLもすっきりしますし。