--
--.--

スポンサーサイト

上記の広告は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
back-to-top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。