[Я]初のスマホ版改造!秋のブログカスタマイズ祭り第2弾【スマホ編】

スポンサーリンク

今回はスマホ版のご紹介

りくまろぐ・スマホ表示対応版

今回のカスタマイズ第2弾、本来の目的は「スマホ表示を変えたい!」というもの。そのついでに「PC版も変えちゃえ」と思った。

PC版のカスタマイズ内容は箇条書きで前回エントリー書きました。詳細は順番にアップしていく予定です。

秋の紅葉

↑「大苦戦!」って書いたけど、PC版のカスタマイズに関しては、自分で作ったテーマでもあるし、ほぼ把握してたので、実はあんまり苦戦してない。作り込みに時間かかったぁーってのはあるけど、悩みまくったというのは今回そんなになかった。

本当に大苦戦したのはスマホ版

WPtouch」というWordPressのプラグインを全面的に改造したのだけど、これが今回初めてのカスタマイズ。1週間費やした作業時間の大半は、このWPtouch改造でウンウンうなされてたようなもの。カラダの芯まで疲れ切った。

というわけで今回はスマホ編。長くなり過ぎないように要点だけ書いて、詳細は後日アップしていく予定です。どんな内容の変更をやったんだねとか、こんなことも出来るんだとかを認識だけして頂ければ幸いです。

「変更前/変更後」と画像を切り替えて解説すれば分かりやすいのだろうけど、変更前の画像は一切ありませんw そんな余裕すらなかったので。

スマホ版カスタマイズ内容・トップページ編

1. ヘッダーにアイコンとロゴを表示

ヘッダーにTwitterアイコンとブログロゴを表示

◆Titterアイコンと、ブログPC版のロゴ一部をヘッダーに表示。(どちらをタップしてもトップページに戻るよう設定)

2. メニューバーを改造

メニューバーを設置

とりあえずメニューだけ設置。

他にもいろいろメニューバーに加えなきゃな~とは思ってたのだけど、作り込む時間もアイデアもなく、ひとまず最低限のメニューだけ置いた。お恥ずかしい。今後何かアイデア浮かべば追加していくかもです。

3. メニュー画面のスライド表示機能追加

メニューアイコンをタッチでメニュー一覧をスライド表示

MENUってところをタップすると、左側にメニューリストがニョキッと表示される。これ作ってみたかった!

http://www.conchikuwa.com/2012/07/30/pageslide/

幾つかの記事を参考にさせてもらったのだけど、特にこんちくわさん(@conchikuwa)のエントリーがめちゃめちゃ参考になりました。ありがとうございました。

4. Googleカスタム検索を新設

Googleカスタム検索を新設

本当は上と下の2箇所に設置したかった(Googleカスタム検索は1ページに2つまで設置可能)。

しかし下のフッター部分に設置した検索の入力欄に「カスタム検索」って文字が表示されず、いろいろ修正したけど直らなかったので下のは削除しちゃった。したがって現在はヘッダー部分の1箇所のみ設置

【11月28日追記】検索窓を画面の上ではなく下に表示させるよう変更しました。

スマホ版Googleカスタム検索での検索結果

↑検索結果はPC版と同様にアイキャッチも本文も表示される。ただPC版と違うのは、最上部にブログのロゴを表示できてないこと。スマホでは表示できないのか、単に私の設定ミスなのかは要調査。

【11月28日追記】いろいろ設定を変えてテストしましたが、やっぱりスマホではロゴが表示できないっぽいです。

5. 一覧の先頭に説明文を表示

一覧の上に見出しを表示

◆一覧表示の内容によって見出しを変えるよう変更。

要は「パンくずリスト」の簡易版みたいなもの。最新記事を表示中は「新着エントリー」と表示。スマホ版では他にカテゴリーでの一覧とタグでの一覧があるので、それぞれに対応。

指定カテゴリーの表示

指定タグの表示

↑対応したカテゴリー名やタグ名が見出しに表示される。

これ、簡単に出来ると思ってたのだけど、いろいろとバグを作り込んじゃってた。詳細は後日アップの補足エントリーにて。

6. 一覧にアイキャッチ画像を表示

アイキャッチ画像を含む記事一覧

1. 左側にアイキャッチ画像
2. 記事作成日
3. 記事タイトル
4. カテゴリー名
5. タグ名
6. はてブ数(ある場合のみ)

たったこれだけの単純な表示なんだけど、完成するまで時間かかった…。全てはCSSの理解不足のせい。

7. 一覧の表示件数を10件に変更

◆WPtouchの初期設定では5件表示だった(気がする)ので、10件表示させるようプログラムコードを追加。

※これも「初歩的なバグ」があるのを最近まで気付かなかった。

8. 次ページ、前ページへの遷移機能を追加

ページ遷移機能

◆次ページや前ページへ移動するリンクを設置。

本当はWPtouchに最初から付いている「次ページ以降の一覧をすぐ下に表示させる機能」をそのまま流用したかったのだけど、改造するうちにヘンテコな表示になってしまい直らなくなったので、仕方なく従来の機能を削除。新たに上の機能を追加した。

9. モバイルテーマOFF時、再びモバイルテーマに戻れるよう設定

