背景とデザイン:素っ気ない白ベースのデザインから脱却だ ･･･ 【デザインカスタマイズ】

　※この原稿は、以前のブログから移植されたもので
　　内容が、今のブログにそぐわないものもございます。


　ずっと、「白ベース」のままだったので、デザインを考える。
　ただし、今回は
　・テンプレートを大きくカスタマイズする　というものではなく

　全体的な基本のデザインカスタマイズに終始した。

【目標・目的】
******************************

【実行】
******************************

◆１：背景の写真
++++++++++++++++++++++++++++++
　・前から海外のサイトで
　　超高品質の画像を無料でダウンロードさせてくれる
　　サイトをいくつか知っていた。

　　その中のひとつ
◆InterfaceLIFT: Wallpaper sorted by Date
　・一応このサイトは
　壁紙(Wallpaper)用の画像の
　無料配布サイトなのだが、
　壁紙というくらいなので、
　大きな高品質の画像が
　たくさん用意されている。


　ほんと、驚くほど高画質で
　センスのいい写真がずらっと並ぶ。

　サイズは
　（背景全面に敷くつもりなので　1600×1200　で探した。

　これが落とした画像だ。

　※この上部の「空」の部分を利用したかった。

　※この上部の「空」の部分を利用したかった。

　■ダウンロード後、（最初はbitmapなので）
　　jpgファイルに変換して、
　　ブログの管理画面からアップロード
　　※本当は、自身のサイトでFTPアクセスできるから
　　　それでもいいのだけれど、
　　　・ブログの利用方法を習得しているわけだから・・・

　■bodyタグへの指定
　　まず、スタイルシートで
　　body タグに画像を背景で利用するよう記述

background: url(画像のURL) no-repeat 0 0 #fff;

background-attachment:fixed;

◆２：各ブロックを少し透かす
++++++++++++++++++++++++++++++

　■次に現在利用しているテンプレートの
　　主要な４つのブロック
　　・ヘッダー
　　・中央メインエリア
　　・サイドバー(左右）
　　・フッター
　　それぞれに

background:#fff;

opacity: 0.9;filter:alpha(opacity=70);zoom:1;

◆３：ヘッダーはさらに別の背景画像
++++++++++++++++++++++++++++++
　※私がメインブログ「創るmetaboy」で利用している
　　デザインに近づけることにした

background-image : url(画像のURL);

ところが、このままでは妙におかしい

・左右のサイドバーが情報が少ないため
　下まで、背景が延びず
　途中で切れてしまうのだ。

◆４：サイドバー左右の長さを揃える
++++++++++++++++++++++++++++++
　※これを可能にしてくれたのが
　　メインブログ「創るmetaboy」でも紹介した
◆ハムさんのプラグイン「jQuery SameHeight Plugin」
　・簡単に、揃えてくれる
　jQuery.js が必須だが
　競っては驚くほど簡単


　高さを揃えたいボックスを指定のクラス
　で囲むだけだ・・・

<div class="sameHeight">

	<div id="alpha"></div>

	<div id="beta"></div>

	<div id="gamma"></div>

</div>

　すると、こうなる
　▼

　ＯＫ！

◆５：リンク廻り
++++++++++++++++++++++++++++++
　リンク部分を標準の青色ベースにして
　マウスオーバーの際
　（最近よく利用している、「ちょこっ」と右下に下がる
　アクションを加えた

a:hover{

	text-decoration: none;

	position:relative;

	top:1px;

	left:1px;

	color: #003DAF;

}

よし、今日はここまででいいか・・・
記録しておこう。

【2008/11/27 の 創るブログ】
******************************