--
--.--

スポンサーサイト

上記の広告は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
トラックバックURL
http://potar.blog.fc2.com/tb.php/17-4eb91e23
トラックバック
コメント
こんにちは!
テンプレートを使わせていただいています
下に行くと上に行ける機能にもすごく感動しています!

質問なのですが、
(というかお願い?なんといったらいいか分かりませんが…)

切手の中の画像(今、和紙が重なっている画像)だけを変えたいのですが、
したい画像のURLを入れても、切手の枠の部分が見えず、その画像だけ原寸大で表示されてしまうんです

どうしたらいいですか?(説明が下手ですみません) 返信いただけるとうれしいです。
ミドリスdot 2013.03.24 17:41 | 編集
こんにちは。テンプレートを使って下さって、ありがとうございます!

ご質問について。
切手の画像は、透過してあるのは切手の外側の部分だけで、和紙の部分は透過してありません。
和紙の部分と切手の枠は、別々の画像ではなくて、くっついていています。
画像だけで見て頂くと、分かりやすいと思うのですが、このような一つの画像になっています。
http://blog-imgs-55.fc2.com/p/o/t/potar/stamp_img.png
(この記事の説明は少し分かりにくいですね…申し訳ないです。)

なので、和紙部分の柄を変えたい場合は、切手の枠(と周りの透過部分)も含めた画像を直接作って頂かないとダメです。
画像編集については、私の技術が素人以下なのでお答えできません。すみません。
もとの切手画像を加工して頂いても構いませんが、ご覧の通り、出来が良くありません。
最初からご自身で作るか、それが大変なら、著作権的に問題のない画像を探してきて使うのが良いかなーと思います。
potardot 2013.03.24 19:22 | 編集
返信、ありがとうございます(^^)
あ、なるほど 説明をちゃんと読まずに質問してしまい、すみませんでした
自分で作ることにしたのですが、その場合は
URLは書き込めませんよね。どうしたらいいのでしょうか
ファイルを書き込むのですか?

再び質問で本当にすみません。
ミドリスdot 2013.03.24 21:20 | 編集
手順
1.画像を作る
2.ブログ管理ページの「ファイルアップロード」で、作った画像をアップロードする(記事内で使う画像をアップロードする時と同じです)
3.アップロードした画像のファイル情報欄にあるURLをコピペする

FC2ブログでは、テンプレートに使う画像も、記事内で使う画像も同じ場所にアップロードするみたいです。
potardot 2013.03.24 21:49 | 編集
ご親切に、ものすごくわかりやすい説明ありがとうございます!
おかげで、理想通りのが出来ました!♪♪

本当にありがとうございました
ミドリスdot 2013.03.24 22:06 | 編集
出来たみたいで良かったです!
おつかれさまでした。
potardot 2013.03.24 22:31 | 編集
こんにちは!お久しぶりです^^
また質問させて頂いてもよろしいでしょうか(´・ω・`)
えーっと、変えたいところがあるのですが、
「私たちナナとミドリスの毎日を緑のそよ風のように…」
という所の下のラインです。
前までは、桜の背景だったのですが何故か表示できなくなってしまい、当時のやり方も忘れてしまったという状況です。

再び申し訳ありません。。
ミドリスdot 2013.05.10 18:59 | 編集
お久しぶりです。

以前の状況が分からないので、おそらくですが…
ライン部分の画像を表示するのに、他所のサイトの画像に「直リンク」していたからかと思います。
たぶんhttp://www.yamato-style.com/kabegami/wp-content/uploads/sakura04.jpgという画像ですねー。アクセスをはじかれたか、私の環境ではhttp://www.yamato-style.com/自体に繋がりませんのでサイト自体閉鎖したのかもしれません。

ちなみに、画像への「直リンク」は嫌がられる事が多く、はっきり禁止しているサイトも多いのでご注意ください。
potardot 2013.05.11 16:08 | 編集
ご返信 ありがとうございます^^
なるほどー わかりました。私もサイト、行けません(・・;)
自分で作った画像でなんとかします!ありがとうございました。
ミドリスdot 2013.05.11 17:40 | 編集
管理者にだけ表示を許可する
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。