モバイルテーマがONの状態

WPtouchでは、ページの一番下に「モバイルテーマ」というボタンが表示されている。

最初はボタンがONになっている。これをOFFにすることで、PCブラウザで見る時と同じ表示に変更できる。

しかし表示を変更した後で再びモバイルテーマに戻りたくても、ボタンがないと戻れない。初期設定ではボタンが表示されないようになっている。

モバイルテーマボタンをPC表示の時も下につける

↑PCブラウザ表示の一番下にも「モバイルテーマ」ボタンを表示させ、再びモバイル表示に戻れるようにした。

http://ozpa-h4.com/2012/11/05/wptouch-iphone-android-switch/

おつぱさん(@OZPA)のエントリーを参考にさせて頂きました。ありがとうございました。

スマホ版カスタマイズ内容・エントリー編

10. SNSボタンの簡易版を設置

SNSボタンの簡易版

◆あくまで簡易版。PCと同じサイズのSNSボタンにいずれ変更する予定。(今回は作り込めなかった…)

11. 見出しのH3タグをPC版と同じデザインに変更

H3タグのCSSを変更

今までは背景色も装飾もなーんもない、ただの黒い太文字だった。ようやくカラフルになった。

12. 文章の改行ピッチ、段落間の空白を広めに設定

◆当ブログは文章が長いので、以前のスマホ表示だと文字が詰まって読みにくかった。見た目のビッシリ感を少しでも緩和しようと考え、ゆったり目の改行ピッチに変更。

段落間の空白も以前より広くしている。あんまり広くし過ぎると芸能人のブログみたいになるので、そこそこの広さで。

13. RSSリーダー購読用アイコン、Facebookボックス新設

RSS購読お願い欄とFacebookボックスの設置

これもずっと前からスマホで表示させたかった。

14. 付箋プラグイン「WP-note」の文字切れ対応

WP-noteの幅を修正

◆スマホで見ると文字の右端が切れていたので、画面内で全文が収まるよう修正。

15. 囲い枠の背景色などを修正

囲い枠の背景色などを修正

◆PCでは意図した通りに表示されていた囲い枠の背景色や周囲の点線が、これまでスマホでは何も表示されてなかった(ただの文字のみだった)ので、スマホでも表示されるよう修正。

その他

16. スマホ版で独自に広告(Adsense)を設置

PC版をそのまんま使うと幅が合わなかったり個数の問題があったりするので、WPtouchではPC版と別のAdsenseを設置するよう変更。変更というか、今までスマホ版ではAdsenseが表示できてなかったので、新設になるのか。

カスタムチャネルも全てPC版とは別のものを設定したので、アクセス解析でPCとスマホの区別ができる。

なお、モバイルの場合にAdsenseは「1画面につき1つしか表示させてはいけない(設置自体は3つまでOK)」というのを最近まで知らなかった(1つも表示させてなかったからセーフだったんだけど)。

http://harutomo-ryu.com/archives/2012-10-29/220929.html

春友さん(@spring_friends)のエントリーを読んで初めて知りました。ありがとうございます。というわけで1画面に2つ入り込まないよう配慮しながら設置。

未対応・今後の宿題

◆エントリーページの本文直後に関連記事欄がない。

PC版と同じプログラムコードを設置したのだけど、いろいろテストしたが上手く表示できなかった。今のところ設置できていない。

zenbackというプラグインはモバイル版でも表示可能のようなので、スマホ版のためだけに入れてみようかどうしようか思案中。

◆エントリーページにカテゴリーとタグのリンクがない。

設置するのを忘れていた。デザインも含めて考え直さないといけないので、後日対応予定。

◆SNSボタンを大きいタイプに変更したい

PC版と同じサイズのものに差し替えたい。今のサイズだと、特に「はてブ」ボタンが小さくてタップしにくい。

◆ページ上部のメニューバーが寂しいので何か追加

さすがにメニューのアイコンだけではちょっと…。いずれ何か加えよう。

◆もうちょっと何か面白い機能を付けたい

せっかくカスタマイズ方法がある程度理解できたので、「jQuery Mobile」とかを勉強して、何か作ってみたい。

まとめ

以上がスマホ編でございます。

今回本文で幾つか「参考にさせてもらったエントリー」を紹介したけれど、他にもWPtouchのエントリーは作業開始前にたくさん読ませて頂きました。

すごく参考になったエントリーを一挙にご紹介。すべてジックリ読み、私が作業する際にアイデアを拝借させて頂きました。感謝を込めて最後にシェアさせて頂きます。

http://webmemo.biz/wptouch-120515
http://wan.207works.com/archives/569
http://webmemo.biz/wptouch-customize-smartphone?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+webmemo%2FbUhb+%28%E3%81%82%E3%81%8B%E3%82%81%E5%A5%B3%E5%AD%90%E3%81%AEWeb%E3%83%A1%E3%83%A2%29
http://webmemo.biz/wptouch-attention
http://harutomo-ryu.com/archives/2012-06-10/223839.html
http://knk-n.com/2011/06/27/wptouch-top/
http://daisukeblog.com/?p=1967
http://mori2nd.com/20121122/wptouch-blog-smartphone-theme/

ありがとうございました!

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします