どうも、むむむです。
タイトルをみておもしろそうだなーっと思い記事を開くと、たんたんと書かれた文章だらけの記事で読む気を失せてそっ閉じすることがよくあります。
読みやすい文章は文章自体の分かりやすさはもちろんですが、意外にデザインによる見た目も読みやすさに大きく影響するものです。
私も文章を書くのが得意ってわけではないので、だからこそ、『ぱっと見たときの見た目の読みやす』にはかなり拘っているつもりです。
嬉しいことに「とても読みやすい！」と言っていただける方も多いので、今回はこのブログでも実装しているブログの文章が読みやすくなる装飾カスタマイズをいくつかご紹介したいと思います。
どれもコピペで簡単に真似できるので是非チェックしてみてね！
CSSを変更する方法
この記事ではCSSのコピペで実装できる装飾を紹介しているので、真似したい装飾のCSSを指定の場所にコピペしてご利用ください。
パソコンのCSSを変更する方法
デザイン→カスタマイズ→『デザインCSS』にコピペしてください。
レスポンシブデザインのテーマを利用されている方は、デザインCSSを変更するだけでパソコンもスマホも同時に変更可能です。
スマホのCSSを変更する方法
レスポンシブデザインではないテーマを使っている場合は、設定→デザイン→スマートフォン→ヘッダ→『タイトル下』にコピペしてください。
コピペする際はかならず以下のstyleタグでCSSを囲むのを忘れないように！
| <style type="text/css"> | |
| /*この中にCSSを記述 */ | |
| </style> |
文字にアンダーラインを引く
このブログでも実装していますが、太字にした部分に自動で蛍光ペンで引いたようなアンダーラインをつける装飾です。
太字だけよりもより重要なポイントがわかりやすいし、スッキリとした見た目で文章全体が引き締まってみえると思います。
CSS
太字に蛍光ペンのようなアンダーラインをつける装飾は、以下のCSSをコピペするだけです。
| article strong{ | |
| margin:0 0.1em; | |
| padding:0.05em 0.05em; | |
| background:#fcfc60 !important; | |
| background:linear-gradient(to bottom, transparent 65%, #FFF8C2 60%) !important; | |
| } |
囲いで強調したい部分を目立たせる
こんな感じでポイント部分を囲むと読みやすい！
強調したいポイントや事例を紹介したりと、他とは違う部分として強調する際に非常に便利な装飾です。
CSS
| .box27 { | |
| position: relative; | |
| margin: 2em 0; | |
| padding: 0.5em 1em; | |
| border: solid 3px #62c1ce; | |
| } | |
| .box27 .box-title { | |
| position: absolute; | |
| display: inline-block; | |
| top: -27px; | |
| left: -3px; | |
| padding: 0 9px; | |
| height: 25px; | |
| line-height: 25px; | |
| vertical-align: middle; | |
| font-size: 17px; | |
| background: #62c1ce; | |
| color: #ffffff; | |
| font-weight: bold; | |
| border-radius: 5px 5px 0 0; | |
| } | |
| .box27 p { | |
| margin: 0; | |
| padding: 0; | |
| } |
HTML
以下のHTMLを記事執筆画面の『HTML編集』にコピペしてください。
| <div class="box27"> | |
| <span class="box-title">ここにタイトル</span> | |
| <p>ここに文章</p> | |
| </div> |
上記以外の囲いのデザインについては、以下の記事でたくさん紹介されているので参考にしてください。
見出しデザインを変更する
見出しのデザインがいまいちだとブログ全体のしまりが悪くなり、それだけで読む気が失せてしまうものです。
こちらのブログで色んなパターンの見出しデザインが紹介されています。どれもCSSのコピペで真似できるので、好みに合わせて選んでみるといいでしょう。
基本的に好みなので自分が良いなと思う見出しを選べばいいですが、ブログ全体のバランスを考えて統一感のある見出しを意識するとより見やすくなると思います。
関連記事・おすすめ記事のデザインを変更する
関連記事やおすすめ記事を紹介する際に、上記のようにリンク先を枠で囲むことで強調することができます。
CSS
HTML
上記の枠で強調したいリンクは以下のHTMLで記入してください。
| <p class="emphasize-link"><a href="ここにURL">ここにタイトル</a></p> |
その他のデザインはこちらの記事を参考にしてください。
吹き出しで会話形式
はじめまして、肉球です・・・。
吹き出しを使った会話形式の説明を取り入れたブログが最近よく目にするが、こうした吹き出しもコピペで簡単に実装することができます。
CSS
| /*****ここから会話のCSS*****/ | |
| .talk-wrap{ | |
| display: block; | |
| clear: both; | |
| margin:0 auto 3px auto; | |
| } | |
| .talk-wrap p{ | |
| margin:0; | |
| } | |
| .left-icon{ | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| -webkit-border-radius: 50%; | |
| background: no-repeat; | |
| background-size: 180%; | |
| background-position: center; | |
| float:left; | |
| display:inline-block; | |
| box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/ | |
| border: 3px solid #fff; /*左のアイコンの枠の設定*/ | |
| margin-bottom: 10px; | |
| } | |
| .talk-left{ | |
| float:right; | |
| position: relative; | |
| background: #fff; /*左の会話の背景色*/ | |
| border: 2px solid #666; | |
| padding: 3%; | |
| border-radius: 10px; | |
| width: 70%; | |
| margin-top:10px; | |
| box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/ | |
| margin-bottom: 10px; | |
| } | |
| .talk-left:before { | |
| content: ""; | |
| display: inline-block; | |
| border: 10px solid transparent; | |
| border-right-color: #666; | |
| position: absolute; | |
| left: -20px; | |
| top: 25%; | |
| margin-top: -9px; | |
| } | |
| .talk-left:after { | |
| content: ""; | |
| display: inline-block; | |
| border: 9px solid transparent; | |
| border-right-color: #fff; | |
| position: absolute; | |
| left: -16px; | |
| top: 25%; | |
| margin-top: -8px; | |
| } | |
| .right-icon{ | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| -webkit-border-radius:50%; | |
| background: no-repeat; | |
| background-size: 180%; | |
| background-position: center; | |
| float:right; | |
| display:inline-block; | |
| box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/ | |
| border: 3px solid #FFF; /*右のアイコンの枠の設定*/ | |
| margin-bottom: 10px; | |
| } | |
| .talk-right{ | |
| float:left; | |
| position: relative; | |
| background: #fff; /*右の会話の背景色*/ | |
| border: 2px solid #666; | |
| padding: 3%; | |
| border-radius: 10px; | |
| width: 70%; | |
| margin-top:10px; | |
| box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/ | |
| margin-bottom:10px; | |
| } | |
| .talk-right:before { | |
| content: ""; | |
| display: inline-block; | |
| border: 10px solid transparent; | |
| border-left-color: #666; | |
| position: absolute; | |
| right: -20px; | |
| top: 25%; | |
| margin-top: -9px; | |
| } | |
| .talk-right:after { | |
| content: ""; | |
| display: inline-block; | |
| border: 9px solid transparent; | |
| border-left-color: #fff; | |
| position: absolute; | |
| right: -16px; | |
| top: 25%; | |
| margin-top: -8px; | |
| } | |
| .talk-end{ | |
| clear:both; | |
| } | |
| /*****レスポンシブ設定*****/ | |
| @media screen and (max-width: 480px){ | |
| .left-icon{ | |
| width: 80px; | |
| height: 80px; | |
| } | |
| .talk-left{ | |
| width: 65%; | |
| } | |
| .right-icon{ | |
| width: 80px; | |
| height: 80px; | |
| } | |
| .talk-right{ | |
| width: 65%; | |
| } | |
| } | |
| @media screen and (max-width: 380px){ | |
| .left-icon{ | |
| width: 60px; | |
| height: 60px; | |
| } | |
| .talk-left{ | |
| width: 65%; | |
| } | |
| .right-icon{ | |
| width: 60px; | |
| height: 60px; | |
| } | |
| .talk-right{ | |
| width: 65%; | |
| } | |
| } |
HTML
| <!--左の会話--> | |
| <div class="talk-wrap"> | |
| <div class="left-icon" style="background-image: url('ここに左側の人の画像のURLを貼って下さい！');"></div> | |
| <div class="talk-left"> | |
| <p>会話内容をここに記述してください！</p> | |
| </div> | |
| </div> | |
| <!--左はここまで--> | |
| <!--右の会話--> | |
| <div class="talk-wrap"> | |
| <div class="right-icon" style="background-image: url('ここに右側の人の画像のURLを貼ってください！');"></div> | |
| <div class="talk-right"> | |
| <p>会話内容をここに記述してください！</p> | |
| </div> | |
| </div> | |
| <!--右はここまで--> | |
| <!--↓会話部分の最後にこれを必ず付け加えて↓--> | |
| <div class="talk-end"></div> |
詳しい解説はこちらの記事を御覧ください。
最後に
今回は文章が読みやすくなるブログ装飾に絞ってご紹介させていただきましたが、これだけでもかなり読みやすいデザインになったかと思います。
もちろん読みやすさには文章力も不可欠ですが、読みやすい見た目も是非意識してみましょう！
以上、最後まで読んでいただき感謝！感謝！
読者登録もぜひぜひお願いします（＾ν＾）
ではでは、See you！！