長い文章を強調して視認性を上げるカスタマイズ方法
読者の視認性を上げるカスタマイズ方法を紹介します。
まず、こちらをご覧ください（※戻ってきてくださいね）。
このブログの目次【サイトマップ】上記のリンクをクリックすると、当アメブロのサイトマップページに行きます。
その中に、
あなたのアメブロをカスタマイズするその前に
このブログに始めて訪れた方、アメブロカスタマイズをした事ない方はこちらから。
アメブロのスキンで『スウィート』がおすすめである理由や、
そのスキンの変更方法、また、カスタマイズするための手順書があります。
といったような部分が数箇所ありますよね。
これは、【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』部分を覚えやすいものに変えておいた方が良いと思います。
ちょっと一手間をかけるだけで視認性が良い強調が出来るのです。
ぜひお試しください。
<< 関連記事 >>サイドバーのリンクにリストマークをつけて分かりやすくするカスタマイズサイドバーのメニュータイトル部分と枠線を付けるカスタマイズサイドバーのリストを見やすくするカスタマイズアメブロヘッダー画像の変更方法
【デザインの知識】シンプルなデザインの参考サイト
テーマごとにご紹介していきます。
第１回目は、
『シンプルなデザイン』について。
アメブロでシンプルなデザインにすることによって、
・どのような内容のアメブロなのかをはっきり伝えられる。
・記事を読みやすくする。
・画像を引き立たせる。
などの効果があります。
当アメブロでは、ヘッダー画像でさまざまな色を使用しておりますが、
全体的にシンプルなデザインにしております。
これは、
・ヘッダー部分で色によるインパクトを与える。
・しかし、全体的にシンプルなデザインにし、
このアメブロはどのような内容なのかを理解しやすくする。
というのが狙いです。
このようなシンプルなデザインは、
『伝えたいものをはっきりと魅せる』のに適しているのです。
当アメブロを例にご説明すると、
ヘッダーは、デザインにとって重要なポイント！
読者の皆さんが絶対に見るところですからね。
「そこを僕がこのようにデザインしますよ。」
とお伝えしています。
また、
記事部分でしっかりとカスタマイズ方法やデザインに関して濃い内容の記事を書くことにより、
このアメブロは、「あなたのアメブロをカスタマイズするために必要なブログなんです。」
と読者にお伝えしています。
これをはっきり解りやすくお伝えするために、
全体のデザインをシンプルにしているのです。
記事で改行を多く使用し、余白（白い部分）を多くなるようにしたり、
サイドバーの文字間隔を広めにとり、余白（白い部分）を出来るだけ作るようにしています。
この『余白』がシンプルなデザインを構成するにあたってとても重要になってきます。
デザイナーによっては、この余白の広さからデザインの設計を始める人がいるほどですからね。
では、実際に参考サイトを見てみてみましょう。
これから紹介するサイトのデザインは、ヘッダー画像に適しているものばかりです。アメブロ全体のデザインに参考になるものではなかったりしますのでご注意ください。
画像をクリックすると参考サイトを実際に確認できます。
大きな画像を使用したシンプルなデザイン
画像を構成している色によってはシンプルなデザインにすることもできます。
上記のサイトは白壁とダークブラウンの床とシンプル背景に、
文字を極力使用せず、訪問者に魅せたいものをハッキリと表現出来ています。
シンプルながらも、インパクトのあるデザインですね。
魅せたい商品を引き立たせているデザイン
カラフルなカラーのヘッダーを使用しておりますが、
でも、全体的にシンプルなデザインです。
当アメブロと似たテイストのデザインですね。
全体的に余白のバランスがうまくとれているサイトです。
文字が主役のデザインNO.１
NO.２
上記の２サイトは、文字が主役のデザインになっております。
余白がしっかりとられているので、解りやすい構成になっております。
NO,１では、ページ左側にリンクが縦に並べられていて視認性を良くしています。
メニューリンクを設置する際にこのような配置もおもしろいですね。
NO.２では、大きな背景画像に文字をのせ、それを中央に表示し視認性を良くしています。
アメブロの内容を解りやすく文章で紹介したい際に使えるデザインです。
アメブロにも使えるシンプルなデザイン
上記のサイトのデザインは、そのままアメブロにもそのまま使用できるデザイン構成です。
ブログタイトルの下にメニューリンクが横に並び、
その下に大きめにサイト内容を表現する画像を表示しているので、
サイト構成は、当アメブロに似ております。
大きな画像を使用しておりますが、その他はシンプルなデザインにしてあり、
また、余白の使い方が良いので、スッキリした印象を受けるサイトですね。
画像の上に表示したフレーズ「コダワリ自転車とモロモロあります」も、
長々としたフレーズですとちょっとゴチャゴチャした感がありますが、
短文でサイトを表現しているので、シンプル感を感じ、
また、解りやすいフレーズになっております。
僕も当アメブロのデザインをする際に参考にしたいサイトです。
と、シンプルなサイトを５つ紹介しました。
アメブロのヘッダー部分で表現するには参考になると思います。
何か特定の商品をハッキリと紹介したいと思っている方は、
これらのようなデザインがおすすめです。
<< 関連記事 >>
【配色の知識】赤が表現するイメージとは？
【配色の知識】青が表現するイメージとは？
【配色の知識】緑が表現するイメージとは？
【配色の知識】黒が表現するイメージとは？
【配色の知識】黒が表現するイメージとは？
以下のような印象を与えたいアメブロにピッタリです。
・高級感
・特別感
・スタイリッシュ感
ただ、アメブロのように、
文章を読んでもらうブログなどの記事部分の背景を黒にしてしまうと
読みづらくなってしまうので、気をつけたいところです。
ヘッダー背景色や、ブログ全体の背景色を黒にし、
記事部分を白系統の色にすると記事部分が強調され、
読みやすくなります。
このアメブロのように
ＯＬが副業-複数の収入源をもちませんか？
のtakakoさんのアメブロ黒を使用したサイト紹介
画像をクリックすると参考サイトを直接確認できます。白と黒のツートーンカラーでシンプルなスマートさを表現
タイトル部分とメニューリンクは黒背景にし、
メッセージ部分を白背景にすることにより、
伝えたい事をハッキリ表現することができます。
シンプルでスマートさを出す色の組み合わせです。
特別感を表現する
黒地に切り抜き画像をのせると、その画像を特別なものに魅せる効果があります。
たくさんの画像を並べても特別感は出ますが、
上記のサイトのように、画像の数を少なくすることにより、
スペシャルなイメージを表現できます。
「自慢の商品を魅せたい。」という時にこのデザインにすることをお勧めします。
黒でもポップなイメージを表現する
シックなイメージを表現する黒ですが、
明るい色（たとえば、赤やオレンジ、黄色、ピンクなど・・・）と合わせると
ポップなイメージを表現することができます。
また、上記のサイトのように、
黒背景に、ポイントで黄色を使用することにより、
そこに視線を集められるようになります。
上記のサイトの中で一番目立つ場所は中央の画像ですが、
その下に黄色地があるのでより視線を集められるのです。
アメブロの場合、
黒背景のヘッダーにメニューリンクを黄色にすると効果があります。
番外編
上記サイトのデザイン、おもしろくないですか？
黒背景には、白文字が一番読みやすいです。
と、今回は５サイトを紹介しました。
さきほども申しましたが、
アメブロの記事部分に黒背景を使用すると読みづらくなってしまうので、
ヘッダーなどの一部分で使用することをお勧めします。
<< 関連記事 >>【配色の知識】赤が表現するイメージとは？【配色の知識】青が表現するイメージとは？【配色の知識】緑が表現するイメージとは？