はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

当ブログのテンプレートをカスタマイズ!背景画像の変更

2007/12/30 Sun [Edit]

背景 でも変えてみませんか? 敬具

月日の経つのは早いもので、あと2日で2007年もサヨナラです。気の早い人なんかはそろそろカウントダウンし始めているのではないでしょうか?

それはそうと、今回は前回の記事を踏襲し、当ブログで配布中のテンプレートをお使いの方にカスタマイズに挑戦して頂こうと思いたち記事にしました。

どんなカスタマイズかと言うと、背景を変更するだけです。

しかも、先述しましたが当ブログテンプレートをお使いの方を対象に解説しますので、ほとんどの方達にスルーされる内容だと思います。

また、テンプレートも上の画像にある「hajime001-green」「hajime002-pink」「hajime003-lblue」「hajime005-orange」が対象テンプレートです。

でも、もしかしたらお役に立つことも記事中に少しは含まれているかも知れませんので、対象者ではなくても、既にカウントダウンされている方などいましたら、元旦の1分前ぐらいからで丁度良いと思いますので、お読み頂けたらと思います。

何故、今回のカスタマイズにテンプレートの対象者があるかと言いますと、上記した4つのテンプレートには、大元の div タグの背景にドロップシャドウの画像を使っています。

もし、上記したテンプレートで body の背景色を白以外に変更しようとすると、div の背景に設定してあるドロップシャドウの画像が邪魔をするはずです。

これは私の嫌がらせではなく、ドロップシャドウの画像が gif ファイルだからです。

しかしこの gif をアルファチャンネル(透過)を使える png に変更し、前回の記事で紹介した JavaScript を併用すると、背景を何色にしても美しいドロップシャドウを保てます。勿論、背景に画像も使えますし、また、当ブログが対象としているブラウザ全てで確認済みです。

そんな訳で、テンプレートの対象者がある理由は、後述する png の画像が対象テンプレートしか大きさが合わないからです。もしも、ご自身でドロップシャドウの png 画像を用意できれば、対象テンプレートではなくても挑戦できる簡単なカスタマイズです。

それでは説明に入ります。

まず下のドロップシャドウの png 画像とユンサンさんが作った JavaScript(iepngfix.js)をローカルにダウンロードします。
※右クリックでリンク先を保存してください。

  1. ドロップシャドウの画像
  2. iepngfix.js

続いて、管理画面からダウンロードしたファイルを2つともアップロードします。

アップロードが済みましたら、CSS の編集をします。スタイルシートの編集画面から117行目くらいにある div#container セレクタを見つけます。
※カスタマイズする前にテンプレートをバックアップ(複製)しておくと安心です。

そのセレクタの background プロパティの値(URL)を先ほどアップロードした png 画像の URL に変更します。

div#container {
	width : 780px;
	margin-left : auto;
	margin-right : auto;
	background : url("http://★★★/bg_780x10.png") top center repeat-y;/* 画像780x10 */
}

更に、IE6 だけにCSS 内で JavaScript を使用する為、スターハック( *html )を使いセレクタを追加します。下のソースコードを全てコピーし、先ほどのセレクタの下にペーストしてください。

*html div#container { behavior: expression(IEPNGFIX.fix(this)); }

ペーストする際は、他のソースを消さないようご注意ください。

次に HTML の編集をします。

HTML ソースの上の方にある </head> タグの上に下のソースをコピー&ペーストします。

<script type="text/javascript" charset="EUC-JP" src="iepngfix.js"></script>

ペーストが済みましたら、上のソースの赤い部分をアップロードした JavaScript のパス(URL)と置換します。つまりこのソースでアップロードした JavaScript を HTML の head 内で読込むと言う訳です。

以上で今回のカスタマイズの準備は整いました。後は、好きな背景画像や色変更を楽しんでください。

どこで背景画像や色変更して良いのか分からない方いますか?

そんな方のために一応説明させて頂くと、「スタイルシート編集」の上の方に body セレクタが見つかると思います。その中の background-color で背景色を変更できます。

また、背景画像を使いたい場合は、使用したい画像ファイル(jpg か gif か png)をアップロードし、body セレクタの中に下のプロパティを追加してください。

background : url("画像ファイルのパス") left top repeat #fff;

画像ファイルのパスには使用したい画像ファイルのパス(URL)が入ります。

上の background プロパティは背景に関係する指定をまとめて行うためのプロパティですので、background-color は body セレクタから削除してください。

最後に、背景画像を探したい方にお薦めサイトを2つ紹介して、今回のカスタマイズを終わります。

Stripe Generator はストライプの画像をインターネット上で簡単に作成し共有できるサイトです。他の方が作った画像も使えるので英語サイトですが、お気に入りの背景画像を探してみてはいかがでしょうか?

Tartan Designer も上のサイトと同じようなサイトです。格子柄(タータンチェック)をダウンロードできます。

以上で今回のカスタマイズは終了ですが、ご質問などありましたらお気軽にどうぞ。

Prev
祝!4つ目の FC2 ブログテンプレート完成!
Top
はじめてのブログデザイン
Next
透過 PNG を IE6 で背景としても使える JavaScript

Comments

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。