今回はスマホ版のご紹介
今回のカスタマイズ第2弾、本来の目的は「スマホ表示を変えたい！」というもの。そのついでに「PC版も変えちゃえ」と思った。
PC版のカスタマイズ内容は箇条書きで前回エントリー書きました。詳細は順番にアップしていく予定です。
↑「大苦戦！」って書いたけど、PC版のカスタマイズに関しては、自分で作ったテーマでもあるし、ほぼ把握してたので、実はあんまり苦戦してない。作り込みに時間かかったぁーってのはあるけど、悩みまくったというのは今回そんなになかった。
本当に大苦戦したのはスマホ版。
「WPtouch」というWordPressのプラグインを全面的に改造したのだけど、これが今回初めてのカスタマイズ。1週間費やした作業時間の大半は、このWPtouch改造でウンウンうなされてたようなもの。カラダの芯まで疲れ切った。
というわけで今回はスマホ編。長くなり過ぎないように要点だけ書いて、詳細は後日アップしていく予定です。どんな内容の変更をやったんだねとか、こんなことも出来るんだとかを認識だけして頂ければ幸いです。
「変更前／変更後」と画像を切り替えて解説すれば分かりやすいのだろうけど、変更前の画像は一切ありませんｗ そんな余裕すらなかったので。
スマホ版カスタマイズ内容・トップページ編
1. ヘッダーにアイコンとロゴを表示
◆Titterアイコンと、ブログPC版のロゴ一部をヘッダーに表示。（どちらをタップしてもトップページに戻るよう設定）
2. メニューバーを改造
◆とりあえずメニューだけ設置。
他にもいろいろメニューバーに加えなきゃな～とは思ってたのだけど、作り込む時間もアイデアもなく、ひとまず最低限のメニューだけ置いた。お恥ずかしい。今後何かアイデア浮かべば追加していくかもです。
3. メニュー画面のスライド表示機能追加
MENUってところをタップすると、左側にメニューリストがニョキッと表示される。これ作ってみたかった！
幾つかの記事を参考にさせてもらったのだけど、特にこんちくわさん（@conchikuwa）のエントリーがめちゃめちゃ参考になりました。ありがとうございました。
4. Googleカスタム検索を新設
本当は上と下の2箇所に設置したかった（Googleカスタム検索は1ページに2つまで設置可能）。
しかし下のフッター部分に設置した検索の入力欄に「カスタム検索」って文字が表示されず、いろいろ修正したけど直らなかったので下のは削除しちゃった。したがって現在はヘッダー部分の1箇所のみ設置。
【11月28日追記】検索窓を画面の上ではなく下に表示させるよう変更しました。
↑検索結果はPC版と同様にアイキャッチも本文も表示される。ただPC版と違うのは、最上部にブログのロゴを表示できてないこと。スマホでは表示できないのか、単に私の設定ミスなのかは要調査。
【11月28日追記】いろいろ設定を変えてテストしましたが、やっぱりスマホではロゴが表示できないっぽいです。
サイト内検索をGoogleカスタム検索にしてみよう
5. 一覧の先頭に説明文を表示
◆一覧表示の内容によって見出しを変えるよう変更。
要は「パンくずリスト」の簡易版みたいなもの。最新記事を表示中は「新着エントリー」と表示。スマホ版では他にカテゴリーでの一覧とタグでの一覧があるので、それぞれに対応。
↑対応したカテゴリー名やタグ名が見出しに表示される。
これ、簡単に出来ると思ってたのだけど、いろいろとバグを作り込んじゃってた。詳細は後日アップの補足エントリーにて。
6. 一覧にアイキャッチ画像を表示
1. 左側にアイキャッチ画像
2. 記事作成日
3. 記事タイトル
4. カテゴリー名
5. タグ名
6. はてブ数（ある場合のみ）
たったこれだけの単純な表示なんだけど、完成するまで時間かかった…。全てはCSSの理解不足のせい。
7. 一覧の表示件数を10件に変更
◆WPtouchの初期設定では5件表示だった（気がする）ので、10件表示させるようプログラムコードを追加。
※これも「初歩的なバグ」があるのを最近まで気付かなかった。
8. 次ページ、前ページへの遷移機能を追加
◆次ページや前ページへ移動するリンクを設置。
本当はWPtouchに最初から付いている「次ページ以降の一覧をすぐ下に表示させる機能」をそのまま流用したかったのだけど、改造するうちにヘンテコな表示になってしまい直らなくなったので、仕方なく従来の機能を削除。新たに上の機能を追加した。
9. モバイルテーマOFF時、再びモバイルテーマに戻れるよう設定
WPtouchでは、ページの一番下に「モバイルテーマ」というボタンが表示されている。
最初はボタンがONになっている。これをOFFにすることで、PCブラウザで見る時と同じ表示に変更できる。
しかし表示を変更した後で再びモバイルテーマに戻りたくても、ボタンがないと戻れない。初期設定ではボタンが表示されないようになっている。
↑PCブラウザ表示の一番下にも「モバイルテーマ」ボタンを表示させ、再びモバイル表示に戻れるようにした。
おつぱさん（@OZPA）のエントリーを参考にさせて頂きました。ありがとうございました。
スマホ版カスタマイズ内容・エントリー編
10. SNSボタンの簡易版を設置
◆あくまで簡易版。PCと同じサイズのSNSボタンにいずれ変更する予定。（今回は作り込めなかった…）
11. 見出しのH3タグをPC版と同じデザインに変更
今までは背景色も装飾もなーんもない、ただの黒い太文字だった。ようやくカラフルになった。
12. 文章の改行ピッチ、段落間の空白を広めに設定
◆当ブログは文章が長いので、以前のスマホ表示だと文字が詰まって読みにくかった。見た目のビッシリ感を少しでも緩和しようと考え、ゆったり目の改行ピッチに変更。
段落間の空白も以前より広くしている。あんまり広くし過ぎると芸能人のブログみたいになるので、そこそこの広さで。
13. RSSリーダー購読用アイコン、Facebookボックス新設
これもずっと前からスマホで表示させたかった。
14. 付箋プラグイン「WP-note」の文字切れ対応
◆スマホで見ると文字の右端が切れていたので、画面内で全文が収まるよう修正。
15. 囲い枠の背景色などを修正
◆PCでは意図した通りに表示されていた囲い枠の背景色や周囲の点線が、これまでスマホでは何も表示されてなかった（ただの文字のみだった）ので、スマホでも表示されるよう修正。
その他
16. スマホ版で独自に広告（Adsense）を設置
PC版をそのまんま使うと幅が合わなかったり個数の問題があったりするので、WPtouchではPC版と別のAdsenseを設置するよう変更。変更というか、今までスマホ版ではAdsenseが表示できてなかったので、新設になるのか。
カスタムチャネルも全てPC版とは別のものを設定したので、アクセス解析でPCとスマホの区別ができる。
なお、モバイルの場合にAdsenseは「1画面につき1つしか表示させてはいけない（設置自体は3つまでOK）」というのを最近まで知らなかった（1つも表示させてなかったからセーフだったんだけど）。