CSSを弄ってみた。

CSS Add comments

珍しく、このブログの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。

Similar Posts:

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS ログイン