再びWordPress自作テーマ始動!カスタマイズの参考になるかもしれないこだわりポイント12個大公開!

たらハコ2015年秋の新テーマ公開!こだわりポイントを大公開

こっそりブログ「たらハコ」を始めて2年が経ちました。(tarahako.comを取得してからはまだ1年半)

その記念ってわけじゃないですけど、またブログのデザインを一新しました!

せっかくなのでカスタマイズの参考になるかもしれないし、ならないかもしれないポイントをダラダラと説明してみようと思います。(参考にならないかもしれない≒マニアック過ぎて参考にならない)

今回はSTINGER依存を止めて、「自作WordPressテーマだ」と言ってみます。

それではどうぞ御覧ください!

7人のブログ侍

七ブ侍はブロガー14人(週イチ6名+月イチ2名+季イチ6名)が日替わりでブログ更新をするリレー企画です!

たらハコ2015年冬の大リニューアル!

相変わらず毎週どこかしらデザインなり、ロジックが変わるブログを運営してます。よっひー(@yosiakatsuki)です。

今年の春くらいから少しずつ考えてきた新テーマがようやく公開となりました!

11月中にやりたいことの一つに「新テーマ公開!」って言ってましたが有言実行できて良かったです。(代わりに他が犠牲に…)

くだらない前置きはこれくらいにして、さっそく今回のテーマ大改造の目玉を紹介します!

今回は自作WordPressテーマ?カスタマイズポイント12!

それでは、今回のカスタマイズポイントです!

  1. 「縦」の流れを意識
  2. 「塗り」を極力少なく、シンプルに
  3. 隠れたコンテンツを「悪者」扱いするということ
  4. 検索ユーザー、購読者、運営者を意識したTOPページ
  5. 購読者数を増やす事を目的とした記事下エリア
  6. Feedly購読者数インジケータ
  7. 広告配信の悪あがき
  8. 追従サイドバーの復活
  9. 乱暴なイベントトラッキング
  10. 画像の非同期読み込み機能を自作
  11. CSSの配信をGoogleさんの推奨方法に
  12. Facebook PagePluginをjQueryでレスポンシブ対応
  13. 味噌汁の具は何が好きですか?

一応今回は「自作のWordPressテーマ」と言ってますが、相変わらずSTINGR5っぽさは所々に残ってます。

「STINGERカスタマイズ」って言われれば「そうかな…」とも思うので何とも言えないですね。

(あと「STINGER」って言ってたほうがいろいろと食いつきがいいっていう黒い部分は隠しておいて…)

簡単ではありますが、各ポイントについてもう少し深く説明していきます!

1. 「縦」の流れを意識

目線を縦に流すことを意識したテーマに変更

最初はデザイン面でのコンセプトから!

今まではTOPページやカテゴリ一覧などを2列のカードビューというかタイルレイアウトっぽいスタイルで作っていました。

作った当初は「いい感じだ!」と満足していましたが、今回はタイルレイアウトは止めて、もう少し「ブログっぽい」スタイルに戻しました。

理由は単純で、僕が「横に目線を動かすのが面倒くさい」と感じ始めたからです…

ここの部分はPC表示での話なので、スマホで観るときは全然関係ないのですが、Google Analyticsでデバイス別のアクセス数を調べてみると意外とPCからの閲覧が多くなったので、最近はきちんとPC表示も意識するようになりました。

「見た目がカッコいい」とか「他と違う」っていうのも大事ですが、「見ていて疲れない」ということを忘れちゃいけないなと思います。

ちなみに、新しいテーマの一覧表示で使うためのサムネイルは早いうちから準備しておきました。

新しいサイズのサムネイルを定義した時でもサムネイルを再作成してくれる便利なプラグインがあります。

2. 「塗り」を極力少なく、シンプルに

ベタ塗りをすくなくして、線で表現するように変更

今までもずっと「シンプルなデザイン」を意識はしていましたが、今回はもっとシンプルにしてみました(自己評価)

ヘッダ、フッタ部分は背景を「ベタッ」と塗っていますが、他の部分は極力「塗らない」ように作っています。

合わせてアニメーションも極力少なくして、リンクをホバーした時にふわっと文字色が変わる程度におさえています。

「塗り」と「アニメーション」についても、「見ていて疲れる」と感じたので極力減らす方針にしています。

特にアニメーションは他のHPやブログを見ていて、上から落ちてきたり、横から飛んできたり…

「もう…うざったいなぁ」と思うものもあるので、自分のブログではやらないようにしています。

3. 隠れたコンテンツを「悪者」扱いするということ

ナビゲーションには重要な項目を隠さず置く

タップしないと開かないメニューって今ではもう標準的になってきています。

