コピペでできる！はてなブログ 超おすすめカスタマイズまとめ【スマホ版】
こんにちは、じゆにんです！
最近アクセス数も増えてきたということで、少しですがアクセスの解析も行うように
しているんですが、
どの端末からアクセスされているか見てみると、思ったよりスマホからのアクセスが多いんですよね！
僕は基本他のブロガーさんのブログを見るのはＰＣからが多いので「そんなスマホからはみないやろぉ」と思っていて、最初はPCからアクセスした場合の見た目をいじるカスタマイズばかりいじってスマホは放置していました。
（結果、スマホからアクセスした場合はタイトルの画像・文字がかなりくずれていました（笑））
さすがにスマホのカスタマイズも軽視するわけにはいかないなと思い、最近はスマホのカスタマイズにも注力してきたのですが、ようやくある程度スタイリッシュな見た目にすることができ、大分満足することができました。
ということで、僕の備忘録作成という目的も兼ねて、当ブログで行っている皆さんにもお勧めできるカスタマイズを紹介していきたいと思います。
スマホのブログカスタマイズをする前に・・・
スマホ版のカスタマイズを行う場合、はてなブログproへの移行が必要です。
proへの移行はまだ考えていない人はレスポンシブ対応のブログテーマを用いればスマホからの見た目もそれなりに見れるものになるんじゃないかと思います。
（デフォルトのメニューバーとかが表示されているのは我慢・・・）
PCのカスタマイズをいじっている場合はスマホの見た目にも影響して見た目がくずれてしまうことがあるので注意が必要です。
proへ移行済みの方は、スマホのカスタマイズを始める前に、下記設定を確認しましょう。
1.レスポンシブ対応のブログテーマを活用している人は
「ダッシュボード」-「デザイン」-「スマホ」-「詳細設定」のところにあるレスポンシブテーマのチェックを外しておきましょう。
2.「ダッシュボード」-「デザイン」-「スマホ」のHTML入力欄の上に「スマートフォン用にHTMLを設定する」というラジオボタンがあるので、HTMLに記述を行う前にチェックをいれておきましょう。
機能的なカスタマイズ
さあ、必要な設定は終えたので、早速お勧めのカスタマイズを紹介していきます。
まずは機能面改善のカスタマイズから。
不要な項目の削除
追尾するはてな標準のヘッダ、ページ下部のダッシュボード、はてなブログ関連のリンクははてなブログユーザー以外には必要な項目なので、下記記事を参考に消しています。（だいぶすっきりしました！ありがとうございます。）
スタイリッシュなシェアボタンの設置
僕のブログでは記事下に各ソーシャルメディアへのシェアを簡単に行えるボタンを設置しています。
ゆきひーさんがPC版と同様スマホ版の記述も下記記事にまとめてくれているので、
参考にしましょう！いつも本当にありがとうございます！
スタイリッシュなフォローボタンの設置
フォローボタンもシェアボタンと同じく、ゆきひーさんが作成していただいたものを
使用しました。
HTMLは記事上、記事下に、CSSはヘッダ下のところにPC版のカスタマイズとおなじ記述をコピペしたら動きました。
スタイリッシュなトグルメニューの設置
WAROCOMさんの記事みててマネしたいと思ったのがこの2分割トグルメニュー。
PC版グローバルメニューのスマホ版ですかね！
あまりぞろぞろと表示させると見づらくなってしまいますので、カテゴリの大分類を設定すればいいんじゃないかなと思います。
（まだやってませんが、おすすめ記事なんかもまとめ記事をつくってメニューに設定させることもできそうなので、もうちょっと記事増えたらまとめ記事作って設定しようと思っています。）
このトグルメニューも元をたどればゆきひーさんが開発したものとのこと。ほんとすごいなー（笑）
見た目のカスタマイズ
次は見た目のカスタマイズです。
文字の大きさを16pxに変更
文字の大きさを変更しましょう！
僕的には16pxぐらいがちょうどいいかなと思いますが、好みによって大きさを調整しましょう。
詳細方法はAppismさんの記事にまとまっているので、ご覧ください。
見出しのデザインを変更する。
PC版でもおなじみの、見出しのデザインを変更するカスタマイズですね。
PC版との設定方法の違いは、記述を<style> </style>タグで囲むくらいです。
僕はPC版と同じデザインを使いたかったので、コピーペーストで使いまわしています。同じようにPC版とスマホ版のデザインを統一したい人は同じ記述を使いまわしましょう。
詳細方法はNO TILTLEさんの記事にまとまっているので、ご覧ください。
(他のカスタマイズでもだいぶお世話になってます！）
デフォルトのヘッダ&ヘッダ画像削除、記事一覧の見た目をスタイリッシュに。
はてなブログのデフォルトのスマホヘッダはあんまかっこよくない上にプロフィール画像がスペースをとっているので、下記記事を参考に削除してしまいました。
ついでに記事一覧も下記記事を参考にスタイリッシュなデザインに変更してます。
LITERALLYさんは本当に洗練されたデザインを作っているので、いつも参考にしています！
デザインを勉強するうえで目標とするならマジでLITERALLYさんかなと思ってます。
目次のデザイン変更
目次のデザインはつばさのーとさんのデザインを採用させていただきました。
スマホからのアクセスの場合は、このデザインが一番見やすく、かつ使いやすいなと思っています。
まとめ！
こんなもんかな？抜けもれがあったらor追加でカスタマイズしたらこの記事に追記していきたいと思います。
個人的にはスマホのデザインはカスタマイズするのとしないのとではかなりユーザビリティがかわってくるんじゃないかなと思っています！
スマホデザイン的にも、本格的にマネタイズとかするんだったら、はてなブログproへの移行は必須だなぁと身に染みて感じました（笑）
カスタマイズって挑戦してみる前はとっつきにくいイメージを持つかもしれませんが、記述を加えるだけでガラッとかわるので、色々いじるのがめちゃくちゃ楽しいんですよね（笑）
抵抗持ってる人もまずは挑戦してみることをおすすめします！
PC版のカスタマイズは下記記事で紹介しています。
