--
--.--

スポンサーサイト

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

2013
01.31

stamp

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

特徴?
画像はスライスせずにCSSで無理矢理位置を調節しました。画像の差し替えは、しやすいかもしれません。
JavaScriptを利用した、ページの先頭へ戻るボタンを付けてみました。

デメリット
画像サイズが大きめかもしれません。(全部で140KB程度)
エントリーに投稿年が表示されません。

カスタマイズ例
◆ブログタイトルとURLの位置・文字サイズ調節する
1.文字サイズを調節する
スタイルシートの編集から下記の部分を探し、赤字の部分を書き換えます。
.side_blog_nameとh1が入れ子になっているので、.side_blog_nameでブログタイトル+URL全体の調節をした後、h1であるブログタイトルを調節します。
h1は緑色の部分を削って太字にしても良いかもしれません。

2.文字の位置を調節する
黄色の部分を調節します。
.side_blog_nameの位置は、切手風画像の位置が基準になっているので、"top: -137px;"とマイナスの数字になっています。5pxずつ動かす等、様子を見ながら調節してみてください。分かりにくくて済みません。

スタイルシート
/*------------------サイドバー装飾--------------------*/



/* ブログタイトルとURL */
.side_blog_name {
   color: #1a270d;
   position: relative;
   font-size: 12px;
   top: -137px;
   left: 35px;
   transform: rotate(-10deg);
   -moz-transform: rotate(-10deg);
   -webkit-transform: rotate(-10deg);
   -ms-transform: rotate(-10deg);
   -o-transform: rotate(-10deg);
   letter-spacing:0px;
}
h1 {font-size: 15px; font-weight: normal;}
.side_blog_name a{color:#1a270d;}
.side_blog_name a:link{color:#1a270d;}
.side_blog_name a:visited{color:#1a270d;}
.side_blog_name a:hover{color:#222;}

※HTMLはこうなっています
<div class="side_blog_name"><h1>ブログ名</h1>ブログURL</div>


◆切手風画像を差し替える
293px*239pxの透過PNGを使っています。HTML編集から下記の部分を探し、赤色の部分を使いたい画像のURLに差し替えます。必要があれば黄色の部分のalt属性も変更して下さい。


<!-- サイドバー -->
<div id="side2">
<div class="header_line"><img src="http://blog-imgs-55.fc2.com/p/o/t/potar/stamp-line.jpg" alt="line" /></div>
<div class="stamp">
<img src="http://blog-imgs-55.fc2.com/p/o/t/potar/stamp_img.png" alt="stamp" />
<div class="side_blog_name"><a href="./" accesskey="1"><h1><%blog_name></h1></a>
<a href="./" accesskey="1"><%url></a></div><!--.side_blog_nameEND-->
</div><!--.stampEND-->


◆ブログタイトルとURLの傾きを変える
スタイルシート編集から以下の部分を探し、赤色の部分を書き換えます。全て削除すると文字が傾かなくなります。
記述の仕方については、「CSS3 transform rotate」等で検索してみてください。傾きを変えるだけなら、(-10deg)の-10の数字を変えればOKです。
"-moz-","-webkit-","-ms-","-o-"はベンダープレフィックスというものです。まだ書いておいた方が無難そうなので、書いておきました。頑張って5ヶ所直して下さい!
/* ブログタイトルとURL */
.side_blog_name {
color: #1a270d;
position: relative;
font-size: 13px;
top: -137px;
left: 40px;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);

letter-spacing:0px;
}


◆記事中の画像の右側が切れないようにする・記事の幅を変える(説明しません)
記事の幅の変え方については、背景に下のような画像を使っていて背景画像自体を加工しないといけないのと、四隅の角丸を表示するのに空のdivとCSSを使っていて、ぐちゃぐちゃソースなので説明しません。ごめんなさい。

背景画像

大きめの画像などを貼り付けた場合に、画像右側が切れてしまうのは仕様です。画像がサイドバー側にはみ出ても構わないなら、スタイルシートの編集で赤字の部分を削除すれば、画像全体を表示させることが出来ます。
/* 記事本文 */
.main{
font-size:0.8em;
margin:0px 0px 10px 0px;
padding:0px 0px 0px 5px;
overflow: hidden;
}


スポンサーサイト
Comment:9  Trackback:0
2013
01.30

wood1680

Category: テンプレート
【DEMO】
利用にあたって
カスタマイズ○
HTML、CSSの再配布○
"designed by potar"を消す○
スクロールスクリプトの再配布×
画像の再配布×

特徴?
小さい表示領域でちまちましたかった。昔風に800*600です。
プラグイン領域もスクロールさせることで、無理矢理おさめました。
スクロールバーが浮かないように、デザインを変えました。

デメリット
JavaScriptを無効にしていると、記事部分・サイドバー部分をスクロールできません。

カスタマイズ例
◆背景画像をかえる
スタイルシート編集から下記の部分を探し、赤色の部分を使用する背景画像のURLに書き換えます。
必要であれば、黄色の部分で指定している画像の繰り返し・画像の位置も書き換えます。
このテンプレートで使われている画像は、背景の木目写真1枚だけです。他の部分の画像置き換えは必要ありません。文字色等は適宜変更して下さい。
/*-------------------ページ全体--------------------*/
body{
width: 100%;
max-height: 100%;
font-family: Verdana,'Meiryo UI','メイリオ','Hiragino Kaku Gothic Pro W3', 'ヒラギノ角ゴ Pro W3',Osaka,sans-serif;
margin:0px;
padding:0px;
text-align:center;
letter-spacing:1px;
font-size:100%;
line-height:1.3em;
background: url("http://blog-imgs-55.fc2.com/p/o/t/potar/wood1680.jpg") repeat-y center top;
color: #300;
}

Comment:0  Trackback:0
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
2013
01.24

dt16_css3heart

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

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

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


↑FireFox18での表示例


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

カスタマイズ例
◆ハートの色を変える
スタイルシート編集で、下記のような部分を探し、赤字になっている所を書き換えます。
"rgba()"はRGBカラーモデルのred・green・blueに、alphaが加わったものです。alphaは色の透明度を表します。#ffffffのような16進数表記で書きなおしても問題ありません。ただし、透き通った色にはなりません。
下記の例の他に、/* ハート小(桃)*//* ハート小(白) *//* ハート大(赤) *//* ハート大(桃) *//* ハート大(白) */の5ヶ所があるはずなので、そこも書き換えてください。

/* ハート小(赤) */
.heart1 {
position: relative;
width: 50px;
height: 45px;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
}
.heart1:before,
.heart1:after {
position: absolute;
content: "";
left: 25px;
top: 0;
width: 25px;
height: 40px;
background: rgba(254,67,101,0.8);
-moz-border-radius: 25px 25px 0 0;
border-radius: 25px 25px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart1:after {
left: 0;
background: rgba(254,67,101,0.8);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}



◆楕円(ハートの下のピンク色の大きな模様)の色を変える
スタイルシート編集で、下記の場所を探し、色を書き換えます。
大きな楕円を3つ書いてから、位置を左上にずらして模様にしています。ブラウザに表示されるのは、楕円全体のうち、右下の1/4程度です。
グラデーションを使っています。地道に書き換えるのは大変なので、「css3 gradient generator」等で検索して、ジェネレーターを使ってコピペしたほうが早いかもしれません。
/*下の楕円*/
.line_cut {
width: 1500px;
height: 380px;
border-radius: 50%;
background: rgba(252,157,154,0.8);
background-image: linear-gradient(bottom, rgb(251,109,104) 0%, rgb(247,185,172) 45%, rgb(255,255,255) 100%);
background-image: -o-linear-gradient(bottom, rgb(251,109,104) 0%, rgb(247,185,172) 45%, rgb(255,255,255) 100%);
background-image: -moz-linear-gradient(bottom, rgb(251,109,104) 0%, rgb(247,185,172) 45%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(251,109,104) 0%, rgb(247,185,172) 45%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient(bottom, rgb(251,109,104) 0%, rgb(247,185,172) 45%, rgb(255,255,255) 100%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(251,109,104)),
color-stop(0.45, rgb(247,185,172)),
color-stop(1, rgb(255,255,255))
);

position: relative;
top: -583px;
left: -770px;
}
/* 中の楕円 */
.line_cut {
…略…
/* 上の楕円 */
.line_cut2{
…略…

Comment:0  Trackback:0
2013
01.11

葉っぱ色

Category: 色々
#fffdfc ベースの薄黄色
#ffece3 薄いピンク

#fbd8b5 ピーチ
#f3a68c サーモンピンク

#575c30 カレンダーボーダー
#777e41 モスグリーン
#878f4a 白っぽく
#97a053 更に白っぽく
#a4ad60 更に

#ead7a4 ビスケット
#151105 文字色。殆ど黒の黄色より

Comment:0  Trackback:0
2013
01.03

紺色

Category: 色々   Tags:タグ
#333738 rgba(51,55,56)
#60615c rgba(96,97,92)
#a4abb5 rgba(164,171,181)
#2d3343 rgba(45,51,67)
#374c85 rgba(55,76,133)
#a99177 rgba(169,145,119)
#e0dfdb rgba(224,223,219)

続きを読む
Comment:0  Trackback:1
back-to-top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。