違いといえば縦に開くか、横ににゅっと出てくるか…

ただ、「そのメニュー本当に開かれてるの?」ということに疑問を持ってきたので、メニューというか、ナビゲーションは常に表示するタイプに変更しました。

きっかけは次の記事を読んだことからです。(末尾の続報まで含めて読んでみてください)

ナビゲーションに隠してもいいようなリンクを「なんとなく置いておく」っていうのはどうもおかしい気がしてきました。

「リンクを置いておけばもしかしたら誰かがクリックして、PVアップに繋がる」かも知れません。

でも「で?なに?PV上がったって報告記事出すわけ?」ってなるわけです。

もし、「ナビゲーションに読んでくれた人の興味のあることの記事一覧のリンクがあって、関連情報を得ることが出来てユーザーに価値のあるリンクになっている。」

って言うなら、「そんな価値のあるリンク隠してどうすんのよ」って事をツッコミ入れながら考えていたら「隠さない!隠すくらいならいらない」って結論にたどり着きました。

ここは試行錯誤の繰り返しなので、今後は考えが変わるかもしれません。トライ&エラーは大事です。

4. 検索ユーザー、購読者、運営者を意識したTOPページ

検索ユーザーの他、常連さんと運営者を意識

今までは、TOPページを開くと最初にどでかくロゴが表示されて(ここは今回も継続)、続いてイチオシカテゴリのPVランキングが続いていました。

これは、当ブログで一番検索流入が多い「夏フェス」に関連した記事の露出を増やすための施策だったりします。

でも、今回はそこに購読者、運営者(僕)が見やすくなる工夫として、最新記事を3つほど最初に出すようにしました。

購読してくれている方は少なくともこの「たらハコ」か僕自身に興味を持っていただいていると思うので、「たらハコ」の記事の露出を少し上げるための施策です。

おかげで運営者としては最新記事の更新通知を出す時の作業が楽になります!(今までは最新記事まで結構なスクロールが必要でした…)

ちなみに今回のTOPページのコンテンツをざっくりまとめると次のようになってます。

  1. 最新記事 3件
  2. 「夏フェス」関連カテゴリの記事5件(独自カウントしたPV順)
  3. 「ブログカスタマイズ」関連カテゴリ記事5件(独自カウントしたPV順)
  4. 検索フォーム
  5. プロフィール
  6. Facebook PagePlugin
  7. 1日のPVランキング5件
  8. 最新記事からの記事一覧(WordPressのメインループ部分)

記事一覧までが遠いのですが、恐らく「記事一覧が見たい」という人は目的がはっきりしているので記事一覧まで遠くても頑張ってたどり着いてくれると思っています。

「なんとなくTOPも見てみた」という方はおそらく1〜4当たりをみてアクションするか離脱するかを考えると思います。

ココらへんはGoogle Analyticsのイベントトラッキングでサイト内の全クリックをトラキングできるようにしているので、経過をみつつ調整します。

5. 購読者数を増やす事を目的とした記事下エリア

購読者増加を意識したフォローボタン配置

最近、「アイキャッチ画像+Facebookページのいいねボタン」という組み合わせのものが流行ってるじゃないですか。

僕も同じことやりたいんですけど、「なんか同じことやってもつまんないかなぁ…」ということでいいねボタンとFeedlyの購読ボタンを並べて配置してみました。

今まではシェアボタンの下に購読ボタンがあったのですが、「記事のシェアってきっとみんなアプリでやってるよね?」

ってことで、シェアボタンより上に購読ボタンを持ってきました。

ココらへんもGoogle Analyticsのイベントトラッキング結果とにらめっこしながら位置調整していきます。

6. Feedly購読者数インジケータ

Feedly購読者をインジケータ表示する自己満コンテンツ

今回の目玉の一つはFeedly購読者数のインジケータ設置かもしれないです。

一応僕もIT系技術者なので、「128」とか「256」とか「192.168」のような数字をみると心が踊るわけです。

今月に入ってFeedly購読者が128を超えて「次は256突破を目指そう!」ということで、目標を可視化してみました。(しかもわざわざテンプレート内に埋め込みました)

ユーザーにとっては何も関係ない自己満項目なので、そのうち外すかもしれないですw

7. 広告配信の悪あがき

実は以前のテーマから実装してありましたが、当ブログの記事下の広告エリアは公開日からの経過日数によって広告とシェアボタンの位置が入れ替わるようになっています。

公開すぐはシェアして欲しい、公開から少し立って、検索からの流入がほとんどになった記事は広告をクリックして欲しい…

というゲスなカスタマイズをしています。

ゲスい話なのであまり触れません。ここらへんは。

