このブログ「わたしと納豆ごはん」のスマホ版デザインをカスタマイズしました
久々の更新です。
何をしていたのかと言えば、このブログのスマホのほうのデザインをカスタマイズしていました。
わたしは集中し始めると周りが見えなくなってしまう性分です。
また始めたことが、一段落つくまでは気になってしまい、他のことを忘れてしまうところもあります。
そのカスタマイズも一段落ついたので、更新がてらスマホ版のデザインについて少し触れたいと思います。
あ、予め技術系ののことはあまり書いていませんので、あしからずです。
【 追記】
現在はスマホ版を表示する設定にしていませんので、デザインの確認はできません）
スポンサーリンク
スマホ表示になる機種について
はてなブログのスマホ表示ですが、どの機種で表示されるか調べてみました。
これらはChromeのデベロッパーツールを使えば簡単に検証できます。
検証したところ、iPhone と Android のスマホ、それと Windows Phone で表示されることが確認できました。
iPad などのタブレットでは表示されません。また BlackBerry や Kindle といったものでも表示されません。
あと Android でもFirefox や Operaなどのモバイル端末でも表示は確認できませんでした。
日本でのスマートフォンのOSごとのシェア率を Kantar Worldpanel ComTech
で確認したところ、記事作成時点（）では iOS と Androidで99.4%になります。
数字だけ見れば、日本ではほとんどのスマートフォンで、はてなブログのスマホ版を見ることができます。
ただ全部ではないので、完璧を目指すならパソコンのほうもレスポンシブデザインなどにしてモバイル対応した方が良いでしょう。
デザインを参考にさせて頂いたサイトがあります
今回デザインするにあたり、参考にさせていただいたサイトがあります。
それが、こちらです。
シンプルで非常に読みやすいデザインです。いいですねシンプル。
こちらのサイトを参考にしながら「スマートフォンで読みやすい」ということに重点を置きました。
一行の文字数や背景色といったところを試行錯誤しながら作りあげました。
とはいえ「読みやすい」というのは個人差がある程度あり正解はなさそうです。そもそも根本的に文才なども関係してきますし。
わたしにはその才は低いので、読みやすいデザインで誤魔化そうという算段です。
「読みやすくするなら広告はずせや」と言われてしまそうですが、そこは生暖かい目で見守っていただけたら幸いかと存じます。
スマホ版スタイルの設定方法
はてなブログのスマホ版をスタイルするには一筋縄ではいきません。それ用の編集項目がないので、少々工夫しなけばいけません。
検索で調べたり自身で考えてりした結果、わたしには3つの方法があるように見えます。
- ヘッダのタイトル下に記述する。
- 上書きできないよう優先順位を上げる。
- 標準CSSより下にスクリプトで挿入。
それぞれ簡単に個人的主観を書きたいと思います。
1. ヘッダのタイトル下に記述
最初の 1 はもっともメジャーな方法で、デザイン編集でスマホ版のヘッダのタイトル下に自由に記述できる部分に、style要素を書き込む方法です。
この方法が1番簡単です。ただし、ここはヘッダと書かれていますがbody要素内に挿入されるので文法違反となります。（ 追記）HTMLの仕様変更によりbody内でも書けるようになりました。それでも「パフォーマンス面の問題から従来どおりhead要素内に記述することを推奨」とのことです。
とは言っても表示はされます。特に日本では iPhone と Android が大半で、ブラウザもhtml5 を読むことができるので、かなり高い確率で表示されることが期待されます。
参考リンク：BODY内にstyleタグの設置 - 一般的にCSSはHEAD内で外部CSSを... - Yahoo!知恵袋
ちなみにリンク先に出てくる scoped 属性ですが、今は廃止になっているみたいです。便利な機能だったのに残念です。
2. 優先順位を上げる
次の 2 はhead要素内に書き込む方法です。head要素へは設定から詳細設定の項目に記述できる部分があります。
スマホ版で上手くスタイルが反映されないのは、はてなブログ標準スタイルがこの部分より後に読み込まれるためです。
ならば読み込まれても上書きされないように優先順位を上げてしまえというのがこの方法です。
この方法なら文法違反にはなりません。ただし、順位を上げるため余分な記述が増え、またパフォーマンス的にも重たくなる感じがします。
しかもこの部分はパソコン版でも共通に読み込まれるので、パソコン版のほうにスマホ版の余分なコードが読み込まれることも懸念材料です。
3. スクリプトで挿入
そして最後の 3 はスクリプトを使う方法です。結局わたしはこの方法です。
この方法は標準で読み込まれるCSSのさらに下に自作のスタイルをスクリプトで挿入させます。
特徴として従来のコード量ですむということが挙げられます。また恐らくですが文法違反にはならないと思います。
欠点といたしましてはスクリプトを使うことです。動作自体はそれほど重さを感じませんが、スクリプトを切った環境ではスタイルが反映されません。
なので、このブログではスクリプトを無効にしているユーザー向けに、はてなブログ標準のスタイルになるように調整しています。
またこの仕様はスクリプト無効の環境で不要なCSSを読み込ませないという利点も考えられます。
スタイルをスクリプトでheadに挿入する方法は、こちらの方法をほぼまるまる使わせていただいてます。興味がある方はご参考にしてください。
最新記事と関連記事を作りました
スクリプトを導入するにあたり、どうせスクリプト作るなら前から作ってみたかった新着記事と関連記事をスクリプトで作ってみようと思い、作りました。
ちなみにカテゴリーは手作業、月別アーカイブはこちらの記事を参考にさせて頂いています。
余談ですが、月別アーカイブはスクリプトで動作しているようですね。JavaScript を無効にしたら月別アーカイブは動作していませんでした。
この最新記事と関連記事を作っている時に、はてなブログでは記事下に関連記事が表示できるという、制作途中においてショッキングな出来事もあったのですが、見なかったことにしました。
まあ標準の関連記事は便利なのですが、タイトルが省略形なのがちょっとね…。あとせっかく作ったこともあり当ブログでは自作を設置しています。
仕組みは難しくありません。JavaScriptでアーカイブやカテゴリーのhtmlを取得し、必要なものだけ抽出してページに組み込んでいます。自作ならではの強みとして、関連記事はランダム表示です。
ただスクリプトを使い外部に通信してhtmlを取得するため、全行程が終わるまで時間がかかります。
一応、ページ読み込み後に処理するようにしているのですが、ここまでするならレスポンシブデザインで同じような内容を表示させたほうが速いです。
なので、SEOとかを考慮する場合、読み込み速度など考えるとあまりオススメでないと思います。
まとめ
こんな感じで作ったスマホ版ですが、わたしとしては非常に満足しています。
やはりこういうものを一つ作ると、いろいろ知識や技術や経験が増えて、とても面白いですね。
まだまだデザイン的に微調整しなければいけない部分はあるでしょうが当分はスマホ表示をこれでいきたいと思います。
スポンサーリンク
