ふたしずく

札幌発。アラフォーOLのお弁当とダイエット。

*

ブログのデザインをSIMPLESTERにしました。

      2015/06/07

SIMPLESTER

デザインのカスタマイズもだいぶ落ち着いてきました。
ベースがしっかりしているとカスタマイズも楽ですね。
これがイチから全部自分でやるとなると、途方もないことになりそう。。。

私が選んだのは、STINGER5とその子テーマであるSIMPLESTER ver4です。
こんなに女子なデザインにしたのは初めて  :roll:

Sponsored Link

STINGER5 + SIMPLESTER ver4選んだ理由

それはずばり「ほぼオールインワンのデザインだから」です。
どういうことかと言うと、だいたい以下の通り。

簡単なカスタマイズが楽々

テーマカスタマイザで配色やロゴ変更等が簡単にできるので、とりあえず設置しただけでもそれなりになるのが良いところです。
ところがSTINGER5はかなりシンプルです。
見出しタグ(h2やh3)に多少の装飾はありますが、色を変えてもシンプルなのは変わらずです。
そこを可愛い感じにしてくれるのがSIMPLESTERです。

雰囲気が同じでデザインが異なるバージョンが4つあるのですが、私はシンプルながらもおしゃれ感があるver4にしました。
さ、最新だから選んだわけではないですよ。

スマホ用のデザインがある

だいたいのテーマはPC表示のみなので、自分でCSSを書くかWPtouchのようなプラグインを導入するか、あるいは放置するか(苦笑)の選択しかありません。
いずれにしても、PC用の表示に合わせるのがすごく面倒です。

ところがSTINGER5は、最初からスマホ用のデザインがあります。
しかもレスポンシブデザインです。
カスタマイズする人にとっては、いじるファイルが少ないメリットが大きいですね。
もちろん他にもメリットはありますし、当然デメリットもあるのでそこはよく考える必要がありますが。

ページのトップへ移動するボタンがある

PCでは私はあまり必要性は感じないのですが、スマホだとナビゲーションがページトップにある事が多いので欲しくなります。
特に長い記事だと、ページトップに戻るボタンがないと面倒でサヨナラって事が多いので、他のコンテンツを見てもらう意味でも必要では無いでしょうか。

SNSボタンが設置済み

こうやって公開している以上、世の中の反応は気になります。
最低でもTwitterとFacebook、はてぶはシェアアイコンつけたいなと思っていたのですが、標準装備なら問題ナシです。

関連記事の表示が可能

特に検索で記事にたどり着いたとき、関連記事があるとついでに読んでしまいます。
自分が必要なら他の人にも必要だの精神なのですが、これも多くのテーマは対応していないんですね。
WordPress Related Postsのようなプラグインを導入して、CSSで見た目を調整して、をしなくて済むので楽ちんです。

広告の設置スペースが標準装備

少しでもお小遣いが欲しい欲深いワタシ、当面の目標はブログの運営費です。
と言っても効果的な広告の設置場所とか調べて設置というのは、ちょっとだけ難易度が高いです。

STINGER5は適度な場所に広告を配置してくれるので、広告を設置しようと思ったらすぐに始められるのがいいところです。
SIMPLESTERだとさらに、記事の下の広告が横並びになってくれて見た目もきれいでいい感じになります。

追加のカスタマイズ

いくら優れていても、やっぱり少し物足りない部分があります。
補う意味で以下のカスタマイズをしました。

ヘッダロゴを大きく

SIMPLESTERのヘッダロゴは小さいんですよね。
CSSファイルを見ると縦が25pxになってます。
ここを50pxに変更しました(公式にも推奨されているサイズです)

34行目の25pxを、以下のように50pxに変更してください。

長い記事に目次を設置

記事を書くとどうしても長くなってしまう傾向があります。
少しでも見やすくということで、見出しをまとめて目次を作りました。

さすがに手動では忘れたり落としたりする可能性が高いので、Table of Contents Plusを導入しています。

記事の途中に広告を設置

記事を読んでいる最中に広告が出てこないと、特にスマホでは広告なしとそれほど変わらない気がしてしまいます。
小市民な私は少しだけ気になるので、記事の途中に設置することにしました。

手動で入れても良かったのですが、STINGER5のアップデートがある度に触るファイルが増えてしまうのでQuick Adsenseで対応しています。
このテーマでは必要ないmoreタグをあえて使用して、表示位置をコントロールしています。
重くなるようならAddQuicktagで対応しようかなと考えてはいますが。

SNSボタンを増加&デザイン変更

オフィシャルのボタンは可愛くないんですよね。
当然のことながら見た目もバラバラで統一感もありませんし。

ということでSIMPLESTERのカスタマイズ【SNSボタンの変更】 | とらっぷるを参考に変更しました。
こちらの元ネタサイトを参照にカスタマイズしてみてもうまくいかなかったんですよね。
なので超感謝です (*^_^*)

タイトル下の写真をアルバム風に

背景画像から完全に浮いた普通の写真を入れるので、あえて浮かせるデザインにしてみました。
アルバムに貼っているみたいで可愛いかなぁと考えてやっています。

ソースコードはCSS3を使ってできる画像まわりのエフェクトやスタイリング18 | Webロケッツマガジンの「16. 差し込んだ風」をまるまるコピーです。
SIMPLESTERのCSSファイル一番下に追加するだけでOKです。

サムネイルをまるく

タイトル下の画像を変えたので、サムネイルも変更してしまえと勢いでやりました。

タイトル下と同じデザインで一度やってみたのですがくどくなってしまいました。
サイドバーのサムネイルはまんまるで可愛いのですが、トップページに並ぶ方はなんだかスペースが多くて落ち着かない感じです。
色々試して今の形の角丸に落ち着きました。

ソースコードは全10パターン!Stinger5のサムネイルをスタイリングする方法【WordPress】を参照しています。
こちらも、SIMPLESTERのCSSファイル一番下に追加するだけでOKです。

まとめ

もう少しいじるところはあるかなぁと感じますが、大きな変更はこれで完了予定です。
あまり触らなくてもいい感じに仕上がるので、やっぱり完成度が高いテーマだと思います。

かなりオススメ。

 - Wordpressのカスタマイズ ,