【鯖運営】Multi Device Switcherでブログにスマホ用テーマを適用


以前、Ktai Styleというプラグインでガラケー向けのテーマを適用しました。
限られたテーマからしか選べないのが残念でしたが、気に入ったテーマがあったので、良かったです。

で、先日、GoogleのPageSpeed Insightsで自分のサイトを計測してみると、モバイルの項目が真っ赤。。。
つまり、Googoleから「(モバイル向けとしては)ダメダメなサイト!」と烙印を押されてしまったわけです。。。

おそらく、Googleの検索結果にもこの結果は反映されると思うので、スマホ用のテーマを導入することにしました。

 

【現在のデーマ】

今、PC用に使っているのはMonochromeというテーマをベースに私がチューニングしたものを使っています。
以前は、無料で公開されていたのですが、現在はHTML5用に再構築したものが有料で販売されています。

興味のある方は、MONO-LAB様のサイトをご覧ください。

有料版の導入も検討しましたが、フォントが私の好みじゃなかったりと今の方が好きなので導入は諦めました。
でも、レスポンシブ対応や使用している背景画像の最小限化など、学ぶ点は多いので、今後のチューニングに活かしていきたいです。

で、現在のテーマはPC用に作られているものなので、スマホで表示すると解像度の関係から文字が潰れてしまうんですよね。

Googleからもまずはそこを直すように指摘されました。

【スマホ用テーマの設定】

そこで、スマホ用には専用のテーマを新しく適用することにしました。

切り替え方法はMulti Device Switcherというプラグインを導入することで解決しました。

このプラグインは、アクセス元のデバイス情報から適用するテーマを切り替えてくれるというプラグインです。

スマホ / タブレット / ガラケー / ゲーム機などの端末にそれぞれテーマを適用することができます。
私の場合、ガラケーにはKtai Styleを適用していますので、残りの3種類について新しいテーマを適用するようにしました。

ただ、注意も必要で、このプラグインはキャッシュ系プラグインとの相性が少し悪いようです。
私はSuper Cacheを導入して高速化を行っているのですが、うまくテーマの切り替えが出来ない、またテーマの一部を編集してもスマホ側に反映されないという現象がありました。

その場合は、キャッシュを削除して、スマホとPCで再度アクセスすればそれぞれのキャッシュが生成されて正常に動いてくれました。

 

導入するテーマですが、今回はEclipseというテーマを導入してチューニングしました。
このテーマ、導入時点では不完全なのか、文字が背景と色が同じだったりするので、チューニングが絶対必要です。

また、難読化なのかコードが追い難い作りになっているので、チューニングする際は時間に余裕のあるときに行ってください。

スマホからアクセスすると、以下のような感じで表示されます。

CJoDDQGUAAAgeBi.jpg large

PC用のテーマとは逆で、黒基調に白文字にしてみました。
なかなかカッコいいなと思っています。

スマホ用に設定を行ったおかげで、点数も40点台→75点まで上昇出来たのでまずは合格ですかね。
まだ、Javascript/CSSの設定見直しを促されていますが、ぼちぼちやっていこうと思います。

有用なプラグインなどありましたら、ぜひぜひ情報お願いします!


Mask_Siva

北の試される大地に生息しているSEです。
楽しみながらプログラムを作ったり、ゲームで遊んだりしています。

コメントをお待ちしております

HTMLタグは利用できません


新品/中古ゲーム販売 通販ショップの駿河屋

本鯖運営維持のため、上記リンクから注文してもらえると助かります~

仮面被り過ぎ@コンプレックス大佐
@Mask_Siva

  • 今日は食あたりでダウン 医師と話したところ、昨日食べたお刺身が怪しそう 皆さんも生物の食事にはご注意ください
    about 3日 ago
  • 仙 人╔╗  天使╠╣  妖精╠╣  聖者╠╣  賢者╠╣  健全╠╣ ══════ スケベ╠╣⇦Mask_Siva  変態╠╣ ド変態╠╣   獣╠╣  性獣╠╣ 変態王╚╝ #スケベ度ランク https://t.co/NwzHF2421k 彼らには勝てないか。。。
    about 3日 ago
  • 今日学んだことは、ヤフオクAPIはGET/POST共に対応だけど、ヤフーショッピングAPIはGETのみ。 しかも、同じ意味なんだけど、パラメータ名がバラバラだったり、リストの考え方も違っているので、こういった類似APIでは統一性が求められるなと感じましたね。
    about 3日 ago

BGMにどうぞ

機動戦士ガンダムUC オリジナルサウンドトラック

2 UNICORN -澤野弘之

↓の再生ボタンで再生できます
もっと楽曲を試聴したいなら
>>>こちら<<<
2017年7月
« 6月  
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

アーカイブ

↓応援おねがいします!↓

ブログランキング・にほんブログ村へ