ワードプレステーマを「STINGER5」にした理由とカスタマイズした点について(2015年5月)

このたび、WordPressテーマをSTINGER5に変更しました。そこで今回はちょうど1ヶ月前にリニューアルしたばかりなのにも関わらずテーマを変更した理由、そして導入後にまず手を加えた点について書いていきたいと思います。

追記:2015年7月、新テーマへ移行しました

STINGER5に変更した理由

テーマ変更を決意

そもそもなぜテーマを変更することにしたのか。それには2つの理由があります。

まず、前のものはカスタマイズしすぎてコードが滅茶苦茶になっていました。ブログの表示自体は問題ありません。しかし、その基となるPHPファイルやCSSファイルは、無駄な記述が増えたためコードがぐちゃぐちゃでした。また、一部を変更すると思わぬところに不具合が生じてしまうこともありました。

もう一つはSEO的な観点によるものです。前のものは見出しタグの使い方がおかしかったり、HTML5に沿ったマークアップが為されていなかったりと気になる点が色々ありました。修正をしつつ誤魔化しながら利用し続けていたのですが、最近になって元からちゃんと最適化されているものも使ってみたいという思いが芽生えてきたのです。

以上、大きく2つの理由からテーマ変更を決意しました。

STINGER5を選択

では、なぜ多数存在するテーマの中からこれを選んだのか。無料ということもひとつあるのですが、一番はSEOに強いという実績があったためです。

SEOに強いと謳うものはたくさんあります。つい最近まで使っていた海外の有料テーマも実はそうでした。が、先ほど述べたように問題が色々とあったのです。となると、謳い文句だけでなく実績の方も重視する必要がありそうです。

それを考えたとき、僕の頭に真っ先に浮かんだテーマがありました。
そう、超有名なSTINGERです。

調べてみたところ、導入後に検索順位の上昇と共にアクセスも増えた(もちろんコンテンツの質が良いという前提ですが)という事例が多くあることや、SEO関係の仕事をしている人からも高い評価を受けていることを知りました。

SEOに強く、実績も抜群。カスタマイズをしやすいとの声も多かったので迷いなく導入を決定しました。

カスタマイズした点

続いて、導入後に手を加えた点について紹介していきたいと思います。基本的には導入前と同じデザインになるようにいじっていきました。

ヘッダー(メニュー以外の部分)

まずヘッダーを指定のピクセルではなく、横幅いっぱいに広がるようにしました。#wrapperの開始タグを</header>の後ろに移動し、<header>と</header>の中に#headerと.header-innerというdivのくくりを追記してCSSで調整しました。

ブログタイトル部分は画像ではなく、テキストにGoogle Fontsを適用させました。PCを想定したウインドウサイズでは、ブログの説明部分と共にinline-boxで横並びにしています。

同じくPCを想定した画面幅では、ヘッダーの右側にボタンを4つ表示させています。左からツイッターアカウント・GootaLifeのフェイスブックページ・RSS・お問い合わせフォームへのリンクとなっています。これはposition:absolute;で位置を指定しています。

ヘッダー(メニュー部分)

こちらも横幅いっぱいに広げるために#header-navと.header-nav-innerというdivのくくりを追記しています。メニュー自体はデフォルトであったのを消し、以前に使っていたコードをコピペしました。CSSも同じくコピペして作業時間の短縮を図りました。

また、スマホ・タブレット環境でのメニューはかなり手を加えています。jQueryのコードも別のものを用意し、見た目は[WP]レスポンシブメニューを実装出来るjQueryプラグイン「MeanMenu」を導入・カスタマイズした話で紹介しているものに近付けています。

ちなみにこんな感じです↓

stingerカスタマイズメニュー

MENU▼をタップすると、次の画像のようにメニューが開きます。

stingerカスタマイズメニュー2

さらにカテゴリ一覧の+をクリックすると、各カテゴリへのリンクが表示されるようになっています。+じゃなくても同じ行ならどこでもOKなのは秘密。

記事タイトル下にアイキャッチ画像

記事ページにアイキャッチ画像を表示させるようにしました。本文幅いっぱいには表示させていないのは僕の好みです。が、以前も同じようにした後に本文幅いっぱいに表示させるように変更したことがあるので、今後また変わる可能性はあります。

moreタグの後ろにグーグルアドセンス

記事ページではmoreタグの後ろにアドセンス広告を挿入しています。functions.phpにコードを記述して実現しているのですが、元々どこからこのコードを持ってきたのか覚えていないため、この記事でまんま載せるのはやめておきます。しかし、「moreタグ アドセンス」と検索するとコード自体はすぐ見つかるので、気になる方は探してみてください。

本文下に各種SNSボタン

元々SNSボタンは表示されるようになっていたのですが、これを全てオリジナルのボタンに変更しました。各サービスの公式ボタンが表示されないことが結構あったためです。

