効率165センチメートル

ちいさな体で効率的に生きていく

【はてなカスタマイズ】読みやすさUP。ブログ記事文章の文字の間隔を変える。

f:id:k07_20:20191106201102j:plain

今日はカスタマイズ記事をお届けします。

 

ブログ文章の文字の間隔を狭くするカスタマイズです。

 

自分のブログをみて

 

なんだか読みにくいな~

 

と思っていたのですが、

ちょっと文字のスペースを狭くしたら一気に見やすくなりました。

 

今回のカスタマイズは結構重要かもです。

まじで見やすさが変わりました。

 

見やすさの向上はサイト周遊率や滞在率UPに繋がり、

結果Googleから評価されやすいです。

 

今回もコピペで簡単にできます。みなさんもぜひやってみてください。

 

カスタマイズ

それではカスタマイズをしていきます。

 

まずはカスタマイズ完成図から。

カスタマイズ結果

カスタマイズ結果はこんな感じ。

 Before

 

f:id:k07_20:20191106203854p:plain

After

f:id:k07_20:20191106203848p:plain

 

すみません。

 

ぶっちゃけ目を凝らしてやっとわかるレベルですね。

 

Afterは3~4文字ほど詰められています。

 

変わらねーじゃん!

 

って思うかもですね。

 

しかしその些細な誤差で、

圧倒的に読みやすさや読み進めるときのストレスが変わります。

コード【コピペOK】

コードは以下の通り。

 

コピペOKです。

 

body{
letter-spacing:0;
}

 

カスタマイズ場所

上のコードを下の場所に貼り付けてください。

 

ダッシュボード→デザイン→スパナマーク→デザインCSS

 

ダッシュボード→デザイン

f:id:k07_20:20191019092610p:plain

 

 カスタマイズ(スパナマーク)

f:id:k07_20:20191005180656p:plain

 

デザインCSS

f:id:k07_20:20191019092600p:plain

この赤枠にコードをペーストします。

使用しているテーマ

当ブログでは、テーマ【UnderShirt】を使用しています。

blog.hatena.ne.jp

コード解説

「body」は記事全体を指します。

 

bodyの{}内にコードを書いていっています。

文字の間隔を狭くする

以下のコードで文字間隔を狭くしています。

 

letter-spacing:0;

 

「letter-spacing」は文字と文字の間隔を表しています。

 

レター(文字)のスペース(間隔)ですね。

「0」することによって、文字と文字の間隔を無くしています。

文字の間隔を広くする

一応、広くするためのコードも書いておきます。

 

letter-spacing:0.5;

 

だいたいですが、0.5くらいまでで十分だと思います。

 

もう少し狭く・広くの細かい調整は、0.1単位で行ってください。

アクセントのある記事を

以上が、記事文章の文字と文字の間隔を変えるカスタマイズです。

 

一工夫で、印象が大きく変わるので、ぜひ行ってください。

 

冒頭でも言いましたが、

読みやすさUP→滞在率UP→Googleからの評価UPです。

 

細かいところですが、調整してみましょう。

その他のカスタマイズ

その他にもカスタマイズ記事ありますので、よかったら参考にしてください。

はてなスター機能を残したまま非表示にする

www.165-cm.com

記事一覧のカスタマイズ

記事一覧を大きなカード型へ

www.165-cm.com

 

記事を枠線で囲む

www.165-cm.com

 

 選択した記事を透けさせるカスタマイズ

www.165-cm.com

 

記事一覧のタイトル色を変えるカスタマイズ

www.165-cm.com

 

記事一覧に影をつけて立体的に見せるカスタマイズ

www.165-cm.com

 

サイドバーをカスタマイズ

サイドバーを見やすくする

www.165-cm.com