「はてなブログ無料版でもスマホ画面のCSSを弄れる技」を試してみた
最近、暇さえあれば新着エントリーからたくさんの方のブログを見漁ってます。
本当に多種多用で、専門特化したものから日々の愚痴まで、読むのが面白い！
下手なまとめブログやエンタメニュース見るより全然面白いです。
僕も細々と、"毎日1記事1000字"を目標に書かせてもらってますが、やはり最終的にはどれだけ収益化できるかってのが大事ですよね。
お金好きですしおすし(持ってないけど)
まぁ収益化できるだけ面白い記事を書くってのは今回はさておき、そんな雰囲気をたくさんのエントリーからヒシヒシと感じられる今日このごろ。
3週間続けてるのに今日初めて存在を知りました！(涙目
こんなに使いやすいツールがあったのに何故気付かなかったんだよ、ちゃんとエントリー読み込めよ自分！
などと、今晩は悔しさで涙で枕を濡らすとか濡らさないとかそんなのはどうでもいいんですが、知ったからには触ってみることにしたわけです。
で触った結果、実際貼ってみると結構見づらい。
↑これね。
そこで、先輩方のブログを参考に、"CSSを用いてカッコよく見せたいな"と考えたんですが、 PC版は良いとしてスマホ版のCSSは弄れないことを思い出しました。
なんてったってここは弱小ブログ。
モチロン無料版。
PRO版移行＝1,000円/月を広告料で賄えるはずもなく、ヘタすると今のお小遣いじゃ致命傷になりかねない！（小遣い的な意味で）
…スマホ版はあきらめるか。
としょんぼりしつつ、それでもなんとかならないかな？と検索かけながらいろいろ見ていると、「タグマネージャ使えばいけるよ！」という記事を発見！
神よ！！！！（大げさ）
ということでさっそく導入してみました！
(ここからが本編です)
タグマネージャの導入
まずはタグマネージャのリンクをドンッ！
https://tagmanager.google.com/
タグマネージャってなによ？って方は、そもそも今日知った僕よりずっとわかりやすく説明してる方を読んだほうが理解に繋がると思うので、参考にした記事を貼っておきます。
とりあえずこの3記事を読みました。
で、Googleアカウントをお持ちの方なら、導入するまでのハードルはそんなに高くありません。
ログインすると下画像のタグが出てくるので、これをそれぞれの箇所にコピペするだけ。
場所は後述します。
＊個人情報が紛れているため、画像処理してます。
<head>~</head>用のタグ
上段の枠にあるタグをコピーして、「ダッシュボード」→「設定」→「詳細設定」にあるheadに要素を追加に埋め込みます。
<body>用タグ
下段の枠にあるタグをコピーして、「ダッシュボード」→「デザイン」→「スパナマーク」→「サイドバー」と進んで、モジュールの追加からHTMLを追加し、タグを埋め込みます。
これで初期設定は完了。ね？簡単でしょう？
タグの設定
基本的にはリンク先の手順をそのまま行いました↓
下記手順ではイベント名を適当にわかりやすくしてあります。
*リンク先の画面が古いバージョンのものだったので、参考までに現バージョンの画像を貼っておきます。
変数の設定
「変数」→「新規」と進み、「カスタムJavaScript」を選択してJavaScriptを入力すればok！
トリガーの設定
「トリガー」→「新規」と進んで上画像の様に入力します。
今回はスマホ版のヨメレバ・カエレバ ウィジェットを見やすくするCSS導入なので、PC以外でアクセスした時は・・といった設定です。
タグの設定
で実際にこの手順でカッコよく表示するためのCSSを貼り付けます。
「タグ」→「新規」→「タグの設定」から「カスタムHTML」を選択して、枠の中にコピペするだけ。
今回はコチラのCSSを使用させて頂きました。
いつも先輩方には本当に感謝！マジ感謝！
CSSを入力し終わったら、同画面内にある「トリガー」から配信トリガーを選択して準備は完了です。
ここまで終わったら「プレビュー」をクリック→そのまま使用中のブラウザでサイトをプレビューすれば、実際にタグマネージャが動いているかの確認をすることができます。
問題がなさそうなら「送信」を押して作業は終了です！
スマホで確認してみる
で実際スマホブラウザ（僕はiPhone7のSafariで確認しました）で該当部分を見てみると、、、
コレだよコレ！！
実際に買ってもらえるかはともかく、見栄えが良くなっただけでも十分満足です。
というわけで、無事CSSが適用されてることが確認できました！やったぜ！
〆
前置きがとんでもなく長くなりましたが、作業量はほぼなかったので、導入ハードルは低いと思います。
で、これ。Googleアナリティクスもタグマネージャ経由で動かせるらしいんですけど、メリットってあるんでしょうか？
デフォルトの設定メニューで問題なく動いてるし。
その辺が素人考えで申し訳ないんだけど、作業してる時に感じた疑問でした。
というわけで、これから導入を考えてる方は試してみてはいかがでしょうか？
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
posted with ヨメレバ
狩野 祐東 SBクリエイティブ 2016-10-27
コメントを書く
