無料版はてなブログでもスマホ画面をカスタマイズできる方法(Google Tag Manager編)
無料版はてなブログでは、スマートフォンの画面をカスタマイズする機能が利用できません。
有料のPRO版にしようかどうか、いや、いつPRO版にしようと思案していました。
先日、はてブの新着でこの記事を見かけました。
この記事を読んでピピっと閃きました。
このGoogle Tag Managerを使えば、スマホ画面の時だけHTML/CSSを挿入する、という事ができるのではないかと。 ※シバさん、ありがとうございます。
という事で、その方法が分かりましたので紹介します。*1
この方法は、きっとWIN×WIN×WINですよ。
例題
今回は例題として「ヨメレバ」のスマートフォン向け画面をスタイルシートを使って見栄え良くしてみます。
Google Tag Mnagerの導入
なにはなくとも最初ははGoogle Tag Managerの導入です。
ぐぐって別の方の書かれたわかりやすい記事を参考にして導入しましょう。
私は以下のサイトなどを参考にして導入しました。※お世話になりました。
なお、はてなブログにGoogle Tag Managerを導入している人の例を見ると、導入時に発行されるJavascript(スニペット)をサイドバーに設定したり、フッタに設定したりしている例を見ましたが、私は「設定」>「詳細設定」の画面の「headに要素を追加」にコピペしました。
変数の設定
Google Tag Managerの画面で、PC画面かスマホ画面を判断するための「変数」を登録します。
上の画面の③に指定するJavaScriptは以下の通りです。
function() {
return document.getElementsByTagName("html")[0].dataset.device;
}
変数名は「デバイス」と指定していますので、以下もその変数名で例示します。
トリガーの設定
Google Tag Managerの画面で、スマホ画面として判断する条件を「トリガー」で登録します。
⑤~⑦で、PC画面じゃないという判定をしています。
⑦は英小文字で"pc”と入力してください。
タグの設定
いよいよ佳境です。
Google Tag Managerの画面で、スマホ画面だった時に挿入するヨメレバ向けのスタイルシートを「タグ」として設定します。
④の部分に挿入したいスタイルシートを設定します。
私はこちらのサイトのスマホ版スタイルシートを参考にしました。 ※ありがとうございます。
上のタグの設定画面の続きです。
「配信するタイミング」で、⑤の「その他」を選ぶとトリガーの選択画面が表示されますので先ほど設定したトリガー「PC以外からのアクセス」を選びます。
公開する
これで設定作業は終わりです。
Google Tag Managerの「プレビュー」機能を使うと、現在使用中のブラウザからのアクセスだけに適用後の画面を表示されることができます。
この「プレビュー」機能で想定通りにスタイルシートが反映されるかどうかを確認した後、「公開」する事で他の人からのアクセスでも設定が反映されます。
ちなみに今回の設定では私のヨメレバのスマホ画面はこうなりました。
設定前の画面。Amazonや楽天ブックスなどのリンクがよくわかりませんね。
設定後の画面。ボタン風になって、Amazonなどのサイトへの遷移ということがよく分かります。
ちなみにPC画面での表示。全然違いますね。
さきほどのスタイルシートがスマホ画面でのみ適用されている証拠です。
さいごに
無料版のはてなブログでも、スマホ画面向けのカスタマイズが容易にできる事が分かりました。
このGoogle Tag Managerを使ってスマホ画面をカスタマイズする事で、はてなブログユーザは無料のままスマホ画面をカスタマイズできてうれしいですし、カスタマイズされてスマホ画面が読みやすくなると読者の方もうれしいです。
また、はてなさんのGoogle Adsenseなどの広告は残ったままなので、読みやすくなったスマホ画面のおかげでアクセスが増えるとこれまた運営のはてなさんもうれしい、3者うれしいWIN×WIN×WINなカスタマイズ方法ではないかと思います。
【2016/05/22 追記】
参考図書を貼っておきます。Kindle版もあります!
こちらからは以上になります。
【関連記事】
*1:今回は方法を見つけるまでの苦労話は割愛します。(笑)