☆迷走記☆スマートフォン用の表示で見る☆迷走記☆サラリーマンぽい人のランニング系雑記ブログ。雑記というか迷走しています。Tipsあとで読む?無料版はてなブログでは、スマートフォンの画面をカスタマイズする機能が利用できません。有料のPRO版にしようかどうか、いや、いつPRO版にしようと思案していました。先日、はてブの新着でこの記事を見かけました。blog.shibayu36.orgこの記事を読んでピピっと閃きました。Managerを使えば、スマホ画面の時だけHTML/CSSを挿入する、という事ができるのではないかと。※シバさん、ありがとうございます。いう事で、その方法が分かりましたので紹介します。*1この方法は、きっとWIN×WIN×WINですよ。今回は例題として「ヨメレバ」のスマートフォン向け画面をスタイルシートを使って見栄え良くしてみます。Managerの導入です。別の方の書かれたわかりやすい記事を参考にして導入しましょう。私は以下のサイトなどを参考にして導入しました。※お世話になりました。Managerを導入している人の例を見ると、導入時に発行されるJavascript(スニペット)をサイドバーに設定したり、フッタに設定したりしている例を見ましたが、私は「設定」>「詳細設定」の画面の「headに要素を追加」にコピペしました。Managerの画面で、PC画面かスマホ画面を判断するための「変数」を登録します。上の画面の3に指定するJavaScriptは以下の通りです。document.getElementsByTagName("html")[0].dataset.device;}変数名は「デバイス」と指定していますので、以下もその変数名で例示します。Managerの画面で、スマホ画面として判断する条件を「トリガー」で登録します。5~7で、PC画面じゃないという判定をしています。7は英小文字で"pc”と入力してください。タグの設定いよいよ佳境です。Managerの画面で、スマホ画面だった時に挿入するヨメレバ向けのスタイルシートを「タグ」として設定します。4の部分に挿入したいスタイルシートを設定します。私はこちらのサイトのスマホ版スタイルシートを参考にしました。※ありがとうございます。www.ituore.com上のタグの設定画面の続きです。「配信するタイミング」で、5の「その他」を選ぶとトリガーの選択画面が表示されますので先ほど設定したトリガー「PC以外からのアクセス」を選びます。公開するこれで設定作業は終わりです。Managerの「プレビュー」機能を使うと、現在使用中のブラウザからのアクセスだけに適用後の画面を表示されることができます。この「プレビュー」機能で想定通りにスタイルシートが反映されるかどうかを確認した後、「公開」する事で他の人からのアクセスでも設定が反映されます。ちなみに今回の設定では私のヨメレバのスマホ画面はこうなりました。Amazonや楽天ブックスなどのリンクがよくわかりませんね。ボタン風になって、Amazonなどのサイトへの遷移ということがよく分かります。ちなみにPC画面での表示。さきほどのスタイルシートがスマホ画面でのみ適用されている証拠です。さいごに無料版のはてなブログでも、スマホ画面向けのカスタマイズが容易にできる事が分かりました。Managerを使ってスマホ画面をカスタマイズする事で、はてなブログユーザは無料のままスマホ画面をカスタマイズできてうれしいですし、カスタマイズされてスマホ画面が読みやすくなると読者の方もうれしいです。Adsenseなどの広告は残ったままなので、読みやすくなったスマホ画面のおかげでアクセスが増えるとこれまた運営のはてなさんもうれしい、3者うれしいWIN×WIN×WINなカスタマイズ方法ではないかと思います。参考図書を貼っておきます。2015-05-22AmazonKindle楽天ブックスこちらからは以上になります。【関連記事】*1:今回は方法を見つけるまでの苦労話は割愛します。昨日の10km走の途中で見た風景です。2016のコースマップが公開されました。(8)「当ブログは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」はてなブログをはじめよう!fukuihiさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。