読者です 読者をやめる 読者になる 読者になる

シンプルに生きてみませう

断捨離を期にネガティブからポジティブに変わろうとする私のひとりごと

MENU

ブログのカスタマイズをしました【はてなモバイル編】

f:id:aya-haseko:20170209103220j:plain

私のブログだけじゃあないのですが、最近はスマートフォンでブログ見る人多いですよね。

で、思ったんです。自分のスマホ版ブログを見て…。

何というか、操作しづらいな…。

ブログ始めて半年以上が過ぎているのにいまさら何言ってんだと思うのですが、今後ブログで稼ぎたいのであれば通らないといけない道なのでカスタマイズしてみることにしました。(AMPの方はやっていません)

5.20さらにカスタマイズしましたので追記しておきます。

はじめに

私がやったことはといいますと、とにかくググってググって…ソースをコピペした形です。(もちろんすべてOKのところを探してやりました。)

中には、見やすくするために自分でカスタマイズしています。

WEBの勉強したのに、だいぶ忘れている状態だったので助かりました。(笑)
ま、ある程度ソースは読めますけどだいぶ忘れていました。

また注意事項ですが、一部というかほとんどはてなブログProでないとできませんのでご了承ください。

ビフォーはこちら

f:id:aya-haseko:20170209090925j:plain

アフターはこちら

f:id:aya-haseko:20170209090939j:plain

ちょっとすっきりした感じになりました。

2017.5現在はこちらになります。

f:id:aya-haseko:20170520115445j:plain

カスタマイズ系記事のおかげで、すてきなブログになりました。はてな民の皆さまありがとうございます。

変更した場所

ヘッダーとフッターをなくした

普通にモバイルでブログを開くと、ヘッダーに「HatenaBlog」と「ログイン」の部分とフッターに「週刊はてなブログ」や「はてなブログ開発ブログ」など、ユーザーからしたらどうでもいい項目があるので消しました。

消し方は色々なサイトで紹介されていますがこちらがわかりやすいです。

www.kimanagu.com

CSSでいらない項目をnoneに設定すればOKです。

メニューを作成した

ヘッダーにグローバルメニューをつける人も多いわけですが、スマートフォンであればトグルメニューの方が扱いやすいかなと思ったのでこちらにしました。

こちらのサイトを参考にして作りました。

www.yukihy.com

メニューの中身はこんな感じ

f:id:aya-haseko:20170209090959j:image

一応、よく読まれているジャンルを中心に集めています。

PCであればカテゴリー選択してそれに関する記事が読めたりしたのですが、スマートフォンは次のページをひたすらタップしないと出ないこともあり面倒だったと思うのです。

なので、こういったメニューバーを作ることによりすぐ興味ある項目の記事を読むことができます。

こちらのサイドバーですが、現在は下にメニューバーをつける形に変更しました。詳しくは後ほど...。

日付を見やすくした

何となくですがちょっと物足りなさを感じたのでこちらもカスタマイズ

参考にしたのはこちらの記事

tsukuruiroiro.hatenablog.com

色を変えたりしてちょいとかっこよくなりました。

f:id:aya-haseko:20170209091024j:image

目次を見やすくした

これは以前からやっていたのですがこの機会に載せときます。

f:id:aya-haseko:20170213095227j:plain

PCで見るとこのように大見出しと中見出しが出る感じになるのですが、スマートフォンで見ると多すぎて操作しづらいなと感じたので中見出しを省略することにしました。

参考にしたのはまたもやゆきひーさんの記事です。

www.yukihy.com

実際こういう感じになりました。

 

f:id:aya-haseko:20170317151737j:plain

お問い合わせフォーム用のアイコンを作った

 f:id:aya-haseko:20170209102756j:image

今まではお問い合わせだけテキストで対応していたので少しバランスが悪かったのですが

 f:id:aya-haseko:20170209100111p:image

こんな感じでバナー作ってみました。(またPC編の時に説明しますが作るのしんどかったです。)

修正した日が自動で出るようにした

f:id:aya-haseko:20170317151849j:plain

PC編と同様につけました。こちらで紹介しているため省略

www.aya-simplelife.com

 

ここから2017.5.20追加:下にメニューバーを増やした

スマホで見ている人も多いかなと思ったので、便利になるかもと思い下に固定のメニューバーを追加しました。

参考にしたのはゆきひーさんのこちらの記事

www.yukihy.com

こんな感じに変更しましたがいかがでしょうか。

f:id:aya-haseko:20170520115419j:plain

それに伴い、サイドバーは一旦廃止しました。もし使いづらくなったという人がいたらご連絡ください。

記事中のシェアボタンを上下に設置

これまではてなデフォルトのシェアボタンを利用していましたが、なかなか時間がかかるということもあり変更することに。

参考にしたのはゆきひーさんの記事

www.yukihy.com

まず記事上はこちら

f:id:aya-haseko:20170520115327j:plain

記事下はこちら

f:id:aya-haseko:20170520115341j:plain

フォローバーを変更

今までのやつも気にいってましたが、もすこし違うものに変えようと思い変更しました。

参考にしたのはshunさんのこちらの記事

www.ituore.com

こんな感じで設定しました。

f:id:aya-haseko:20170520115204j:plain

記事中の上の方に注目記事という枠を作った

私のブログは検索流入が多いので、初めてきた人のためのおすすめ記事というのを設置しました。

参考にしたのはよつばさんの記事

www.yotuba.xyz

少し自分なりに工夫しましたがこんな感じです。

f:id:aya-haseko:20170520115249j:plain

最後に

やろうやろうと思ってもやる気がしなかったブログのカスタマイズ。色々な人のブログを見ていくうちにこのままではマズイと思いブログと真剣に向き合うことに決めようやく決行しました。

意外にこういったユーザビリティの観点から見ると中身はいいのに操作しづらくてもう来るのやめよという人だっていると思います。それってもったいないですよね。

現に今年に入って色々な意味で営業活動?らしきこともやっているわけでありますけど正直言ってユーザビリティはほったらかしていました(^^; 本当にごめんなさい。

ま、本気でブログ飯をやりたい人は記事を書くのはもちろんなんですがこういったユーザビリティとアクセスビリティは大切になりますので本など読んで勉強してみるのもありです。

一番いいのはHTML5+CSS3がセットになっているマニュアル本がおすすめです。