ボタンは「Shufulife」さんの【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよという記事にあったものをベースに作成しました。同じくSTINGERで運営されている方なので、ボタンのカスタマイズも楽に出来ました。

なお、このボタンは「SNS Count Cache」というプラグインを利用しており、特定のウインドウサイズ以上では記事タイトル下にも一部サービスのシェア数を表示させています。

また、これはサービスの公式ボタンですが、ツイッターのフォローボタンやフェイスブックページへのいいね!ボタンを置きました。ブログの購読者が増えればいいなという発想です。

簡易プロフィール

SNSボタン等の下に簡易的な自己紹介を載せてみました。前のテーマでサイドバーに載せていたものを本文下に持ってきた形になります。僕がかつて経験した「場面緘黙(かんもく)」という言葉を知ってもらえたらという狙いもあります。

関連記事にYARPPを使用

STINGER5には同カテゴリーの記事をランダムで表示させる機能がはじめから備わっていました。しかし、より関連性の高い記事を表示させたいと思い、カテゴリだけでなくタイトルや内容も考慮する「Yet Another Related Posts Plugin」を使うことにしました。

前後記事へのリンク

デフォルトではカテゴリー問わず前の記事・次の記事へのリンクが表示される仕組みになっていたのですが、これを同カテゴリーに絞るように変更しました。

例えば「場面緘黙」の記事に検索でやってきた方がいたとします。ワードプレスのカスタマイズ記事が前後の記事に表示されていても、きっと興味を示してくれないでしょう。それよりも同じカテゴリーの記事の方がクリックしてくれる可能性は高いはずです。

スクロール広告用ウィジェットに人気記事

元々スクロールに追従する広告用のウィジェットが用意されているのですが、僕はここに広告ではなく人気記事を表示させています。

以前は[WP]「Standard Widget Extension」を使ってサイドバーの人気記事を固定表示させましたで書いたようにプラグインを利用していたのですが、このたびそのプラグインを外すことが出来ました。

なお、人気記事の表示には「WordPress Popular Posts」というプラグインを使用しています。また、タブ切り替えのjQuery等で参考にしたサイトへのリンクは1ヶ月前にリニューアルした時の記事で張っているので、興味のある方はご覧ください。

ファビコン

デフォルトではSTINGERのファビコンが設定されているのですが、これを自作のものに変えました。作成にはファビコン favicon.icoを作ろう!を利用しました。画像をアップロードするだけでico形式のファイルが自動生成されるので簡単でした。

404ページ

前のテーマの時にGoogleのウェブマスターツールヘルプを参考に404ページを作り直しましたで作成した404ページを今回も採用しています。以下、参考までに画像を貼っておきます。

デフォルトの404ページ↓

stingerデフォルト404ページ

変更後の404ページ↓

stingerカスタマイズ404ページ

変えなかった点

ここまで見てきたものの他にも、細かいところでは見出しのデザインやページ送りの部分なども変更しました。

しかし、全くいじっていない部分もあります。

吐き出すソースは出来るだけ触らずにデザインを変えて貰えれば一番良いのかなと思います。

WordPressのテーマ「Stinger」のカスタマイズについての注意点より

テーマ作者のENJIさんがかつてご自身のブログ「ENJILOG」でこのように言っていました。僕もこれに従い、Hタグや構造化タグなどはいじらないようにしました。

おわりに

さて、今回はSTINGER5に変えた理由とカスタマイズした点について書いてきました。SEOに強いテーマにしたことで今後どうなるか楽しみです。

しかし、忘れてはならないことがあります。

衝撃的な報告を頂き続けるStingerですが、これだけは知っておいて欲しい。

Stingerは魔法のテンプレートではありません!

永江さんは言うまでも無く、PVが3倍になった「ぎゅう」さんに関しても、
個人の努力、力があった上での結果です。

「PVが3倍に!」がなぜ起こるのか?WordPressテーマStinger2について作者が語るよより

これまたENJIさんのブログ「ENJILOG」からの引用ですが、STINGERにしたら必ずアクセス数がアップするというわけではありません。当然ながら書いている人の努力や良質なコンテンツが必要となるんですよね。

このことを心にしっかりと留めつつ、ブログ運営に励んでいきたいと思います。

それでは、最後までお読みいただきありがとうございました!

この記事を書いた人

エヌジマ

エヌジマ

三十路の唐変木。学校など特定の社会的状況で話せなくなる場面緘黙(ばめんかんもく)を過去に経験。現在も雑談は大の苦手で、時に緘黙の症状が出ることも。このブログでは自分の日常や「紹介したい!」と思ったものを中心にいろいろ書いています。詳しくは当ブログについてをご覧ください。また、お問い合わせはこちらのフォームからどうぞ。