WordPress、特に本とかサイトとか見ていないのだけど、設定画面を眺めつつ、これはこういう意味かな？と思ってみていると何となくあれこれ出来るので、まぁ、良くできていると思います。
Black Hatテーマ
WordPressの見栄えを決めるのがテーマ設定。公式サイトにはフリーのテーマが800近くアップされており、その中から適当なものをダウンロードしてインストールすることが出来ます。
なるべくシンプルで見やすいテーマを、ということで探した“Black Hat”（Nicki Faulkさん作）というテーマを使っています。「2コラム」「なるべくモノクロ」「各エリアの区切りが分かりやすい」「変な癖がなさそう」ということを考え選びました。
しかしこのテーマでも微妙にいろいろなところが納得いかないので、少しずつ修正したいと思います。
CSSを編集する
CSSとかダウンロードしたりアップロードしたりとかしなくても、設定画面内で直接書き換えられるのが便利ですね。
外観メニュー内にある「編集」をクリックして開く画面があります。その状態で右側に「テンプレート」とかあり、その下の「スタイル」のところにテーマで使われているcssファイルが列挙されています。”Black Hat”テーマの場合、この中にある「スタイルシート (style.css)」というのがページの見栄えに関するメインCSSとなっているようですので、クリックして真ん中のウィンドウに表示されるCSSを編集します。
編集が終わったら、下部にある「ファイルを更新」というボタンをクリックしたら次に開いた画面から編集したCSSが適用されます。
サイドバーを調整してみる
サイドバーに表示している「最近の投稿」や「カテゴリー」の項目が、改行されたときに見にくくなってしまっている問題を解決してみます。
まず、このあたりのHTMLソースを見てみると、ul,liで入れ子状態になっていることが分かります。それらをsideba IDのCSSで設定している以下の3つの項目について修正しました。
[css]
#sidebar ul li ul, #sidebar ul li ul li ul {
margin:0;
padding:0.5em; /* #3 */
}
#sidebar ul li ul li {
margin:0;
margin-left: 1em; /* #2 */
padding:0;
list-style-type: square; /* #1 */
}
#sidebar ul li ul li a {
padding-left:1px; /* #4 */
line-height:22px;
display:block;
}
[/css]
- #1 .. まず、リストの行頭に四角マーカーを表示するよう設定
- #2 .. 次に、その分インデントを調整
- #3, #4 .. これら枠線の内側パディングを微調整
これで完了です。
以上のように設定したものは次のように表示されます。
