8月 04
珍しく、このブログの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: "ＭＳ ゴシック"; /* フォントファミリ */
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を！！！
いじってみるとはまりますよ?＞ｖ＜
今度つまづいたら、気軽に声かけてくださいね?＾＾；
ザク隊員よりｗ
とりあえずは、自分のclass作って、
ブログ書くときによく使うタグだけ
CSSに書いていくつもり・・・。
サイト全体で統一的に管理できるのはよいですね。
HTMLもすっきりしますし。