こんにちは、FCめがぶーの宗岡(@pre_muneoka)です。
突然ですが、スマホやタブレット向けの表示をまたまた切り替えました。
以前は「wp touch」という超有名プラグインでサイトを表示していたのですが終了しました。
【WordPress】スマホでも見やすくしました【WPtouch】
切り替えた理由は複数ありますが下記になります。
1.他のサイト様と被る(利用者が多いプラグインなので)
2.カスタムが僕の知識では非常に難しい
3.2の関連で結局、ユーザーが見づらい
そんな感じで変更を決めました!
以下、戦いの歴史。
目次
スマホユーザーの割合は?
上の画像は、Google Analyticsのデータです。
Google アナリティクスとは、サイトの利用者数や使用端末、ブラウザーなどがわかる凄いヤツ。
Googleのアカウントを持っていれば無料で使用できるので未導入の方はぜひ!
話を戻して、グラフを見てみると
デスクトップ経由:約7割
スマホ・タブレット経由:約3割
このようになっています。
当サイトの利用ユーザーの3割がスマホ・タブレットユーザーであるという事実!
twitter経由でのアクセス数の増加などを考えるに、当然といえば当然なのですが…
まぁ、この事実から「wp touch」を使用していたのですが…
上記の問題から別の方法を模索しました。
端末ごとにテーマを変更すればよくね?
発想としては2個のテーマを端末ごとに切り替えることでした。
・デスクトップ→既存のサイトテーマ
・スマホ→スマホ用新テーマ
この条件に、「wp touch」に設置されていた機能「PCとモバイル表示」の切り替えを設置。
これで完璧!! という感じです。
スマホ用のテーマは、レスポンシブデザインのサイトを使用。
…問題は2個のテーマを設置する「簡単な方法」があるのか?
その1点でした。
救世主Multi Device Switcher
切り替えの方法を模索しているとありました便利なプラグインが!
その名も「Multi Device Switcher」。
WordPress プラグイン「Multi Device Switcher」は WordPress のコンテンツマネジメントシステムを活かしてワンソース・マルチデバイスが実現するプラグインです。デバイス (現在 スマートフォン、タブレット端末、携帯モバイル、ゲームの 4 つに対応) によって自動的にテーマが切り替わります。
凄いことに、スマホ・タブレット・ガラケー・ゲームで切り替え可能!
「wp touch」や「Ktai Style」との併用が可能ということです。
しかも「モバイルサイトとPCサイトを切り替える新機能「PC Switcher」がWordPressプラグイン「Multi Device Switcher」に加わりました」で紹介されていますが「PCとモバイル」のスイッチャーも実装されています。
これは本当に凄い。ありがたく使わせて頂きました。設置の方法は公式サイトで日本語で説明されているので、ご確認ください。
それでテーマはどうするよ?
素晴らしいプラグインを発見したので、次はスマホ用のテーマを見つける任務です。
実はこの部分は候補をいくつか持っていて絞り込むだけでした。
条件は「無料」で「レスポンシブデザイン」なWordPressテーマであること!
あと、国産の安全なテーマであることです。
候補は2個でした。
無料のレスポンシブデザインテーマ。
コーポレートサイトを作るのに適しているイメージ。
無料のレスポンシブデザインテーマ。
ブログサイトを作るのに適しているイメージ。
今回はスマホ用テーマということで、ブログをイメージしたテーマが欲しかったので「STINGER3」にしました。
当サイトの固定ページは画像情報が非常に多いので、スマホで観るのにはあまり適していないと判断。
スマホユーザーの方は固定ページよりも投稿記事を中心に読まれていると判断したからです。
STINGER3とは?
STINGER3は「簡単に高性能なサイトを作るためのテーマ」といった感じです。
ブログで必要な機能を最初から持っているのでWordPress初心者の方でも使いやすいと思います。
・パンくずリスト
・SNSアイコン
・関連記事表示
・アフィリエイトコードの簡単設置など
※詳しくは公式サイトでご確認を
しかしこのテーマは、初心者の方だけではなくベテランブロガーの方にも人気があります。
その理由が「SEOに強い」という部分です。
実際にPV数の推移を掲載されているブロガーの方がいますが、確かに強そう。
これからWordPressでブログをはじめる方、PV数に伸び悩んでいる方はぜひチェックしてみてください。
STINGER3をスマホ用にカスタマイズ
STINGER3をスマホ用にカスタマイズしました。
正直、まだ全然終わってません。「見る」という行為は成立している程度です。
ちょこちょと段階的に変更をして行きたいと思ってます。
現在、変更を加えた点は下記です。
1.デフォルトのSNSアイコンの削除
2.ヘッダー画像の変更
3.トップの記事と記事の間に「区切り」を設置
4.トップの記事から「本文抜粋」の削除
こんな感じです。
今後は、ヘッダーにメニューの設置。サイトカラーの調整などを予定しています。
スマホをお持ちの方は、試しに見て頂けると幸いです!
今日のまとめといつもの告知
本日のまとめ!
wp touchを辞めてMulti Device Switcherを導入したよ!
スマホ用テーマをStinger3にしたよ!
いつもの告知ですが、合奏魂を販売しているオンラインショップをよろしくお願い致します!
あと、11月15日にイベントに参加します!
詳しくは【11月15日】SweetVoiceお知らせ【物販参加】
以上、よろしくお願い致します!