長い文章を強調して視認性を上げるカスタマイズ方法
読者の視認性を上げるカスタマイズ方法を紹介します。
まず、こちらをご覧ください（※戻ってきてくださいね）。
このブログの目次【サイトマップ】上記のリンクをクリックすると、当アメブロのサイトマップページに行きます。
その中に、
あなたのアメブロをカスタマイズするその前に
このブログに始めて訪れた方、アメブロカスタマイズをした事ない方はこちらから。
アメブロのスキンで『スウィート』がおすすめである理由や、
そのスキンの変更方法、また、カスタマイズするための手順書があります。
といったような部分が数箇所ありますよね。
これは、【CSS編集画面】にて設定し、
記事を書く際に【HTMLタグを表示】にて指定してあげることにより
簡単に設置できます。
まぁ、記事を書く際にちょっとした手間がかかりますが、
それほど面倒でもないので一度試してみてください。
このカスタマイズをおこなうことにより、
記事にて読んでほしい文章を強調することができます。
文字サイズを変えたり、太字にしたり、色を変えたりする方法もありますが、
長い文章を強調したい場合に読みづらくなってしまいます。
このカスタマイズのように四角の囲みで強調することにより、
読みやすく、デザイン性も良くなります。
では、
長い文章を強調して視認性を上げるカスタマイズ方法
以下のタグを【CSS編集画面】に追加します。
CSS編集画面でタグを追加する方法はこちらです。
『追加するタグ』はこちらから。
↓↓↓この下から↓↓↓
.a { /*1.キーワード*/
background-color:#1D4670; /*2.背景色*/
color:#ffffff; /*3.文字色*/
border:1px #b0c4de solid; /*4.囲み枠の線のスタイル*/
padding: 5px 8px; /*5.枠と文字の間隔*/
}
↑↑↑この上まで↑↑↑
6.以下を記事を書く際の【HTMLタグを表示】にて記述します。
↓↓↓この下から↓↓↓
<p class="a">ここに強調したい文章を記入します</p>
↑↑↑この上まで↑↑↑
・上記のご説明
1.キーワード
ここの『.a』の部分は暗号のようなものです。６の<p class="a">の部分と合わせることにより、
スタイルを指定できるようになります。
2.背景色
ここで四角に囲んだ中の背景色を指定できます。
もし指定したくない場合は消去してください。
色に関してはこちらをご覧ください。【ミニカスタマイズ】文字色を変更する
3.文字色
ここで強調したい文章の文字色を変更できます。
もし、変更したくない場合は消去してください。色に関してはこちらをご覧ください。【ミニカスタマイズ】文字色を変更する
4.囲み枠の線のスタイル
ここで囲み枠の線のスタイルを指定できます。
このタグの、
・『1px』では、線の太さを指定します。数字を変えると線の太さが変わります。
・『solid』では、線のスタイルを指定します。ここでは実線を指定しています。
『dotted』と書くと破線、『dashed』と書くと点線に変わります。
・『#b0c4de』では、線の色を指定しています。
色に関しては、色の変更方法の記事を参照してください。
もし、線がいらない場合は、
『border:none;』
と変更しておいてください。
※これを残しておけば、後々に線のスタイルを指定したい場合に簡単に付けられますので。
5.枠と文字の間隔
ここで枠と文字との間隔を指定できます。
『padding: 5px 8px;』の
・5pxと記述した部分は、上下の間隔。
・8pxと記述した部分は、左右の間隔。
6.以下を記事を書く際の【HTMLタグを表示】にて記述
これのタグを記事を書く際に【HTMLタグを表示】にて記述してあげれば、
何回でも指定できます。
『<p class="a">ここに強調したい文章を記入します</p>』
『a』と記述した部分はスタイル毎に変更できます。
たとえば、
強調したい文章
これは、【CSS編集画面】にて、
.blue {
background-color:#1D4670;
color:#ffffff;
border:1px #b0c4de solid;
padding: 5px 8px;
}
と、このタグを追加して、
【HTMLタグを表示】から、
<p class="blue">強調したい文章</p>
と記述したのです。
『a』部分を覚えやすいものに変えておいた方が良いと思います。
ちょっと一手間をかけるだけで視認性が良い強調が出来るのです。
ぜひお試しください。
<< 関連記事 >>サイドバーのリンクにリストマークをつけて分かりやすくするカスタマイズサイドバーのメニュータイトル部分と枠線を付けるカスタマイズサイドバーのリストを見やすくするカスタマイズアメブロヘッダー画像の変更方法