ビジネス対策のデザインに…
今回のテーマは、『ビジネス対策』。
相変わらずシンプルなところは同じですが、
ヘッダーのデザインとサイドバーの背景画像をビジネス仕様にしてみました！
でも、「どの辺がビジネス仕様なの。」って思うかと…。
これから数記事に渡って、
どのようなところがビジネス仕様なのかを書いていきます。
今回は、デザインの概要について。
テーマカラー
テーマカラーを以前のデザインと変わらずブルーのグラデーションにし、
ビジネスに必要な信頼感と独自性を表現しています。
【配色の知識】青が表現するイメージとは？
ヘッダー画像に関して
デザインする際に必要不可欠な『方眼紙』を背景画像に使用し、
このアメブロでは「デザインに係わる事を書いているんです。」
という事を表現しています。
さらに、方眼紙に「以前のヘッダー画像はこのようにデザインしていたのです。」
というのを画像で表現していることにより、
「アメブロのデザインもしています。」というのを強調しました。
デザイン配置に関して
見ていただきたい記事へのメニューリンクを右側にまとめて、読みやすくしています。
当アメブロのカラム数は開始当初から２カラム。
右側に記事、左側にサイドバーというのは変わりません。
これをヘッダー部分も統一し、
読んで欲しい文章を左側、クリックして欲しいリンクを右側に配置しています。
また、サイドバーとヘッダーの背景を繋げることにより、
視線を下へ進める『導線』を作り出しています。
読者が読み進める『導線』に関しては次の記事にて紹介します。
当分はこのデザインでいくと思います。
このアメブロを開始して２ヶ月の間でデザインを変えすぎました
読者さまに、このアメブロに愛着をもっていただく為に、
文章を変えたり、メニューリンクの画像を変えたり、ちょっとした変更はあるかと思いますが、
基本的にはこのデザインを採用していきます。
これからも当アメブロをよろしくお願い致します。
アメブロ ヘッダー画像の変更方法
アメブロのヘッダーを変えるだけでも、ブログ自体のデザインがガラッと変化します。
今回はこのアメブロのヘッダー画像の変更方法についてご紹介します。
アメブロのスキンによっては画像ではなく、背景色を指定して表示している場合もありますね。
たとえば、
ブルー
ピーチ
ベーシック
などといった【スタンダード】のシンプルなスキンを使用している方でも、このカスタマイズで変更できます。
と、その前に、準備しておかなければならない重要なものがあります。
それは、ヘッダー用の画像
もちろん自作で作れればいいのですが、
そんな事が出来る人って、たいていアメブロのヘッダーも変更できて、
この記事を読む必要がない人ですからね。
ヘッダー用画像を配布しているサイトがたくさんありますので、
そのサイトからお借りしてくるのが今のところ一番早いですかね。
あとは、当ブログでも配布させていただく予定なのです。（現在は、ブログの更新＆カスタマイズで手一杯でしてそこまで出来ていません
）それまでは、このアメブロで無料配布しているヘッダー画像をご利用ください。
ブログのヘッダー画像素材を無料配布
では、
あなたのアメブロデザインを
ガラっと変身させる
アメブロヘッダーカスタマイズ
CSS編集画面でタグを追加する方法
はこちらです。
『追加するタグ』はこちらから。
↓↓↓この下から↓↓↓
/*ヘッダー画像*/
#header {
background-image:url(画像URLを入力してください);
background-repeat:no-repeat;
}
#header{
display: block;
position: relative;
top: 0;
left: 0;
width: 900px; /*ヘッダー用画像の幅*/
height: 350px; /*ヘッダー用画像の高さ*/
}
#header h1, #header h2 {
width: 900px; /*ヘッダー用画像の幅と同じサイズを指定*/
text-align: center; /*ブログタイトルと説明文の位置*/
}
#header h1 {
font-size: 30px; /*ブログタイトルの文字サイズ変更*/
color: #000000; /*ブログタイトルの文字色変更*/
font-weight: bold;
}
#header h2 {
font-size: 15px; /*ブログ説明文の文字サイズ変更*/
color: #000000; /*ブログ説明文の文字色変更*/
font-weight: normal;
}
/*ヘッダー画像・ここまで*/
↑↑↑この上まで↑↑↑
赤文字の部分は、画像のサイズと同じにしてください。
青文字の部分は、あなたの好みに変更してください。
赤文字・青文字の部分の変更方法文字サイズを変更する
文字色を変更する
文字の太さを指定する
何かご質問がありましたら、お気軽にコメントください。
【ミニカスタマイズ】読みやすいフォントを指定する
おもしろい記事を読みたいから。
でも、せっかくきれいなデザインのアメブロにしても、
読みづらい記事だと敬遠しがちではないですか？
そこで、
今回はフォントを指定して読みやすい記事にするカスタマイズです。
その前に『フォント』とは？
文字をPCを使って表示したり印刷したりする際の文字の形の事です。
書体とも呼ばれます。
フォントには、明朝体やゴシック体など数え切れないくらいの種類があります。
その中でも一般的なフォントの一部をここでご紹介します。
【ＭＳ Ｐ明朝,ＭＳ 明朝】
これは明朝体を指定しています。
【ＭＳ Ｐゴシック,ＭＳ ゴシック】
これはゴシック体を指定しています。
【メイリオ】
これはメイリオを指定しています。
【Verdana】
this is verdana
【Arial】
this is Arial
【Times New Roman】
this is Times New Roman
【Helvetica】
this is Helvetica
【sans-serif】
this is sans-serif
【Tahoma】
this is Tahoma
あなたのPC環境によってうまく表示されない場合があります。
あなたは、どのフォントが読みやすいフォントだと思いましたか？
WindowsでもMacでも、
『メイリオ』が読みやすいフォントとして有名
メイリオは、画面上で文字表示のガタガタさを軽減させて、
滑らかで美しい表示ができるフォントなのです。
ここでは、Windows用をご紹介しましたが、
Macでは、適用できないものも一部あります。
Macでは『osaka』や『ヒラギノ角ゴ Pro W3』、『メイリオ』が読みやすいとして有名です。
では、
読みやすいフォントにするカスタマイズ
以下のタグを【CSS編集画面】に追加します。
CSS編集画面でタグを追加する方法
はこちらです。『追加するタグ』はこちらから。
↓↓↓この下から↓↓↓
/*フォント指定*/
body{
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
}
/*フォント指定・ここまで*/
↑↑↑この上まで↑↑↑
これは、当ブログの設定です。
上記のようにたくさんのフォントを指定する理由として、
読者のPC環境によって、表示が変わってしまうからなのです。
たとえば、
・あなたのPCがwindows。
・当ブログが『メイリオ』だけを指定。
と、この場合は、
当ブログをWindows Vista以降のOSでご覧になっている方や、
Vista以外でもメイリオをPCにインストールされている方には
メイリオフォントで読んで頂けていると思います。
それ以外の、windows XPなどで見ていて、メイリオをインストールしていないPCの場合は、
そのPCが標準で指定しているフォントで表示されるのです。
なので、『数打てば当たる』精神（笑）で、当ブログでは６つのフォントを指定しています。
ちなみに、フォントが適用される順番は先に指定しているフォントからになります。
上記のタグの指定では、『ヒラギノ角ゴ Pro W3』から。
しかし、『メイリオ』が読みやすいフォントとお伝えしておきながら、
一番最初に指定していない理由は……
…内緒です
あ！あと、上記の『フォントの見本』のように部分的にフォントを指定する方法もあります。
<font face="ＭＳ Ｐ明朝">このようにフォントを部分的に変えられます。</font>
これを記事を書く際に【HTMLタグを表示する】にて記述すればその部分が指定されます。
<< 関連記事 >>
【ミニカスタマイズ】文字サイズを変更する
【ミニカスタマイズ】文字を装飾する
【ミニカスタマイズ】文字色を変更する
【ミニカスタマイズ】文字の太さを指定する