おはじん！おばじんです。
さて、先日はてなブログPro化を済ませたのですが、、
はてなブログProで利用可能になる機能の一つにスマホ版ページのカスタマイズがあります。
今回は先輩方の分かりやすい解説サイトを元にして、スマホ版ページのカスタマイズを行っていきたいと思います。
スマホ版ページのBefore
カスタマイズ前の状態はこんな感じです。
※Pro版に変える前の無料版の状態なので、広告などが表示されてなおさら見づらいです。
▼トップ画面・ヘッダー
▼トップページ・ヘッダー（記事一覧下）
▼記事内・シェアボタン
クソ見づらい…殺風景…シェアボタン貧弱すぎ…
突っ込みどころが多すぎて、何から始めればいいのか分かりません…
とりあえずもう少し可愛さを出して、柔らかいデザインを目指したいと思います。
いざ！カスタマイズ
とりあえずダッシュボードをいじってみる…
ふむ、ヘッダ、記事、フッタ…とそこそこいじる部分はありそうだ。片っ端からやっていこう。
①ヘッダのカスタマイズ
さて、まずはヘッダをカスタマイズしていこう。
トップ画像のカスタマイズ
とりあえず、トップ画面をもっと可愛くしたい。ヘッダー画像を作ろう。
▼ヘッダー画像を作るときは画像サイズに気を付けると綺麗に作れる
はてなブログのヘッダー画像を横幅いっぱいに、美しく設定するコツ - たわしの帖
640×310のサイズで画像ができた。
あとは、ダッシュボードで設定して完了である。
ちょっと可愛くなった。
トップ画像下にカテゴリ表を入れたい
▼スマホ版でカテゴリ表を導入するのはこちらのサイトを参考にするのが最強だと思う
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
このページの『スライドメニュー部分』のコードを拝借した。
入力するのはダッシュボードの『タイトル下』である。ココ。
突っ込んでみた。
PCの画面で見るとちょっと変な感じに表示される。
しかし、スマホで見てみると問題なく反映されているので安心して欲しい。
メニューバーの内容を変更するには「メニュー1」「メニュー2」を表示したい内容に書き換え、「URL」を飛ばしたいページのURLに書き換える。
こんな感じになった。ヘッダー画像下の変な余白も消え、すごく良い感じになった。
②記事のカスタマイズ
さて、続いて記事のカスタマイズにうつります。
※記事タブ内の『記事ページをプレビュー』をクリックするのを忘れずに
現状では、PC版のHTMLがそのまま表示されているため、シェアボタンや広告などが完全に崩れてしまっています。
『スマートフォン用にHTMLを設定する』にチェックを入れましょう。
シェアボタンを可愛くする
シェアボタンのカスタマイズに関しては、コチラの記事を参考にした。
コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜
丸パクリである。
めちゃくちゃ簡単に可愛くできた。ありがたや。
目次をもう少し見やすくしたい
デフォルト状態だと、目次が致命的に醜い。
▼またまたひつじさんを参考にさせてもらった
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
『目次部分』のコードを『記事上』に張り付ける。
これまたとても見やすくなった。ありがたや。
③フッタのカスタマイズ
いよいよ大詰め、フッタのカスタマイズに入りまする。
フッタのカスタマイズは、ひつじさんの解説ページがカッコいいし見やすいし最強だと思います。めちゃめちゃ参考にさせていただきました。
不要な要素を全て非表示！！
▼これまたひつじさんを参考に
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
『不要な要素を全て非表示』のコードを適用。
プロフィールをカッコよく！
▼これもひつじさん
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
『プロフィール・フォローボタン部分』のコードを適用
スマホ版ページのAfter
改良を加えすぎて、Afterを紹介しきれないことが判明しました。
スマホで見ている方は、今見ている姿が完成版です。
普段はPCで当ブログをご覧になられている方も
ぜひ、スマホで一度見てみてくださいね。
まとめ：カッコ良いスマホ版サイトができた
貴重なカスタマイズ情報を提供してくださった先輩ブロガーの方々に超感謝です。
HTML、CSSなんてほとんど考える必要がありませんでした。指定されたところに、指定されたコードを貼るだけ。
だいたいコピペで1時間程度でこんなに良いサイトができてしまいました。
皆さんも、スマホ版のカスタマイズやってみることをおススメします！
関連記事
- もっと読む
コメントを書く