--
--.--

スポンサーサイト

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

2013
01.25

navy_check

Category: テンプレート
【DEMO】
利用にあたって
カスタマイズ○
再配布○
"designed by potar"を消す○

特徴?
3カラム。プラグイン1は左サイドバー、プラグイン2・3は右サイドバーに表示されます。
画像を使っていません。
チェックの模様はCSS3(カスケード・スタイル・シート3)を使って書きました。
CSSで書いているので、拡大しても模様が荒くなりません。
CSSで書いているので、CSSを編集すれば、模様の色を変えられます。

デメリット
SEOは全く考えられていません。
CSS3を使いまくりなので、CSS3に対応していないブラウザでは模様が表示されません。


↑FireFox18での表示例


↑IE8のようなもの(IE9の開発者ツール使ってます)での表示例

カスタマイズ例
◆1.全体の背景の色を変える
スタイルシート編集で、下記の場所を探し、赤字の部分を書き換えます。
#2d3343は紺色を指定しています。ベースになる部分の色です。以下、"#2d3343"になっている部分は全て"#ffa500"に書き換える等、ベースとなる色を揃えるとデザインがまとまるかと思います。
body{
width:100%;
height:100%;
font-family:Verdana, sans-serif, 'Hiragino Kaku Gothic Pro W3', 'ヒラギノ角ゴ Pro W3', Osaka, Arial;
margin:0px;
padding:0px;
text-align:center;
letter-spacing:1px;
font-size:100%;
line-height:1.3em;
color:#222;
background: #2d3343;
}

◆2.フッターの背景の色を変える
スタイルシート編集で、下記の場所を探し、赤字の部分をベースとなる色に書き換えます。
凡ミスでフッター部分の模様のクラスを間違えました。すみません。フッター部分の背景色は、#footerの背景色を変更して下さい。

#footer{
clear:both;
width: 950px;
height: 80px;
color: #fff;
font-size:0.7em;
text-align:left;
line-height:1.5em;
margin:0px 0px 0px 0px;
padding:10px 0px 10px 20px;
background: #2d3343;
position: relative;
overflow: hidden;
}


◆3.ヘッダー・フッター・記事タイトルの模様の色を変える
スタイルシート編集で、下記の場所を探し、赤字の部分を書き換えます。
.wakuは、ヘッダーの模様を囲っています。ベースとなる背景色に書き換えてください。
.waku2は、記事のタイトルの模様を囲っています。ベースとなる背景色に書き換えてください。
.tate1~.tate6はヘッダーとフッター部分のチェック模様の斜めラインです。好きな色に書き換えてください。
.tate7~.tate9は記事タイトル部分のチェック模様の縦ラインです。好きな色に書き換えてください。
.shimaは横線を入れるためのグラデーションを指定しています。"#2d3343"の部分をベースとなる背景色に書き換えてください。(このグラデーションはIE9では表示されません。)

/*-----------ヘッダー・フッター・記事タイトルの模様--------------*/
/*枠*/
.waku {
width: 950px;
height: 120px;
margin: auto;
background-color: #2d3343;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
/*青色線45度*/
.tate1 {
width: 15px;
height: 250px;
background: rgba(55,76,133,0.5);
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
……
/*記事タイトル枠*/
.waku2 {
width: 550px;
height: 30px;
background:#2d3343;
background:rgba(45,51,67,0.9);
border-radius: 3px 3px 0px 0px;
position: relative;
top: 1px;
left: 0px;
overflow: hidden;
}
/*青色線*/
.tate7 {
width: 15px;
height: 50px;
background: rgba(55,76,133,0.5);
position: absolute;
top: 0px;
left: 0px;
}
……
/*横縞グラデーション*/
.shima{
width: 950px;
height: 120px;
margin: 0px;
position:absolute;
top: 0px;
left: 0px;
background: -moz-linear-gradient(top,
#2d3343,
#2d3343 25%,
transparent 25%,
transparent 50%,
#2d3343 50%,
#2d3343 75%,
transparent 75%,
transparent);
…略…


◆模様を画像に差し替える
動かない模様なのに、わざわざCSSで書くのは、ほぼ意味がありません。このテンプレートは、IE9がグラデーション未対応のため、四角い枠を何個も描写してチェック模様にしています。SEO的にもよろしくないかと思います。無難なテンプレートにしたい方は、背景を以下の画像に差し替えてください。もちろんお好きな他の画像に差し替えて頂いても構いません。
ヘッダーとフッター用の画像を、.wakuと#footerに、記事タイトル用の画像を.waku2に指定すれば良い、はずです。
ちなみに、この画像はただのスクリーンショットです。この画像は加工・再配布しても構いません。

ヘッダーとフッターの背景画像


記事タイトルの背景画像


スポンサーサイト

Comment:0  Trackback:0
トラックバックURL
http://potar.blog.fc2.com/tb.php/13-8d41a5f7
トラックバック
コメント
管理者にだけ表示を許可する
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。