--
--.--

スポンサーサイト

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

2013
01.25

sky1680

Category: テンプレート
【DEMO】
利用にあたって
カスタマイズ○
HTML、CSSの再配布○
"designed by potar"を消す○
スクロールスクリプトの再配布×
画像の再配布×
※背景画像はBEIZ Graphicsさんからお借りしたものです。

特徴?
最低限の表示でちまちましたかった。
プラグイン非対応。
記事部分だけをスクロールして記事を読みます。
スクロールバーが浮かないように、デザインを変えてみました。

デメリット
右サイドバーが長くなると、レイアウトが崩れます。
記事部分のスクロールにJavaScriptを使用しています。JavaScriptがOFFになっていると記事をスクロールできません。


↑JavaScriptを無効にして閲覧するとこうなります。

カスタマイズ例
◆右上のリンクを減らす・足す
HTML編集から、下記の部分を探し、赤色・黄色の部分を変更します。この部分を削除してもレイアウトには影響ありません。
< !-- バナー -->
< div id="banner">
< div class="syndicate">
< a href="<%url>archives.html?all" title="すべての記事"> archives< /a>   
< a href="<%url>?xml" title="最近の記事のRSS">RSS»< /a>   
< a href="<%url>?xml&comment" title="最近のコメントのRSS"> comment< /a>   
< a href="<%url>?xml&trackback" title="最近のトラックバックのRSS"> trackback< /a>   
< a href="<%url>?admin" title="管理者ページ"> *admin< /a>
< /div>


◆カレンダーを消す・プロフィールを消す
HTML編集から下記の部分を探し、赤字の部分を削除します。カレンダーが削除されます。
プロフィールも同じように、<!-- プロフィール -->~<!-- プロフィール END -->で囲まれ場部分を削除すると、プロフィールが削除されます。この2ヶ所を消しても、レイアウトは大きくは崩れません。
<!--カレンダー-->
<div class="line_calendar">
<a href="<%prev_month_link>"><%prev_year> <%prev_month></a>

<!--calender2-->
<span class="line_cal_day"><<%days></span>
<!--/calender2-->

<a href="<%next_month_link>"><%next_year> <%next_month></a>
</div>
<!--カレンダーEND-->



◆右サイドのカテゴリーを消す・リンクを消す
HTML編集から下記の部分を探し、赤色・黄色になっている部分を削除します。
<!-- サイドバー -->
<div id="links">
<!-- カテゴリ -->
<div class="sidetitle">カテゴリー</div>
<div class="side">
<ul>
<!--category-->
<li>
<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
</li>
<!--/category-->
</ul>
</div><!-- .side END -->
<!-- カテゴリ END -->

<!-- リンク -->
<div class="sidetitle">リンク</div>
<div class="side">
<ul>
<!--link-->
<li>
<a href="<%link_url>" title="<%link_name>"><%link_name></a>
</li>
<!--/link-->>
</ul>
</div><!-- .side END -->
<!-- リンク END -->



◆右サイドに項目を追加する
HTML編集で下記の部分を探し、赤色の部分を削除します。黄色の部分は、それぞれ、項目のタイトル、項目の内容に書き換えます。複数の項目を足したい時は、コピペして下さい。
<!--■■右サイドにメニュー等を足したい時は、この行を消して下さい■■
<div class="sidetitle">項目のタイトル</div>
<div class="side">
項目の内容
</div>
■■右サイドにメニュー等を足したい時は、この行を消して下さい■■-->


◆記事部分の表示サイズを変える
スタイルシート編集から、下記の部分を探し、赤字の数字を変更します。
#scrollbar1のwidthの数値>#scrollbar1 .viewportのwidthの数値>.blogのwidthの数値になるように調節すると良いです。
/*------------------スクロールバー -----------------*/
#scrollbar1 { width: 600px; clear: both; margin: 10px 0px 0px 10px;}
#scrollbar1 .viewport {
background: rgba(255,255,255,0.3); width: 585px; height: 400px; overflow: hidden; position: relative; }

/*---------------------記事表示部----------------------*/
#content{
position:relative;
margin: 0px;
padding: 0px 10px 5px 0px;
float: left;
}
/* 記事全体 */
.blog{
padding:0px;
width: 580px;
}


記事部分の表示サイズを変更するとレイアウトが崩れるので、サイドバーも適宜調節して下さい。
/*---------------------サイドバー----------------------*/
#links{
width:290px;
margin: 10px 10px 0px 20px;
padding:0px 0px 20px;
float: left;

}

スポンサーサイト
Comment:4  Trackback:0
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
back-to-top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。