WordPressテーマ「Nirvana」カスタムCSS設定

Wordpressのブログ（ http://jyo-to.okinawa/category/tech/ ）に移しましたが、そこで書いた内容をはてなブログにも転記していこうと思います。

今回はこちらのエントリです。

WordPressテーマ「Nirvana」カスタムCSS設定 | 合同会社ジョートー

Wordpress のテーマ「Nirvana」のカスタマイズついて。

カスタム機能も充実しており、自由なレイアウトを可能にしてくれます。

ただ、Wodpressの無料テーマの多くは海外のデザイナが制作したものなので、日本語にはフォントの種類やスペースなどが合わないことが多いです。
Nirvana もそのまま日本語を表示するとなんかかっこ悪いですね。

まだ、完全にかっこよくわできていないですが、フォントやスペースなどいじって見ました。

まず、管理画面から、「外観」→「Nirvana Settings」→「テキスト設定」を開くと各フォント種類とサイズを指定することができます。
ここで特徴的なのは、右側の欄にGoogleフォントを指定することができます。当サイトではとりあえず「Noto Sans CJK JP Regular」を指定しました。

これだけだと、トップページのテキストエリア、コラムエリアのタイトルの文字サイズなどが変更できないので、カスタムCSSで設定を上書きします。

今回、カスタムCSSに設定した項目

スライダー上のテキストをセンタリングする

.slide-text {text-align: center !important;}

注：「!important」を付けないとカスタムCSSの設定が優先されません。
参考　→　http://www.cryoutcreations.eu/forums/t/presentation-page-center-text-on-slider

テキストエリアとコラムエリアのタイトルの文字サイズ変更

#front-text1 h2,
#front-text2 h2,
#front-text5 h2,
#front-columns h2 {
    font-size: 30px !important;
    line-height: 32px !important;
}

テキストエリアの余白調整

#pp-texttop,
#pp-textmiddle,
#pp-textbottom,
#front-columns-box,
#content {
    padding: 30px 0 !important;
}

これらは、template/nirvana/styles にある、style-fronpage.css を見ていくとどういった設定をすればいいか推測できるかと思います。

なかなかこのテーマについての日本語の情報が少なくて苦労しました。「wordpress Nirvana」で検索するとロックバンドの情報がいっぱい出てくるし。まあ、このバンドも聴いていましたが。

このテーマ Nirvana についての情報がここにもあるよって方、是非コメント頂ければ幸いです。