ビジログ

マーケティングを中心としたビジネス関連とブログ術の二本柱

コピペで真似できるブログが読みやすくなる装飾カスタマイズ!読みやすいブログは見た目が違う!

f:id:netlifehack:20170905010139p:plain

どうも、むむむです。

タイトルをみておもしろそうだなーっと思い記事を開くと、たんたんと書かれた文章だらけの記事で読む気を失せてそっ閉じすることがよくあります。

読みやすい文章は文章自体の分かりやすさはもちろんですが、意外にデザインによる見た目も読みやすさに大きく影響するものです。

私も文章を書くのが得意ってわけではないので、だからこそ、『ぱっと見たときの見た目の読みやす』にはかなり拘っているつもりです。

嬉しいことに「とても読みやすい!」と言っていただける方も多いので、今回はこのブログでも実装しているブログの文章が読みやすくなる装飾カスタマイズをいくつかご紹介したいと思います。

どれもコピペで簡単に真似できるので是非チェックしてみてね!

スポンサードリンク

 

CSSを変更する方法

この記事ではCSSのコピペで実装できる装飾を紹介しているので、真似したい装飾のCSSを指定の場所にコピペしてご利用ください。

パソコンのCSSを変更する方法

デザイン→カスタマイズ→『デザインCSS』にコピペしてください。

f:id:netlifehack:20170905010727p:plain

 

レスポンシブデザインのテーマを利用されている方は、デザインCSSを変更するだけでパソコンもスマホも同時に変更可能です。

スマホのCSSを変更する方法

レスポンシブデザインではないテーマを使っている場合は、設定→デザイン→スマートフォン→ヘッダ→『タイトル下』にコピペしてください。

f:id:netlifehack:20170905010744p:plain
ポイント!

コピペする際はかならず以下のstyleタグでCSSを囲むのを忘れないように!

CSSの追加方法はこちらで詳しく解説しているので、合わせて読んでみてください。

文字にアンダーラインを引く

このブログでも実装していますが、太字にした部分に自動で蛍光ペンで引いたようなアンダーラインをつける装飾です。

太字だけよりもより重要なポイントがわかりやすいし、スッキリとした見た目で文章全体が引き締まってみえると思います。

CSS

太字に蛍光ペンのようなアンダーラインをつける装飾は、以下のCSSをコピペするだけです。

囲いで強調したい部分を目立たせる

 
ポイント!

こんな感じでポイント部分を囲むと読みやすい!

強調したいポイントや事例を紹介したりと、他とは違う部分として強調する際に非常に便利な装飾です。

CSS

HTML

以下のHTMLを記事執筆画面の『HTML編集』にコピペしてください。

上記以外の囲いのデザインについては、以下の記事でたくさん紹介されているので参考にしてください。

見出しデザインを変更する

見出しのデザインがいまいちだとブログ全体のしまりが悪くなり、それだけで読む気が失せてしまうものです。

こちらのブログで色んなパターンの見出しデザインが紹介されています。どれもCSSのコピペで真似できるので、好みに合わせて選んでみるといいでしょう。

 

基本的に好みなので自分が良いなと思う見出しを選べばいいですが、ブログ全体のバランスを考えて統一感のある見出しを意識するとより見やすくなると思います。

関連記事・おすすめ記事のデザインを変更する

関連記事やおすすめ記事を紹介する際に、上記のようにリンク先を枠で囲むことで強調することができます。

CSS

HTML

上記の枠で強調したいリンクは以下のHTMLで記入してください。

その他のデザインはこちらの記事を参考にしてください。

吹き出しで会話形式

 

はじめまして、肉球です・・・。

 

吹き出しを使った会話形式の説明を取り入れたブログが最近よく目にするが、こうした吹き出しもコピペで簡単に実装することができます。

CSS

HTML

詳しい解説はこちらの記事を御覧ください。

最後に

今回は文章が読みやすくなるブログ装飾に絞ってご紹介させていただきましたが、これだけでもかなり読みやすいデザインになったかと思います。

もちろん読みやすさには文章力も不可欠ですが、読みやすい見た目も是非意識してみましょう!

 

以上、最後まで読んでいただき感謝!感謝!

読者登録もぜひぜひお願いします(^ν^)

ではでは、See you!!