メープルクッキー。

メープルクッキー。

ハロー!プロジェクト関連、美容・化粧品、ブログ運営、節約体験談など記載している雑記ブログ

MENU

【コピペ+αで簡単設定】はてなブログ スマホ版カスタマイズまとめ

f:id:r122307131111:20170710011509j:plain

(追記/クリックすると該当箇所へ飛べます 2017.07.19)

 

どうもこんにちは、山田です。

 

突然ですが、皆さんブログはスマホで読みますか?

それともパソコンで読みますか?

私はどちらかと言えばスマホでブログを読むことが多いけど、両方利用している派です。

ついでにタブレットも利用してます。

 

今はスマホでブログを読まれる方がとても多いので、スマホでも見やすいブログづくりが重要です。

今回は私がはてなブログのスマホ版で行ったカスタマイズを紹介していきたいと思います。

 

 

 

カスタマイズした主な内容

では、このブログの具体的にどこをカスタマイズしたのかについてお話ししたいと思います。

 

【注意事項】

※スマホ表示でのカスタマイズを行うには、はてなブログPro(有料版)に加入していることが条件となります。

※ご自身が現在設定しているソースのバックアップを取ってからカスタマイズするようにしましょう。バックアップはメモ帳に貼り付けるなどで大丈夫です。

 

 

スマホ版の下部分の「はてなブログ開発ブログ」「週間はてなブログ」「はてなブログTOP」を非表示

こちらからソースを拝借しました。

chipspd.hatenadiary.jp

 

「はてなブログ開発ブログ」「週間はてなブログ」「はてなブログTOP」を非表示にするには、こちらの記事にあるソースを所定箇所へコピペするだけで設定完了します。

2014年の内容ですが、現在でも問題なく使用できるソースです。

 

ただ、チップさんのブログでは設定→詳細設定のhead内に書き込むようにあったのですが、現在使用しているテーマ「Brooklyn」では上記のソースを詳細設定のhead内に書き込むと、PC版のサイドバーの吹き出し部分が消えてしまいました。

そのため、私は「デザイン」→「スマートフォン」→「ヘッダ」に公開されているソースを書き込んでいます。

 

 

SNSフォローボタンの設置

さて、フッターを非表示にしてしまうと画面下の読者になるボタンも非表示となります。

読者登録をしたくてもできない!という機会損失がないよう、SNSフォローボタンを設置しましょう。

 

SNSフォローボタンの設置にはこちらのソースを拝借しました。

www.yukihy.com

 

「フラットで丸くて可愛い」 を使用しています。

 

 

SNSボタンをおしゃれなデザインに変更

はてなブログのデフォルトの設定ですと、SNSボタンは大きさがバラバラで見映えがイマイチですよね。

そこで、私はこちらのソースを拝借しました。

www.daipanman.com

 

各SNSボタンが同じ大きさに統一されるソースです。

私はデフォルトの丸ではなく、四隅の角が丸くなる設定にしました。

 

下記のしめひつさんが作成されたSNSシェアボタンもおすすめです。
bunkeino.hatenablog.jp

 

私が上記のだいぱんまんさんのソースとしめひつさんのソースをおすすめする理由は、どちらもアイコンを読み込む際、スクリプトで登録数(カウンター)を読み込む設定をしないソースであるため。

スクリプトの読み込みがない分、表示速度は(体感的にですが)早いと思います。

(登録数が表示されないため、私みたいなはてブがほとんど付かない者にも優しい仕様になっております。登録数が出る仕様はつらい…肩身が狭い…)

  

 

画面下にスクロールしてもついてくるメニューバーを設置、およびメニューバーの色変更

以前は画面上にグローバルメニューを設置していましたが、こちらをスクロールしても画面下についてくる固定メニューバーに変更しました。

 

こちらのソースを拝借しました。

www.hitsujisystem.com

 

上記のあきよしさんが公開されているソースは、本来はてブ順だった箇所が読者登録ボタンに置き換えられています。

そのため、こちらを使用すれば上記で非表示になってしまった読者登録ボタンを新たに設置しなくても良いところがおすすめです。

 

 

メニューバーの色はデフォルトのグレーではなく、爽やかな白×青に変更。

個人的に非常に好みの色合いです。

 

ソースはこちらから拝借しました。

design.syofuso.com

 

 

日付の色や見出し部分を変更

レスポンシブデザインでないデフォルトのデザインはメリハリに欠けるので、こちらに記載されている各ソースを拝借しました。

tsukuruiroiro.hatenablog.com

 

私はメニューバーの色に合わせて、色の変更設定には主に濃い青(紺色)で統一しています。

 

 

 

今後の課題

スマホ版カスタマイズを行ったことで以前より利便性は上がったかなとは思うのですが、グーグルアドセンスの審査申請をした頃より表示速度が遅くなってしまいました。

(表示速度につきましてはこちらで確認ができます)

 

画像を小さくするだけで表示速度が変わってくるようなので、ちょいちょい画像サイズを直しつつ記事の整理もしていきたいと思います。

 

 

【追記】

だいぱんまんさん(id:donchan922)からスターを頂きました!

ご覧頂きありがとうございました!

とても可愛いアイコンで、眺めるのが楽しみになりました。

また良いな!と思える記事を見かけたら紹介させてください。

 

あきよしさん(id:sheepsystem)からはてブ登録して頂きました!

はてブ登録ありがとうございました!とても嬉しいです。

読者登録ボタンをメニューバーに取り入れるのに苦戦していた際、あきよしさんの公開されているソースを見つけました。

今までの苦戦していたのが嘘のように簡単に設定することができ、とても助かったので紹介させて頂きました。

また良いな!と思える記事を見かけたら紹介させてください。

 

 

 

最後までお読み頂き、ありがとうございました。

 



カンファレンスバナー