無料ブログのデザインをカスタマイズするポイントはココ!! - 老後に、年金生活にお役立ち情報を提供する「たくさんの副業案内所」

RSSホーム

無料ブログのデザインをカスタマイズするポイントはココ!!

ブログへの訪問者をガッカリさせない様にするには、

やはりデザインも関係してきます。


ブログパーツやコンテンツの配置について

以前にご紹介しましたが、今回デザインの作り方に

ついてご紹介していきます。



何を重点的にカスタマイズすれば良いのかが分かれば

時間も労力も、節約できるはずです。


ブログのデザインで、カスタマイズさせたいのは次の3つです。

1.ヘッダーの変更方法

2.サイドバーの設定方法

3.サイト全体の色の設定



それでは、順に説明していきます。


注意ですが、失敗すると動作しないことにもなりますので

CSSHTMLを変更する場合は、必ず記述されている

プログラム全体をコピーしてバックアップをとっておいてくださいね。

簡単に元へ戻せるようにしておくと、

自由に変更して確認することが可能となります。



1.ヘッダーの変更方法


これは、「ブログパーツ、コンテンツの配置」の

説明でも触れましたが、やはりヘッダー部分はとても大切です。

ページを開いた瞬間に飛び込んでくる

言わばサイトの"顔"に当たりますから

第一印象を決定づけてしまいます。

ですから、ここはしっかりと考えて、作りましょう。

しかし、凝り過ぎるのは禁物です。


1.シンプル

2.単色or2色

3.文字はタイトルとサブキャッチのみ

この3つのポイントを意識して作ります。

ここを極めると、プロっぽいデザインにも

手が届くようになります。


また、ヘッダーには画像が必要ですのでGIMPなどの画像加工ソフトも、

よく使い慣れておくといいです。

シーサーブログブログな場合は、ヘッダー画像をアップロードしておいて

『デザイン設定』のCSSを変更します。


例:「たくさんの副業案内所」の場合

/*ヘッダー外側の画像・背景色・罫線*/
#header {
background:#F5ECCE;
padding-top:12px;
}


/*ヘッダー内側の画像・背景色・罫線
(サイズ:横幅1050px・画像利用で縦幅指定はheight:200px;などを入力のこと)*/
#header-in {
background-image:url(http://aurex.up.seesaa.net/image/seesaa26.jpg);
height:250px;
width:1050px;
}



2.サイドバーの設定方法

ブログには最初から、大きく2種類の

テンプレートがありデザインに分かれています。

それは、"2カラム"と"3カラム"と呼ばれるものです。

2カラムは、本文が書いてあるコンテンツ部分と

左右どちらかのサイドバーがあるデザインで、

3カラムは、コンテンツ部分をはさむように

左右両方にサイドバーがあるデザインです。


そして無料ブログも、このどちらかで作成したはずです。



2カラムと3カラム、それぞれに特色があり

どちらが良いのか、一概には決められません。

表示したい情報が多ければ、3カラムの方が

適していると言えますが、全体の見やすさを

考えると、2カラムの方がスッキリします。


ですので、アフィリエイトブログは3カラムで作る方が

良いと思います。


しかし、じっくり文章を読んでもらいたいような場合は

2カラムのほうが良いでしょう。


2カラムにも、サイドバーを左右どちらに

持ってくるかも迷うところですが、一般的に

サイトの左上が、一番見られやすいと言われますので、

まず本文を見てほしいのなら右サイドバーに、

逆にバナーなど、サイドバーの情報を見てほしいなら

左サイドバーのデザインを選ぶといいでしょう。


そしてこれらのデザインは、先ほどお話した

"CSS"だけで簡単に変更することができます。


しかし、無料ブログの場合はそれぞれたくさんの

サンプルデザインのテンプレートがありますので、

初めにブログを作成するときに2カラムか?3カラムか?を

選んで決定します。

後から全体のデザインを変更し、カスタマイズするには

労力が掛かりますので、2カラムの場合も右サイドバーか?

左サイドバーか?も初めのデザイン選択で決定して

おいたほうが良いでしょう。




3.サイト全体の色の設定

これも無料ブログのテンプレート見ると

様々な色使いのものが作られていますね。

背景色と文字色の組み合わせでサイトの印象は大きく変わります。

ただ、これも凝り過ぎは禁物です。

あくまでも僕達の作るサイトは

訪問者に情報を伝えるためのもの。

ということは、文字が読みやすい配色が必要なのです。

そこで覚えておいていただきたいのが

最も定番とされている配色です。

それは、

・背景=白

・文字=黒

・リンク=青

と、なります。

やはり白い背景に黒い文字が一番

誰にも読みやすい配色ではあります。

そこに変化を持たせるために

赤などを付け加えるのです。


そして大切なのがリンク色。

これは絶対に青にしておきます。

なぜなら、多くのサイトでリンクは青が使われており

青で書かれている文字はクリックできるという

共通の認識みたいなものが、浸透しているのです。


付け加えると、青い文字に下線を入れておけば万全です。

この3色は、原則として覚えておいてください。

無料ブログのテンプレートには、淡い文字色や

リンク色を使っているものもありますが、

そこはマネをしないように注意してください。


特に、ビジネス用のサイトとしては

淡い色使いは厳禁と考えるほうが良いでしょう。

もし、どうしても違う配色にするなら

黒い背景で白い文字という手もあります。

これは上手に使えば、高級感のある配色になりますが

リンク色の青が目立ちにくいという欠点があります。

これも、コンテンツ部分を白い背景に黒い文字に

しておけば、その外側の背景色は自由に選べます。

この辺りの設定も"CSS"で変更できますので

どんな配色がいいかを、試してみてください。

例:「たくさんの副業案内所」の場合、

/*全体の背景色*/
body {
background:#F5ECCE;
}


/*コンテナ部分の背景色*/
#container {
background:#F5ECCE;
border-top:solid 2px #005500;
}
#container-in {
background:#F5ECCE;
}

/*リンク文字色の組み合わせ*/

a:link {
color:#00C;
outline:none;
}

a:visited {
color:#80008b;
outline:none;
}

a:hover {
color:#C00;
outline:none;
position:relative;
top:1px;
left:1px;
}

のようにしています。



さて今日は、ブログのデザインのカスタマイズに

ついてポイントご説明させて頂きましたが、

ご参考頂けたでしょうか?

この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/414857622
この記事へのトラックバック
Copyright © 老後に、年金生活にお役立ち情報を提供する「たくさんの副業案内所」 All Rights Reserved.
当サイトのテキストや画像等すべての転載転用・商用販売を固く禁じます
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。