Surfarama、カスタマイズに手がかからないテーマでよかった

TwentyFourteenから変更したテーマ「Surfarama」。カラーを変えるとガラリと雰囲気も変わって面白い。何より色の変更が簡単なのが嬉しい。

上がデモカラー。ポップな感じ。

色のためにcssをいじらずに済む
フォント指定、文字サイズは、cssで(汗
ウィジェットを整理した
1. 桜もちからのお知らせ
2. 関連

色のためにcssをいじらずに済む

「TwentyFourteen」は、色をかえるためにプラグインを入れるとか、CSSを書き換える必要がある。初心者にはハードル高くて、いろいろ手こずった。

「Surfarama」は、もっとラク。見た目がガラリと変わるカテゴリーごとの色分けは、「投稿」→「カテゴリ－」から変えられる。

カテゴリーごとに分けず、テーマカラーとして一括して変えるなら、「外観」→「カスタマイズ」→「色」で、Primary Theme Colorを変更。メニューバーやリンク色にも反映される。テキスト、ウィジェットタイトルの背景色など「色」から変えられる項目は他にもある。

私が変えたかった部分は、カテゴリーと「色」項目での変更で事足りた。こんなに簡単なら、季節ごとに色変えとかできちゃうわ！苦しかったTwentyFourteenのCSS修正は何だったんだ^^;

ちなみに、テーマを決めるのにやくだったのは、こちらの記事。

クールでかっこいいピン風ブログ｜WordPress無料テーマ Surfarama

色の組み合わせを考えるのに、こちらのサイトがとっても参考になった。

配色の見本帳 | キーカラーで選ぶ配色パターン

フォント指定、文字サイズは、cssで(汗

フォント指定、文字サイズの変更、見出しの装飾などは、子テーマを作ってstyle.cssを書き換えた。まぁ、まったくCSSをいじらず済むというのは難しいわけで…。ここからは、いつも何を修正したか忘れてしまう自分用の覚え書き(^^;

フォント指定と大文字解除
デフォルトで指定されてるフォントのほとんどは、”Open Sans”, Arial, Helvetica, sans-serifなので、テキストエディタで好みのフォントに置換。TwentyFourteenもそうだったように、Surfaramaも英字が大文字指定されてる部分あり。これを解除するため、「text-transform: uppercase」を「text-transform:none」に置換した。

文字サイズの変更
TOPページのグリッド表示は気に入ってるけど、なにしろ文字が小さすぎた。英文前提だからだろうね。小さいグリッド内の抜粋文は、11px相当。

style.cssで「GRID BOX STYLES」と書かれたコメント行以降から、それらしいところを見つけて、少し大きいサイズに修正した。iPhone表示は「@media only screen andなんちゃら」のところもかな。まだ、バランスいまいち？いろいろ試してみまする。

見出しにラインを付ける
記事内の見出しにラインをつけるためのcssも追加した。

Sarfaramaのstyle.cssには「h1, .h1 {}　h2, .h2 {} h3,…」のようにスタイルを書くところを空欄にしたcssが、いろいろと書かれている。『ここに書いてね』的な感じ？「want to style a page via body class? go ahead」とかコメントに書いてあったり。CSSも英語もイマイチよくわからないけど、あらかじめカスタマイズ用に準備されてるみたい。

肝心の見出しは、空欄にそのまま書くとTOPページのグリッド表示タイトルにもラインがついちゃう。記事内の見出しだけにラインを付けたかったので、「h2, .h2{}」の前に「.post_content h2, .commentlist li.comment article[id*=comment-]」を付けて解決した。

よくわからないながらも、今までのテーマ「Pinboard」や「TwentyFourteen」よりもCSSがわかりやすい気がする。