おばじんは空を飛びたいあざらし

おばじんはアザラシ。アザラシは社会の荒波の中を泳ぎます。泳いだ人生の軌跡を記すブログ

おばじんは空を飛びたいあざらし

;

スマホ版ページを見やすく改善!参考にした分かりやすいサイトをまとめました

zaif affiliate

記事をシェアする!!

f:id:ceoh18:20171103203735j:plain

おはじん!おばじんです。

さて、先日はてなブログPro化を済ませたのですが、、

はてなブログProで利用可能になる機能の一つにスマホ版ページのカスタマイズがあります。

 

今回は先輩方の分かりやすい解説サイトを元にして、スマホ版ページのカスタマイズを行っていきたいと思います。

スマホ版ページのBefore

カスタマイズ前の状態はこんな感じです。

※Pro版に変える前の無料版の状態なので、広告などが表示されてなおさら見づらいです。

▼トップ画面・ヘッダー

f:id:ceoh18:20171102002837j:plain

 

▼トップページ・ヘッダー(記事一覧下)

f:id:ceoh18:20171102002900j:plain

 

▼記事内・シェアボタン

f:id:ceoh18:20171102002919j:plain

 

クソ見づらい…殺風景…シェアボタン貧弱すぎ…

突っ込みどころが多すぎて、何から始めればいいのか分かりません…

 

とりあえずもう少し可愛さを出して、柔らかいデザインを目指したいと思います。

いざ!カスタマイズ

とりあえずダッシュボードをいじってみる…

f:id:ceoh18:20171102004419p:plain

 

ふむ、ヘッダ、記事、フッタ…とそこそこいじる部分はありそうだ。片っ端からやっていこう。

 

①ヘッダのカスタマイズ

さて、まずはヘッダをカスタマイズしていこう。

トップ画像のカスタマイズ

とりあえず、トップ画面をもっと可愛くしたい。ヘッダー画像を作ろう。

 

▼ヘッダー画像を作るときは画像サイズに気を付けると綺麗に作れる

はてなブログのヘッダー画像を横幅いっぱいに、美しく設定するコツ - たわしの帖

 

640×310のサイズで画像ができた。

f:id:ceoh18:20171102005818j:plain

 

あとは、ダッシュボードで設定して完了である。

f:id:ceoh18:20171102010143p:plain

ちょっと可愛くなった。

 

トップ画像下にカテゴリ表を入れたい

▼スマホ版でカテゴリ表を導入するのはこちらのサイトを参考にするのが最強だと思う

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

 

このページの『スライドメニュー部分』のコードを拝借した。

 

入力するのはダッシュボードの『タイトル下』である。ココ。

f:id:ceoh18:20171102011042p:plain

 

突っ込んでみた。

f:id:ceoh18:20171102011610p:plain

PCの画面で見るとちょっと変な感じに表示される。

しかし、スマホで見てみると問題なく反映されているので安心して欲しい。

 

メニューバーの内容を変更するには「メニュー1」「メニュー2」を表示したい内容に書き換え、「URL」を飛ばしたいページのURLに書き換える。

f:id:ceoh18:20171102012340p:plain

こんな感じになった。ヘッダー画像下の変な余白も消え、すごく良い感じになった。

 

②記事のカスタマイズ

さて、続いて記事のカスタマイズにうつります。

※記事タブ内の『記事ページをプレビュー』をクリックするのを忘れずに

 

現状では、PC版のHTMLがそのまま表示されているため、シェアボタンや広告などが完全に崩れてしまっています。

f:id:ceoh18:20171102012955p:plain

『スマートフォン用にHTMLを設定する』にチェックを入れましょう。

 

シェアボタンを可愛くする

シェアボタンのカスタマイズに関しては、コチラの記事を参考にした。

コピペ一発!はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ! - いつ俺〜いつから俺ができないと錯覚していた?〜

 

丸パクリである。

f:id:ceoh18:20171102014619p:plain

 

めちゃくちゃ簡単に可愛くできた。ありがたや。

 

目次をもう少し見やすくしたい

デフォルト状態だと、目次が致命的に醜い。

f:id:ceoh18:20171102015143p:plain

 

▼またまたひつじさんを参考にさせてもらった

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

 

『目次部分』のコードを『記事上』に張り付ける。

f:id:ceoh18:20171102015254p:plain

 

これまたとても見やすくなった。ありがたや。

 

 

③フッタのカスタマイズ

いよいよ大詰め、フッタのカスタマイズに入りまする。

 

フッタのカスタマイズは、ひつじさんの解説ページがカッコいいし見やすいし最強だと思います。めちゃめちゃ参考にさせていただきました。

 

不要な要素を全て非表示!!

▼これまたひつじさんを参考に

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

 

『不要な要素を全て非表示』のコードを適用。

 

プロフィールをカッコよく!

▼これもひつじさん

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

 

『プロフィール・フォローボタン部分』のコードを適用

 

スマホ版ページのAfter

改良を加えすぎて、Afterを紹介しきれないことが判明しました。

スマホで見ている方は、今見ている姿が完成版です。

 

普段はPCで当ブログをご覧になられている方も

ぜひ、スマホで一度見てみてくださいね。

 

かなり劇的な変貌を遂げたと思います。

 

まとめ:カッコ良いスマホ版サイトができた

貴重なカスタマイズ情報を提供してくださった先輩ブロガーの方々に超感謝です。

 

HTML、CSSなんてほとんど考える必要がありませんでした。指定されたところに、指定されたコードを貼るだけ。

 

だいたいコピペで1時間程度でこんなに良いサイトができてしまいました。

 

皆さんも、スマホ版のカスタマイズやってみることをおススメします!

 

 

関連記事

 

www.obajin.com

www.obajin.com