(K) 脱TwitterBootstrapを目指して。当ブログスマートフォン用モバイルテーマをバージョンアップさせました!

最終更新日:
Screenshot 2012 10 14 10 51 45

長く使ってきたTwitter Bootatrapライクの当ブログスマートフォン用モバイルテーマ。
この度、脱Twitter Bootstrapとともにバージョンアップの運びとなりました。

バージョンアップに辺り、気を配った点など紹介したいと思います。
気に入ったら参考にしてくれてもいいんだぜ!

前テーマの問題点

当ブログでの初フレームワーク導入ということでイイコト・悪いコトたくさんありました。
問題点といえるのは以下三点。

  1. コンテンツを色々と詰め込み過ぎ
  2. 読み込みスピードの遅さ
  3. 細かな変更の行いにくさ

1. コンテンツを色々と詰め込み過ぎ

トップページにはカテゴリ・タグの一覧をタブにして設け、RSS購読、Facebookページヘの誘導を行うなど。

  • 初めて見に来ていただいた方には、ごちゃごちゃして見づらい
  • 何度も見に来ていただいている方には、不要なコンテンツ

がとても多いことに気づきました。

この理由ひとつでも十分テーマ変更の理由になるわけですがまだあるんですよね。。

2. 読み込みスピードの遅さ

1. もその原因といえるのでしょう。外部のAPIをたくさん使っているためその読み込みが全体として読み込みの遅さに繋がっていました。

これも改めなくては。

3. 細かな変更が行いにくい

これはテーマ変更をやる度に思っていること。
特に今回は、Twitter Bootstrapフレームワークの縛りもあったため余計にそう思うのかもしれません。

少し手間をかければフレームワークを使わなくてもなんとかなる。もうPC・モバイル同テーマでもないのでフレームワークを使わなくてもなんとかなる。

あとこれはTwitter Bootsrtrap自体に感じたことですが、誰が作っても同じようなテーマになってしまうことでしょうかね。

新テーマ作成までにやったこと

  1. 脱 Twitter Bootstrap
  2. 良いものをマネる
    • ヘッダ画像を使うタイミング
    • 本文までの距離をできるだけ短く
    • 最小限のメニュー機能

  3. 読み込みスピードを高めるために
    • 使用するコンテンツを厳選
    • テーマファイルの軽量化

  4. より使いやすく
    • インデックス系は縞々に
    • ナビゲーションを使わずに、自動で無限スクロールする「Infinite Scroll」を導入

記事本文は普段見る度に文字サイズ・行間などしつこく変更しているため、今回はそれほど変えていません。

今回はいままでTwitter Bootstrapを中心としていた外観部分をごっそり変えました。

2. 良いものをマネる

テーマ変更に踏み切った一番の理由がこれ。良いものはマネてみたい!
同時にスキルアップも狙っています。

今回は普段からお世話になっている「Webデザインレシピ」様を参考に私の出来る範囲で新しいことをやってみました。(見よう見まねなので実際に同じ事をやっているかは不明)

ヘッダ画像を使うタイミング

以前「初夏のブロガー感謝祭キャンペーン」でふじもなおさんに描いて頂いたヘッダ画像

[K] ふじもなおのアトリエで描いていただいた似顔絵が届きました!
[K] これでオマケ…だと!?ふじもなおのアトリエ「初夏のブロガー感謝祭キャンペーン」のオマケ画像が届きました!

現在当ブログFacebookページの顔としてありがたく使わせていただいております。
ただ、前々から「こいつをFacebookページのみに使うのはもったいない」と思っておりました。

それほど大きなサイズで作ってもらわなかったのでPC用には使えないかもしれない。だがモバイルならばイケるかもしれない!

以前中途半端に導入してテーマとの兼ね合いから諦めたこともありましたが、今回そのあたりをキチンと考慮して導入しました。
これで当ブログの顔にもなってくれることでしょう。

本文までの距離をできるだけ短く

ヘッダ画像導入にあたって考えなければいけなかったのが「如何に記事本文までの距離を減らせるか」ということ。

モバイルテーマの役割は「限られたスペースで如何に記事を読みやすくするか」ということだと考えています。

そこでスペースを使うヘッダ画像を「記事本文までの距離を減らしつつ」導入するか。
ここでWebデザインレシピ様のテクをマネました。