ぜひ過去記事とこの記事を見比べてみてください。

8. 追従サイドバーの復活

スクロールに追従させるサイドバーをjQueryで自作

「追従メニュー邪魔だな」と思っていた物をわざわざまた復活させました。

理由は「なんとなく」です。

でも、意外とクリックされています。入れてよかった。

実装は全てjQueryでコードを自分で書いています。

便利なjQueryプラグインもあるようですが、自分で作らないと勉強にならないのでスクリプト関連はほとんど自作です。

9. 乱暴なイベントトラッキング

いままでやろうやろうと思っていた全クリックイベントトラッキング。

なんとなく頭で描いていたものを実装してみたら、どうやら理想の動きをしてくれているみたいなので一安心です。

これでどこがよくクリックされているとか、どのページからどのページヘ良く遷移しているというのがわかるようになりました!

また「乱暴なカスタマイズ」として記事化しようと思います。

10. 画像の非同期読み込み機能を自作

「Lazy Load」といえばピンとくる方も居ると思います。

ここらへんは既に便利なプラグインとして公開されているものがありますが、僕の作るテーマでは全く期待通りの動きをしてくれないので自作しています。

ここは何が悪いとかではなく、「相性」なので仕方ないかと…

大きく関わるのはjQureyの読み込みタイミングでしょう…(心当たりが大いにあります)

ざっくりどういう動きかを説明すると、ページ読み込み時にはimgタグのsrc属性に1×1の透過PNGなどを指定して画像の読み込み量を減らします。

ページ読み込み後、ページをスクロールしたタイミングでimgタグに独自属性(例:data-sec等)で指定しておいた本来表示したい画像のURLをsrcと入れ替えて順次画像を読み込んでいく…という動きです。

前のテーマでも実装済みでしたが、今回はGoogle Botが読んだ時は非同期読み込み機能を行わず、きちんと画像もインデックスしてもらえるように調整しました。

11. CSSの配信をGoogleさんの推奨方法に

Google PageSpeed Insightsの結果をみた時に「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という提案をされたことがありませんか?

その修正項目のヘルプの中に「CSS 配信を最適化して下さい」というリンクがあり、次のページ案内されると思います。

今回は上のヘルプのとおりに、ファーストビューに関わるところをインライン化して、その他をhtmlの閉じタグ外にだすようにしました。

なかなか塩梅が難しいですが、ここはsassが使えるとあとから調整も簡単にできるので便利です!

12. Facebook PagePluginをjQueryでレスポンシブ対応

以前、FacebookのPagePluginをレスポンシブ対応させる方法について書いたことがありましたが、この方法だと、ページ読み込み時に一瞬横に隙間が発生する現象が見られたので、対策をしました。

コード量もそれほど多くないので、結構お手軽なカスタマイズだと思います。

記事化しますのでお待ち下さい。

記事化しました!

13. 味噌汁の具は何が好きですか?

最後は…

宣伝です!

毎年12月の一大イベント「アドベントカレンダー」に僕も参加します。

そして、Adventarのアドベントカレンダーで「味噌汁の具」というカレンダーを作ってみたのでぜひご参加下さい

なんで「味噌汁の具」なのかは僕でもわかりません(というか覚えてません)。ふと思いつきでカレンダー作りましたw

12月は「味噌汁の具」でワイワイやりましょう!

Adventarのアドベントカレンダーの参加方法はいくつかありますが、Twitterアカウントがあれば簡単に参加できるようになってます!

ガシガシ参加お待ちしています!

追記:「味噌汁の具 Advent Calendar 2015」ご参加頂きありがとうございました。参加者の記事まとめました!

2016年の味噌汁の具の参考にどうぞお使い下さい!

よっしーのひとこと

よっひー

まだいろいろと詰めが甘いところもあって(例えばパンくずリストのあたりちょっとずれてる)ちょっとずつ調整はしていかなきゃですね…

あと、これまでテーマを改造しては毎回「カスタマイズ関連の記事を書く」と言いながら結局「やるやる詐欺」で終わってましたので、今回は書きます!時間はかかるかもしれないけどw

ぜひ当ブログを購読してお待ち下さい!(記事執筆時点で138人の方にFeedlyで購読頂いていたので、目標の256人まではあと118人です!)

ではまた。

明日のブログ侍は?

明日の七人のブログ侍は木曜日担当、NORY* NOTEのノリハナ(@infnity_87_)さんです!お楽しみに!

七人のブログ侍とは

「七人のブログ侍」とは、七人のブロガーが担当曜日を決め、日替わりで更新していくリレー企画!

他の侍の記事も是非読んでみてください!

よっしーの他の「七人のブログ侍」記事も見てね!

7人のブログ侍