webdesignkeys

CSSやjavascriptなどを利用した動的なサイト作りやwebデザインに関するネタを紹介!

Subscribe by RSS RSS Icon
Follow me Twitter Twitter Icon
 
 

スポンサーサイト

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

Comment

これは楽しみw
サイトを拝見させていただきましたが、
「これって本当にFC2ブログ?」ってくらいカッコよかったです(* >ω<)

2010.04.03 | URL | sora #- [ edit ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2010.04.30 | | # [ edit ]

コメントの投稿













管理者にだけ表示を許可する
 

FC2ブログ用 共有テンプレート作成 project_06

p06_top.png

FC2ブログへテンプレートを投稿しました!! 今回のテンプレートは、夕焼け画像を背景にした透明感のあるデザインです。
■仕様

XHTML 1.0 Transitional 非準拠
2カラム(エントリ-左 プラグイン-右)
FC2プラグイン 1、2に対応
ナビゲーション(HOMEとRSS以外は各自で設定してください)
背景画像(921px × 221px)
メインコンテナー(760px)
エントリーエリア(530px)
プラグインエリア(220px)


■カスタマイズ可能なテンプレート


今回作成したテンプレートですが、ダウンロードしてくださったブロガー様の個性を尊重するために、背景画像を変更しても全体的なデザインが崩れないように作成しています。画像編集ソフトでトリミングが可能であれば、簡単に変更を加えることが可能です。一方で、背景画像から黒へのフェードアウトを表現するために、透過PNGを用いており、残念ながらIE6での表示ができませんので予めご了承ください。*編集で対応させることも可能

■背景画像の変更例(クリックで拡大画像が見られます)

・デフォルトテンプレート
p06_sample_04.png

・ビーチ夕焼け
p06_sample_00.png

・木漏れ日
p06_sample_01.png

・ブリッジ
p06_sample_02.png

・ロード
p06_sample_03.png

どれもかっこよく仕上がりました!画像を変えるとかなり印象が違いますね


■カスタマイズ方法


環境設定のテンプレートの設定を選択し、スタイルシートの編集画面から以下の記述を探してさい。

#top_banner{

margin:0 auto;
width:921px;
height:221px;
background: url("http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/p06_top_banner.jpg") no-repeat;

}

この記述のbackground :url("") no-repeat;のダブルクォーテーションに囲まれるアドレスがトップ画像へのアドレスになります。お好きな画像で結構ですが、サイズは、幅が921pxで高さを221pxとしてください。
前後数pxくらいならばデザインに支障はありません



■作りおわって


IE6には非対応だけど、結構クールに仕上がったと思います。
ブログテンプレートでは、プラグインとかの関係で、作成時にW3Cに準拠していても、個々に適応したとき非準拠になりやすいので、考えないことにします。
今後はHTML5やCSS3を取り入れたりして格好いいテンプレートを作ろうかなと思う。
画像処理がへたっぴなので一生懸命勉強中
テンプレートについてですが、液晶によっては、全体的に暗かったりするみたいなので、トップには明るめの画像を入れるといいかもしれません!

ダウンロードしてくださった人ありがとうございました!

Comment

これは楽しみw
サイトを拝見させていただきましたが、
「これって本当にFC2ブログ?」ってくらいカッコよかったです(* >ω<)

2010.04.03 | URL | sora #- [ edit ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2010.04.30 | | # [ edit ]

コメントの投稿













管理者にだけ表示を許可する
 
<< PREV | HOME | NEXT >>

FC2 template
fc2_template_question.jpg

Category

NEWS
 

Comment

Archives

Favorite
125x125 banner 1
125x125 banner 2
125x125 banner 3
125x125 banner 4

Object
CoRich word of mouth information
Web service is developed through word of mouth information. ⇒CoRich
web design keys fc2 blog ranking!!
It challenges the ranking on my site. Please click this links. ⇒FC2 Blog Ranking
Proin magna amet fermentum dignissim
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra erat leo in elit.
Fusce pulvinar euismod urna vel viverra
Quisque malesuada laoreet tellus vel iaculis. Morbi nulla leo euismod pulvinar erat.
Class aptent taciti sociosqu ad litora
Curabitur vestibulum est eu purus bibendum eu eleifend diam tempor. Fusce metus eros, faucibus ut hendrerit ac.

Links

 
 
 
 
 
 
Copyright Info.

Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Read More

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