わたしのみち

おもうこと、ひびのことあれこれ




スポンサーリンク

はてなブログProにしてカスタマイズした7つのこと【スマホ版】

今日ははてなブログProでスマホ版のカスタマイズをしました。
先日Proにして一番手を付けたかったコトです。

route53.hatenablog.com

*今はレスポンシブにしています。

 

アクセス解析

GoogleAnalyticsの解析によると、私のブログを見て下さる5割がモバイルからの

アクセスです。

f:id:ROUTE53:20150729135710p:plain

ということで、モバイルをもっと見やすくしたい!のです。

はてなのデフォルトでは不要だなと思うことや変更したいなと思うことがありました。

ですが、CSSやHTMLは私にはわかりませんので、

PC版カスタマイズと同じく、多くの方のブログを参考にさせていただき、

手を加えました。

リンクを貼らせていただいた皆様方、ありがとうございます。

 

 

カスタマイズ【スマホ版】

Proにすることで、「ダッシュボード」→「デザイン」→「スマートフォン」

ヘッダのタイトル下・フッタにHTMLを設定できます。

ちなみに、記事上・下は無料版のままでもHTMLの設定ができますので、

無料版でそこだけカスタムするのもアリだと思います。

 

見出し

PC版と同じものにしています。

同じHTMLをヘッダのタイトル下に貼り付けました。

f:id:ROUTE53:20150729150545j:image

to-torinos.hatenablog.com

 

Google AdSense 広告の削除と設定

Proにしたと同時にはてなのアカウントの広告表示を非表示にしています。

改めて自分のアカウントの広告を記事上・フッタ2カ所に設置しました。

収益は重視していないので、見た目を損なわない程度のサイズにしました。

・・・というか本当に見た目重視で収益無視なら外しておけばいいんですが、

ちょびっとの欲です♡

 

メニューバー

デフォルトではカテゴリー表示がないので、

ヘッダ・タイトル下にメニューバーを設置しました。

PC版では現在10個のカテゴリーを置いていますが(多すぎ?)、

スマホですべての表示はキレイじゃないので、

よく書くカテゴリーを5つに絞りました。

カテゴリー内の他の記事も見たいと思ってくださった方には、

スムーズに飛んでもらえるようになりました。

f:id:ROUTE53:20150727043538j:image

akiueo.hatenablog.com

 

サムネイルを大きく・日付に色付け

サムネイルのサイズと日付に色付けしてメリハリを出しました。

ヘッダ・タイトル下に設置します。

f:id:ROUTE53:20150727043302j:imagef:id:ROUTE53:20150729150559j:image

tsukuruiroiro.hatenablog.com

 

読者登録・Twitter

プロフィール欄に読者になるボタンTwitter登録ボタンを置きたかったんですが、

デフォルトのプロフィールに置けなかった(方法が見つからなかった)ので、

一旦プロフィールを全削除して、設置し直しました。

これはフッタ設置します。

散るろぐ(id:cild)さんのブログに書かれてるように、Proのアイコンを消したかった

訳でもないんですが、

読者になるボタンTwitter登録ボタンを設置するにはこの方法が手っ取り早いなと、

参考にさせていただきました。

cild.hatenablog.com

staff.hatenablog.com

www.a-s-blog.com

  

フッター削除

スマホ版でフッタのもろもろが見えるのは自分だけなんでしょうか?

そうでないなら、不要なリンクだなと思ったので☆部分を削除しました。

 

f:id:ROUTE53:20150729144600j:plainf:id:ROUTE53:20150729144633j:plain

ちょっとわかりにくいですが、注目記事以降がスッキリしましたね。

広告を外しちゃえばもっとスッキリします。

www.mataro1.com

 

シェアボタン

こちらもPC版と同じく、大き目なものに変更しました。

私自身がデフォルトの小さいボタンでは押し間違うことがありましたので。

www.yukihy.com

 

まとめ

以上7点を変更しました。

全体的にメリハリ・スッキリになったかと思います。

ご覧いただく方が他記事に飛びやすいと回遊率も増すかな?と期待しております。

 

ちなみに、カスタムの最中に知識がないとはいえ、ソースを見たいなと思うことが

しばしばありましたので、PCでスマホのソースを見る方法を加えておきます。

chipspd.hatenadiary.jp

 

今回のカスタムでちょっとは自分で勉強しよう?と思いました。

改めまして、参考にさせていただいたブロガー様に感謝します。

みなさんスゴイです!

 

PC版もご覧下さるとうれしいです。

route53.hatenablog.com

 

 

 

ARIGATO☆

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん