(追記/クリックすると該当箇所へ飛べます 2017.07.19)
※2017年秋頃からはレスポンシブデザインを使用しています。
どうもこんにちは、山田です。
突然ですが、皆さんブログはスマホで読みますか?
それともパソコンで読みますか?
私はどちらかと言えばスマホでブログを読むことが多いけど、両方利用している派です。
ついでにタブレットも利用してます。
今はスマホでブログを読まれる方がとても多いので、スマホでも見やすいブログづくりが重要です。
今回は私がはてなブログのスマホ版で行ったカスタマイズを紹介していきたいと思います。
カスタマイズした主な内容
では、このブログの具体的にどこをカスタマイズしたのかについてお話ししたいと思います。
【注意事項】
※スマホ表示でのカスタマイズを行うには、はてなブログPro(有料版)に加入していることが条件となります。
※ご自身が現在設定しているソースのバックアップを取ってからカスタマイズするようにしましょう。バックアップはメモ帳に貼り付けるなどで大丈夫です。
スマホ版の下部分の「はてなブログ開発ブログ」「週間はてなブログ」「はてなブログTOP」を非表示
こちらからソースを拝借しました。
「はてなブログ開発ブログ」「週間はてなブログ」「はてなブログTOP」を非表示にするには、こちらの記事にあるソースを所定箇所へコピペするだけで設定完了します。
2014年の内容ですが、現在でも問題なく使用できるソースです。
ただ、チップさんのブログでは設定→詳細設定のhead内に書き込むようにあったのですが、テーマ「Brooklyn」では上記のソースを詳細設定のhead内に書き込むと、PC版のサイドバーの吹き出し部分が消えてしまいました。
そのため、私は「デザイン」→「スマートフォン」→「ヘッダ」に公開されているソースを書き込んでいます。
SNSフォローボタンの設置
さて、フッターを非表示にしてしまうと画面下の読者になるボタンも非表示となります。
読者登録をしたくてもできない!という機会損失がないよう、SNSフォローボタンを設置しましょう。
SNSフォローボタンの設置にはこちらのソースを拝借しました。
「フラットで丸くて可愛い」 を使用しています。
SNSボタンをおしゃれなデザインに変更
はてなブログのデフォルトの設定ですと、SNSボタンは大きさがバラバラで見映えがイマイチですよね。
そこで、私はこちらのソースを拝借しました。
各SNSボタンが同じ大きさに統一されるソースです。
私はデフォルトの丸ではなく、四隅の角が丸くなる設定にしました。
私が上記のだいぱんまんさんのソースをおすすめする理由は、アイコンを読み込む際、スクリプトで登録数(カウンター)を読み込む設定をしないソースであるため。
スクリプトの読み込みがない分、表示速度は(体感的にですが)早いと思います。
(登録数が表示されないため、私みたいなはてブがほとんど付かない者にも優しい仕様になっております。登録数が出る仕様はつらい…肩身が狭い…)
日付の色や見出し部分を変更
レスポンシブデザインでないデフォルトのデザインはメリハリに欠けるので、こちらに記載されている各ソースを拝借しました。
私はメニューバーの色に合わせて、色の変更設定には主に濃い青(紺色)で統一しています。
今後の課題
スマホ版カスタマイズを行ったことで以前より利便性は上がったかなとは思うのですが、グーグルアドセンスの審査申請をした頃より表示速度が遅くなってしまいました。
(表示速度につきましてはこちらで確認ができます)
画像を小さくするだけで表示速度が変わってくるようなので、ちょいちょい画像サイズを直しつつ記事の整理もしていきたいと思います。
だいぱんまんさん(id:donchan922)からスターを頂きました!
ご覧頂きありがとうございました!
とても可愛いアイコンで、眺めるのが楽しみになりました。
また良いな!と思える記事を見かけたら紹介させてください。
最後までお読み頂き、ありがとうございました。