カスタマイズ前提のワードプレス無料テーマ「Gush2」間もなく公開
16
6
3
カスタマイズ前提として公開した「WordPress無料テーマ Gush」の次バージョンが8割ほど完成しました。
制作進行状況は Twitter でぽつぽつ公開していますが、前作と比べて変更した点や導入を見送った機能、また合わせて使っていただきたいプラグインなどをご紹介します。
“素のままでも”使える Gush2 はこんな感じです！
Gush からの変更点
メインの横幅を広げ、サイドバーはコンパクトに
初代 Gush はサイドバーの横幅を 336px に設定していました。
この数字にピンときたならおそらく Google AdSense を利用しているんじゃないかと思います。そう、コンテンツ向け広告ユニットであるレクタングル（大）がぴったり収まる設計ですね。
このブログもサイドバー上部にアドセンスを設置していたため 336px にしていましたが、広告配置の見直しに伴い横幅を 300px に狭めました。Gush2 も同様に 300px とし、かわりにメイン部分の横幅を広げています。
| バージョン | メイン部分 | メイン部分余白 | サイドバー |
|---|---|---|---|
| Gush | 684px | 39px | 336px |
| Gush2 | 728px | 62px | 300px |
メイン部分の横幅を広げたことで、728px * 90px のビッグバナーがぴったり収まります。ただし、コンテンツが表示される部分は前作同様 604px となっているので、そのぶん余白が大きくなっています。
本文の表示領域を広げることも考えましたが、個人的に横幅が広い記事ほど流し読みしますし、目も疲れるのでこのような形にしました。
表示領域の 604px を文字数にすると、メイリオの 16px 全角でだいたい36文字ほど。ブログにそのまま当てはめることはできないかもしれませんが、DTP の基本では横書きの場合に35文字が読みやすさの限界とされているので、妥当な線かと思います。
- DTP
- Desktop publishing の略。出版物の編集やデザインをPCで行い、プリンタで出力する一連の作業を指す。
もちろん、カスタマイズすれば各領域の横幅を自由に変更できますが、もしメインコンテンツ領域を広げるなら文字の大きさや間隔を調整したほうが良いでしょう。
参考これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開
ちなみに、なぜ 600px ではなく 604px かというと、とくに理由はありませんｗ 見た目を調整して一番しっくりきた、というだけです。
サイドバーを300pxにした理由
前述のとおり、このブログではサイドバーの上部にレクタングル（大）を設置していましたが、404ページで AdSense を表示するのは規約違反になることや、表示速度の遅さが気になって外しました。
こうなるとサイドバーがちょっと広すぎるかなーと思い、ブログのメインである記事部分を読みやすくするためにも横幅を狭くすることにしたのです。
かわりにメイン上部にビッグバナーを置いてみたところ、収益は2倍近く跳ね上がりました。誰でも絶対にそのような結果を得られるとは限りませんが、テストの結果が良好だった配置を Gush2 にも反映しています。
カスタマイズしなくても使えるデザイン
前作は未完成のまま放り投げていたため、カスタマイズしなければ味気ないデザインでした。今回はカスタマイズ前提という Gush のメインテーマを踏襲しつつ、素のままでもある程度使えるよう調整しました。
WordPress インストール直後に、テーマだけ Gush2 に変更したイメージはこのようになっています。
Gush2 イメージ（ホーム）
Gush2 イメージ（記事）
色を消すためにグレーを基調にしていますが、（センスはおいといて）前作よりマシになっているんじゃないかなーと思います。
サイドバーの上部にはSNSアイコンとRSSアイコンをつけ、検索フォームもデザインを変えました。いずれもアイコンフォントを導入することにより軽量化しています。
Gush2 イメージ（サイドバー上部）
その他、各要素にクラスやIDを追加したり、CSS を少しだけスッキリさせていますが、Gush をカスタマイズしまくったなら変更点がすぐわかると思います。
オリジナル404ページ
Gush には404テンプレート（404.php）がなかったため、index.php に「記事がありません」とそっけなく表示されるだけでした。
これだけだと寂しいので、404ページをカスタマイズできるようにファイルを追加しています。
デフォルトだとこんな感じでメイン部分に表示されます。
あれ、このひよこ、どこかで見た記憶が…
導入を見送った機能とその理由
今回のバージョンアップに伴い、Gush を愛用していただいている方からけっこうな数のご要望をいただきました。
たとえばアイコンフォントもそのうちの一つなのですが、いろいろ考えて導入を見送ったものもたくさんあるのでまとめておきます。
テーマカスタマイザー
WordPress3.4 から追加されたテーマカスタマイザーという機能がありますが、試験的にいったん実装したものの外しました。
理由は、このテーマが PHP や CSS を直接いじってカスタマイズしたい方向けだからです。
テーマカスタマイザーをいれれば、背景色やヘッダーまわり、見出しタグなどの配色が CSS をいじらずに調整できます。逆に、CSS をいじっても思うように反映されません。
ここらへんの機能を必要とする方は、Stinger5 なんかが最適かなと思います。
OGP やメタタグの出力
OGP や meta description の設定欄を作ることは簡単ですが、いろいろな WordPress サイトを見ていると実装しないほうがよさそうな気がして導入を見送りました。
たとえば SEO 系プラグイン導入により meta タグが重複していたり、単に先頭から100文字ぐらいの抜粋が description に設定されていたり。
適当なメタタグを出力するぐらいなら、何も記述しないほうがマシです。
参考WordPress初心者に知っておいてもらいたい本当はシンプルなSEOの話
もしこれらの機能を必要とし、さらに記事内への広告挿入やアクセス解析の導入を簡単に実現したいのであれば Simplicity が最適かなと思います。
見出しタグの変更
たまに「<h1> が2つあるけど問題ないの？」というご質問をいただきます。
結論からいうと何の問題もなく、このブログでもブログタイトルと記事タイトルにそれぞれ<h1>を割り当てています。
ただ、全体のアウトラインを HTML 5 Outliner で確認しながら見直しを行いました。<section> <article> <aside> の割り当てが初代と若干異なっています。
追尾型サイドバー
運営者目線で考えれば、サイドバーのスペースはどうしても埋めたくなってしまいます。『ここの余白がなんかもったいないから、有効活用したい！』と。
とくに記事が長ければながいほど、サイドバーの下にはたくさんの余白が生じることになります。が、この余白はものすごく大切なものだと再認識して、先日のエントリーで取り上げてみました。
参考サイドバーの追尾は効果があるの？みんなは何を置いているのか調べてみた
何かしらの効果はあるかもしれませんが、読者からうざいと思われることのほうが多そうなので実装はヤメ。
ここをカスタマイズするなら、記事下のCTAを作りこんだほうが良いと思います。
Gush2 と合わせて使うと効果的なプラグイン
Gush はシンプルな作りゆえ、カスタマイズがしやすく全体的に軽くなっています。
プラグインを何もいれていない状態なのであまり参考になりませんが、テーマ適用直後のスピードを GTmetrix で計測するとダブルAになりました。ロード時間は2秒台です。
プラグインをいれるほど重くなりがちなので、必要最低限のものを導入していきましょう。
運営スタイルで必要なものは変わりますが、オススメは下記の3つ。
人気記事ランキング WordPress Popular Posts
もっとも手軽に人気記事ランキングを作成できるプラグインで、ウィジェットはもちろんショートコードやテーマへの直接記述でも表示できます。
ちょっと手を入れるだけで、同カテゴリ内の記事ランキングにすることも可能。カスタマイズして使っている方が多いので、検索するといろいろな使い道がでてきます。
シェア数を高速表示 SNS Count Cache
このブログでも使用しており、つい先日バージョンアップしてさらに使いやすくなりました。
SNS公式ボタンを使うと、アクセスがあるたびに読み込むので表示速度にかなり影響します。ファーストビューや記事一覧で使うならこのプラグインで高速表示させましょう。
参考ツイート数やはてブ数を取得して高速表示できるSNS Count Cache
設定なしで画像を圧縮 EWWW Image Optimizer
これからアップロードする画像だけではなく、すでに使用している画像やテーマファイル内の画像まで簡単に圧縮してくれるプラグイン。
記事内で画像を多用するなら、必須です。
ちなみにこのプラグインを使うと、JPEG はすべてプログレッシブに変換されます。
参考JPEGには2種類ある！プログレッシブとベースラインの違いは何？
さいごに
テーマファイルをごりごり編集して、オリジナリティあふれるブログを作りたい！という方におすすめしたい Gush2 は間もなく公開です。
今回はさぼらずに説明書や FAQ を充実させたいと思いますので、なにとぞよろしくお願いします。もしかすると、テーマ本体だけ Twitter で先行公開するかもしれません。
それでは、また。
個人的に気になっていた部分も2では修正されているようで非常に楽しみです。
広告の位置も調度Gush2の位置にしようとしていたところなので助かります！
公開まで気長に待ってます！