はてなブログのスマフォ表示のデフォルトデザインが、あまりに読み難いレイアウトなので、スマフォ向けCSSで少し改善してみました。

スマフォではスクロール操作による読み手側のストレス低減が必要かと思われます。

ゴリゴリ大量にCSSを叩き込んで改善するのでなく、気になった部分だけを、ピンポイントで最小のCSSで少し改善する事にしました。

 

はてなブログのフマフォ向け表示が読み難いです。

はてなブログのデザイン設定で、対スマフォ向けの表示はPC版のレスポンシブデザインを使用せず、デフォルトのスマフォ向け表示を使ってます。

理由は僕のブログの場合、レスポンシブデザインにすると本体のPCデザインに色んなコンテンツが山盛り設定してますので、帯域の狭いスマフォで表示させると、表示に時間がかかる。かかり過ぎると一切読まれることなく、立ち去る率が上がります。

なのでデフォルトのスマフォ向け表示を優先設定してますが、でもこれがめちゃくちゃ読み難いレイアウトです。これはこれで、読みづらいと感じた瞬間、せっかく見に来てもらったのに、立ち去る率が上がる恐れがあります。

レスポンシブデザイン設定で見易さを改善できる向きもありますが、あくまでも全体のレイアウトコンフギュレーションの話しであって、スマフォでの文書自体の見易さには直接、繋がってません。

スマフォの場合、幅が狭い為、どうしても文書を折り返し量が増えるので下へ間延びしてしまう。画面の高さも少ないのでスクロール量を増大させてしまいます。これを少しでも改善して、読んで貰うストレスを少なくしたいのです。フォントの大きさを維持したまま、行間と字間を見直して文書を折り返しを見直します。

 

スマフォ向けCSSで少し改善してみました。

iPhone5相当、幅360px

左がデフォルトデザインのスマフォ表示(改善前)

右が表示を改善したCSSを適用したものです(改善後)

 

f:id:tommyoctopas:20170831221153j:plain f:id:tommyoctopas:20170901221753j:plain

 行間と字間の見直しはストレスを生むスクロール量の低減に効果ありです。

改善した部分

①行間が大きすぎる。スクロールさせて読む回数が増えてしまう。詰めて最適化

②hタグの見出しCSSが素っ裸、記事の区切りが解り難い。せめて記事タイトルとh3、h4タグにCSSを当てる。

③字間を少し詰めて、幅が足りなくて残念な改行が発生するのを少しでも防ぎたい。

④ブログタイトル下のパンくずリストを消したい。記事タイトルと重複して醜いです。

⑤目次のCSSが素っ裸、まったく目次と認識できない、タイトルと枠を作る

 以上の5点だけ最低限行っておきたいのです。

 

実装するCSSソース

>|css|

<style>

.entry-title {
font-size: 100%;
line-height: 1.2em;
letter-spacing: -0.06em;
word-break: break-all;
padding-top: 4px;
border-top: 1px solid #444444;
border-bottom: 1px solid #444444;
margin-bottom: 6px;
}

.entry-content {
line-height: 1.3em;
letter-spacing: -0.06em;
word-break: break-all;
}

.entry-content p {
margin: 3px;
}

.entry-content h3 {
font-size: 100%;
padding: 5px;
border-left: 10px solid #426579;
border-bottom: 1px solid #426579;
}

.entry-content h4 {
font-size: 100%;
margin: 0 0 10px 0;
border-left: 6px solid #426579;
padding: 2px 0 0 5px;
}

#top-box {
display: none;
}

.table-of-contents {
margin-left: 4px !important;
padding: 5px !important;
border: 1px solid #bbbbbb;
border-radius: 5px;
}
.table-of-contents li,
.table-of-contents ul {
margin-left: 20px;
}
.table-of-contents:before {
margin-left: 10px;
content: "目次";
}

</style>

<|css|

 

残念な改行を防ぐ字間の圧縮、letter-spacing: -0.06em(2箇所あり)は、-0.08にすれば、かなり詰まります。ただし、やり過ぎると逆に読みづらい印象になります。

あと、行の末尾の改行が前後の単語の組み合わせで、改行がガタつく事があります。

これは、word-break: break-all;で対処します。

 

このCSSを実装したいときは

デザイン設定のスマフォの表示設定の記事の設定

記事上のカスタマイズを利用します。

「●スマートフォン用にHTMLを設定する」を選択

その下の記事上のテキストBOXにCSSを貼り付けます。

※結果は、記事プレビュー表示の確認だけでなく、実機でも確認して下さい!

 

f:id:tommyoctopas:20170831231409j:plain

 ↑cssは、このテキストBOX部分に貼ります。

 

この記事をスマフォで表示してみます。 

Before、Afterです。

f:id:tommyoctopas:20170901221249j:plain f:id:tommyoctopas:20170901221316j:plain

 

PC版のレスポンシブデザインを使用しない方は、一考の余地ありです。

こちらが意図した文書のセクションが、はっきり認識できるようになったと思います。あと読むストレスを増やすスクロールも大幅に減らせたと思います。

 

最近ではアクセス数の半分以上はスマフォなので、読み難いと感じた瞬間、即戻るボタン押され立ち去られるので、少しは改善に期待できるでしょうか

Before、Afterの比較では、ブログの中身は、まったく同じなのに、ちょっとした改善で、まったく違う内容のブログに見た目は変わります。せっかく見に訪れたのですから有益な情報かどうかともかく、気持ちよく読んで頂きたいものです。

 

スクロールさせて続きを読みたいとなるか、速攻で戻るボタン押されるか

スマフォの場合は、最初の1画面で、どれだけ情報が読み取りやすいか、まずは重要かと思います。直帰率の改善にも貢献すると思われます。

当然、中身のコンテンツが一番重要ですけどね

 

最後に 

PC向けレスポンシブ設定 vs スマフォ向け設定(css適用)

360 * 640 比較

左がPC版レスポンシブ設定でスマフォにて表示

右が今回のスマフォ向け表示にCSS適用したもの

※公平に比較する為、記事タイトル部分以降からの比較です。なお右の今回のスマフォcss対応は「はてなヘッダー」分、不利な状況化での比較です。

 

f:id:tommyoctopas:20170902161427j:plain f:id:tommyoctopas:20170902234527j:plain

 

レスポンシブ設定した表示と比べても別に劣る訳でもなく、むしろスマフォ向け表示の方が見易いかもと思えます。

あとレスポンシブ設定にした場合、サイドバーにモリモリ実装しているブログは、おそらくあまり見られる事がないコンテンツが後方で大量に控えており、読み込みに時間がかかります。通信速度が潤沢に使えるスマフォばかりでないので、これについても一考の余地ありかと思われます。

 

それではまたね(^^)/