ヘッダ画像はトップページのみに設置

Screenshot 2012 10 14 10 51 45

今回ヘッダ画像はトップページのみに置くことにしました。

<!-- トップページのときはヘッダ画像を表示する -->
<?php if(is_home()): ?>
    <a href="<?php echo home_url(); ?>"><img src="header.jpg" alt="<?php bloginfo('name'); ?>" width="320" height="auto" /></a>
<?php endif; ?>
Screenshot 2012 10 14 10 52 46

これで記事本文までの距離を短くできるようになりました。

暗黙の了解として「最も左上のリンクはトップページ」となっているらしいので、左上のロゴマークからトップページに戻ることができるようにしています。

参考: ロゴマークの暗黙知について – Webサイトの上部にリンクは必要か? -|Web Design KOJIKA17

最小限のメニュー機能

メニュー関連も一新。メインのカテゴリとAboutなどの固定ページのみを右上のメニューボタンに導入。こちらのサンプルを改造。

[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー | コリス

Screenshot 2012 10 14 10 55 24

タップするとメニューが出たり引っ込んだりします。
検索バー、トップへのリンクと合わせてひとつのバーにまとめました。

3. 読み込みスピードを高めるために

使用するコンテンツを厳選

コンテンツにもいろいろあります。最小限のメニューもコンテンツを厳選した結果といえなくもないですしね。

特に今回は如何にAPIの使用を減らせるかということを考えてみました。

Screenshot 2012 10 14 11 03 25

前テーマで使っていたコレですね。
この部分を表示するときに外部のサービスのAPIを使っています。
見た目だけならこのほうがカッコイイ。けどスピードを重視するならば。

Screenshot 2012 10 14 11 05 23

リンクだけでも十分わかる。そしてこのほうがたぶん速い。
外部のAPIはソーシャルボタンの部分のみにしました。

テーマファイルの軽量化

できるだけテーマファイルは容量を小さく。ファイルを減らし、コードを減らし。
今回は380KBまで容量を減らすことができました。
前テーマは500KBを超えていたことを考えるとかなり頑張りましたね。

4. より使いやすく

インデックス系を縞々に

Screenshot 2012 10 14 11 22 11

Twitter Bootstrapで縞々テーブルを使ったときから縞々に目覚めました。
他の項目との違いがハッキリしているのが気に入っています。

Bootstrapではどのように実装していたのかわかりませんがCSSで同じように見えるようにこちょこちょいじってみました。

.index:nth-child(odd){
	background-color: #f2f2f2;
} // 奇数番目のスタイル

.index:nth-child(even){
	background-color: #fefefe;
} // 偶数番目のスタイル

縞々最高!

Infinite Scrollで次のページを自動読み込み

小さなボタンがたくさんできてしまうページナビゲーションは以前から改良したいと思っていたのですが、「ページナビゲーションを使わない」ことが一番の近道でした。

その代わりに導入することになったのが「Infinite Scroll
初めて使うjQueryプラグインです。

Screenshot 2012 10 14 11 36 33

このように一番下までスクロールすると次のページを自動で読み込んでくれるというもの。ページ遷移しない分スピード面での改善に貢献。

PCブラウザではよくあるAutoPagarizeというやつですね。

詳しくは後日書くことにします。このプラグインも導入が大変でした。

参考: [JS]ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll | コリス

おわりに

久しぶりにWordPressを触ってみましたが、いろいろと忘れてました。
同時に新たな発見もあったので決してムダな時間ではなかったなと思います。

今回はすべてCodaを使って制作しました。初めてちゃんと使いましたがFTPクライアントも内蔵してあってすごく便利。
後日感想も添えて書こうと思います。

iPhoneでは動作チェックをしていますがAndroidは端末が無いのでわかりません。
親切なAndroidユーザの方、ぜひ@knk_nまでスクリーンショットを下さると幸いです。

参考にさせて頂いた「Webデザインレシピ」様、ありがとうございました。

表示がおかしかったりした場合はお気軽にご一報ください。
今後とも当ブログをよろしくお願いします。

Coda 2 2.0.4 App
価格: ¥6,500 (記事執筆時)
カテゴリ: 開発ツール
Categories:
Tags: ,
記事が気に入ったらシェアお願いします!