2013年9月7日追記
このやり方は、テーマのアップデートのタイミングで消えます！
正しいやり方はこちらの記事を参照してくださいませ。
【WordPressのカスタム】子テーマが良いらしい。
デザインだコーディングだを仕事でやっていますが、
ココのサイトに関しては全く手付かずです(｀・ω・´)ｷﾘｯ
手つかずというか、素敵なデザインテーマがたくさん無料であるので、これを使わない手はないです！
自分の好きなデザインテーマを探して導入して、
不満な所は修正して補っていけば良い！というのが私の考えです。
（デザインしてコーディングして…っていうのを、
会社員であり3歳児の子育てママにやれというのは時間的になかなかの難題なﾜｹﾃﾞｽﾖ…）
で、今このサイトで使っているデザインはデフォルトで入っていた『Montezuma』。
アイキャッチ画像がアニメーションでモノクロからカラーに変わったり、素敵ﾔﾝ!!
デザイン自体もごちゃごちゃしてなくてｽｯｷﾘﾃﾞｻﾞｲﾝで私好みだったので即決めでした。
で、記事を3件くらい書いた所でやはり幾つか不満点が出てきました。
- 記事ページのh2以降のcssはないのか？
- 行間を少しあけたい。
- 日本語タイトル文字を少し小さくしたい。
- ｱﾝﾁｴｲﾘｱｽな見た目に慣れた私には（会社ではWin7）文字がｶｸｶｸしててﾔﾀﾞ。
とりあえず早急に変えたいなーと思ったのはこの辺。
CSSを修正すれば良いだけなので、きっと簡単よねーってことで、
まずはやってみたのでそのレポート！
まずは構造を理解する
まず左メニューの外観＞Montezuma Optionsを見てみると、いくつかのパーツを組み合わせてサイト表示させていることが分かります。
MainTemplates
- index.php…サイトのトップページ
- page.php…固定ページ
- single.php…記事ページ
CSS Files
- contents.css…サイト全体の初期設定みたいなモン
- layout.css…レイアウト設定
- posts.css…記事表示部分の設定
私はChromeがメインブラウザなので、右クリック＞要素を検証（Macだと、option+クリック＞要素を検証） でサクッとcssの中身を調べます。
見たところ、
トップページの記事の一覧表示部分は
div.post-list ＞ div.hentry ＞ 記事
記事ページは
div.hentry ＞ 記事
という構造。
タグについては、
トップページ
[html]
<h2>記事タイトル</h2>
[/html]
記事ページ
[html]
<h1>記事タイトル</h1>
<h2>見出し</h2>
<h3>見出し</h3>
...
[/html]
となっています。
CSSを見てみる
上でも書いた、Chromeのブラウザの要素を検証で見てみた。
CSSについては、
posts.cssを見たところ、記事中に書かれるh2以降については設定がないようです。
【1】記事ページのh2以降のcssはないのか？ については、
post.cssの、h2の設定などの後に以下を追記。
[css]
/*カスタム*/
.hentry h2{
border-left:8px solid #666;
background: transparent url(%tpldir%/images/h2_bg.gif) repeat;
padding:20px 10px;
margin:40px 0 20px 0;
}
.post-list .hentry h2{
border:none;
background-image:none;
padding:0;
margin:0 0 15px 0;
}
.hentry .post-bodycopy h3 {
border-left:4px solid #666;
font-size:25px;
padding:5px 10px;
margin:20px 0px;
}
/*カスタム終わり*/
[/css]
【2】行間を少しあけたい。 については、
content.css のbodyに
[css]
line-height:2em;
[/css] を追記。
【3】日本語タイトル文字を少し小さくしたい。 については、
英語フォントが幅が狭いものを使ったサイトなので、全角の日本語使うとどうしても大きくなってしまいます。
なので、ここは日本語の表示サイズを基準に設定してしまいます。
post.css内の
[css]
.hentry > h2 ｛font-size: 36px; ｝
.hentry > h1{font-size: 46px; ｝
[/css]
【4】ｱﾝﾁｴｲﾘｱｽな見た目に慣れた私には（会社ではWin7）文字がｶｸｶｸしててﾔﾀﾞ。 については、
font-familyに日本語フォントを追加。
英語圏で作られたものなので、日本語のフォントをしていないので適当なシステム内のフォントで表示されます。
ちなみに、
[css]
body｛
font-family: "Segoe UI", "Lucida Grande", "Helvetica Neue","Meiryo", "メイリオ","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
｝
h1, h2, h3, h4, h5, h6 {
font-family: 'Yanone Kaffeesatz',"Meiryo", "メイリオ","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
｝
[/css]
フォントファミリーの設定は、コンピュータにインストールされているフォントが指定順に優先して反映されていくので、最初に設定してある英語フォントをデザイン的に優先するために、英語・日本語の順で設定しています。
だいたい、目立った不満点はこれで解消です。
ただ、行間をもうちょっと…とか実は細かい所がどんどん出てきて、実際はもうちょっと変えてると思います。
（数日に跨って作業してたらどこを変えたか分からなくなったということがあったとかなかったとか）
もしおかしな点があったら指摘してくださーい。
んで、よく分からん人はソース見てくださーい。
