はてなブログをスマホ向けにカスタマイズするポイント

スマホ向けはてなブログのカスタマイズポイント

有料のはてなブログProにしてみてからいろいろと見てみると、デフォルトはけっこうひどかったですね・・・。

主な改善ポイントはこちらです。

・字が小さい

・ナビゲーションがない

・余計なものがたくさんある

・Proにしても昔書いた記事にはキーワードリンクが残ったまま

・見出しが見づらい

・ぱんくずリストがない

「デザイン＞スマホ＞ヘッダ＞タイトル下」に以下のCSSをそれぞれ入れると対処できます。

「字が小さい」に対処

.entry-content {font-size:16px;}

これで本文は全て16pになって読みやすくなりました。

「ナビゲーションがない」に対処

こちらのg_nav を少しカスタマイズして導入しました。

「余計なものがたくさんある」に対処

いろいろ消してすっきりさせました。

#globalheader-container { display:none; } /* ヘッダとフッタ */
#footer-menu { display:none; }
#container { padding-top:0px; }
.hatena-module-title{display:none;} /* 記事下のプロフィールなど */ 
.profile-wrapper{display:none;} 
.footer-action-wrapper{display:none;}
.touch-item-list{display:none;}
#blog-description { display:none; } /* 上部のブログの説明文 */

 「キーワードリンクが残ったまま」に対処

これでProにする前の記事のリンクが消えます。

a.keyword {
border: 0 !important;
text-decoration: none !important;
pointer-events: none !important;
cursor: default;
color: #5A5A5A;
}

「見出しがみづらい」に対処 

見出しの色やデザインなどを変更します。

.entry-content h4 { color: rgb(0, 0, 0);
background: #EAEDF2;
padding: 10px 10px;
border-left: 9px solid #008196;
}

「ぱんくずリストがない」に対処

ぱんくずリストとはサイトの階層構造（カテゴリ）を検索エンジンに認識させるためのもので、SEOに効果があるようです。

ソース転載不可なのでリンクだけですが、こちらを利用しました。

まとめ

スマホでの読みやすさとページ遷移のしやすさを改善してみました。デフォルトで対応して欲しい部分もたくさんあったので運営者には頑張って欲しいところです。

↓参考になったらクリックお願いしますm(_ _)m