このブログはWordpressを使っていて、テーマはSTINGER3というのを使っています。（2014年7月現在）
Wordpressブロガーさんでは有名なテーマなので、いまさら紹介する必要もないかもしれませんが、このテーマがとても使いやすいなぁと思ったので知らない方の参考になればと思い私なりにカスタマイズポイントなどを書いてみます。
初心者でも使いやすいWordpress用テーマ「STINGER3」とは
WordPress用テーマ「STINGER3」の特徴として
- なんとフリー！
- SEOに強い
- アドセンスの設置も簡単
- 基本的な機能はプラグインがなくても揃ってる
- スマートフォンにも最適化されてる
などなど、WPブロガーさんの間でも話題になってたり前々から気になっているテーマでした。
STINGERをカスタマイズしてみる
一応、私のWordpressに関するスキルはというと、Wordpressのテーマは1から作れるのでたぶん初心者ではないと思います。(たぶん…)
今回も自分で作ってもよかったのですが「根っからのカスタマイズ好き」の血が騒ぎ、ここは前から気になってた「STINGER3」をカスタマイズすることにしました。
CSSをSass化して編集しやすくしてみた
STINGER3をダウンロードして真っ先にやったことといえば、CSSのSass化！
この作業がもう後悔するくらいめんどくさかったのですが、Sass化してからの作業のしやすさったらもう♪
これだからやめられない。 あ、CSSをSass化したのもただのSass好きだからじゃありませんよ！
テーマのPHPファイル（header.phpやsingle.phpなどなど）はできるだけそのままで、見た目の変更はほぼCSSでやろうと思ったからです。
この方法だと、「STINGER」がバージョンアップしてPHPファイルが変更されてもCSSをちょっと修正するだけで対応できるかなーと思います。
STINGER 子テーマのすすめ
私の場合はがっつりCSSを書き替えちゃってますが、いきなり、カスタマイズするのは不安・・・って人は、カスタマイズ用の「子テーマ」を作って作業するといいと思います。
「必要なところを書き換えてしまってテーマがおかしくなった！」なんて時も親テーマは無事なので安心して作業できます。
ぜひ参考に！STINGERのカスタマイズサイト・子テーマ配布サイト
STINGER3っぽくないデザインにするには
ノーマルのままでもとっても使いやすい「STINGER」ですが、やっぱり人と同じじゃ面白くないのがB型なので、どこまで「STINGER3」っぽくなくするかがカスタマイズの課題でした。
ということで、どんな所が「STINGER3」っぽいのかを探ってみます。
ここらへんが「STINGER3」っぽいかも
- 見出し2のふきだしっぽいやつ
- 見出し3のチェックマーク
- bodyの背景色
デフォルトの背景色は「#f3f3f3」で薄いグレー。
パッと見、この3ヶ所をどうにかすれば、「STINGER3」っぽくなくなるような気がします。
STINGERのここをカスタマイズしてみた
- 見出し2のふきだしっぽいやつはこう変えてみた
- 見出し3のチェックマークのとこはこう変えてみた
- bodyの背景色
デフォルトの薄いグレーからちょっと濃いグレーになっただけだったりw
header.phpとか一部編集してますが、ほぼCSSでここまでできました！
画像もロゴや背景の水玉とかくらいで、アイコンなどはWEBフォント「Font Awesome」を使用してます。
STINGERカスタマイズの感想
WordPressのカスタマイズ用テーマ（ブランクテーマ）は、「Bones」や「Roots」や「Underscores」などなどありますが、ブログ用にカスタマイズするなら「STINGER3」もありだなと思いました。
「STINGER」やっぱりいいですね。カスタマイズ楽しい♪
あ、そういえばモバイル用CSSの方もかなりカスタマイズしてるんだった！
基本的な機能が揃ってるので、見た目をCSSで編集するだけでも色々カスタマイズできますよー。
私的にはまだまだ気になるところが20個くらいあるので、ボチボチとカスタマイズしていこうと思ってます。
でも、他のテーマもカスタマイズしたくなってきたー。
私ってカスタマイズ病w
