- date
- 050329
テンプレカスタマイズ用素材(針ねずみ)
sbテンプレートの針ねずみシリーズ用素材です。
・フォントサイズ12px用の罫線
・フォントサイズ12px用の引用部分用罫線
・罫線なし用のハリーの壁紙×3色
の3パターンをご用意。コピペで使えるCSS付き。
▼カスタマイズの手順(共通)
1)必要な画像をDLして、FTPかアップロード機能でアップロード。
2)「▽CSSの書き換え箇所」に従ってテンプレートのCSSを編集する。画像のURLと書いてある部分は、1でアップロードした各画像のURLを入れて下さい。
3)保存して終了。再構築は不要です。
▼フォントサイズ12px罫線セット (SAMPLE IMAGE)

左)12px用の罫線(記事:entry_body,entry_more用)
右)12px用の罫線(引用:blockquote用)
▽CSSの書き換え箇所
太字の部分をこの色の部分のように書き換えます。
div.entry_body{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #555;
font-size:10px;
→ font-size:12px;
line-height:17px;
→ line-height:20px;
background-image:url(罫線画像のURL);
}
div.entry_more{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #555;
font-size:10px;
→ font-size:12px;
line-height:17px;
→ line-height:20px;
background-image:url(罫線画像のURL);
}
blockquote{
margin:0px 5px 0px 5px;
padding:17px 2px 17px 5px;
→ padding:20px 2px 20px 5px;
color:#8B7765;
font-size:10px;
→ font-size:12px;
line-height:17px;
→ line-height:20px;
background-image:url(引用の罫線画像のURL);
}
▼罫線なし用の針ねずみの壁紙 (SAMPLE IMAGE)

▽CSSの書き換え
この色の部分のように書き換えます。
div.entry_body{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #555;
font-size:10px;
line-height:17px;
background-image:url(背景画像のURL);
background-position:right;
background-repeat: repeat-y;
}
div.entry_more{
margin:0px 7px 0px 7px;
padding:0px 0px 0px 3px;
color: #555;
font-size:10px;
line-height:17px;
background-image:url(背景画像のURL);
background-position:right;
background-repeat: repeat-y;
}
罫線なしなのでfont-size(文字サイズ)やline-height(行間)はご自由に。emや%の相対指定をされたい方はこちらがおすすめ。
見やすさとバランスを考えて、記事の右側に表示されるようにしていますが、
background-position:right;
background-repeat: repeat-y;
の2つを消せば、針ねずみの模様を記事全体の背景にすることもできます。
Comments
コメントエリアをスクロールする / スクロールを解除する
こんにちは。
素材、とてもステキです! ありがたくお借りして参ります。
ご報告が遅れましたが、現在「桜」を使用させて頂いております。
季節が終わる頃に、またハリーに戻そうと思っておりました。
その節にはお世話になろうと思います_(._.)_
それにしてもユヅさんの説明は丁寧で分かりやすいですね。
いつもいろんな面でお世話になってます。ありがとうございます_(._.)_
可愛い!ハリーの壁紙可愛いですねえ。
でも、テンプレート用なのですね…web素材としては使えないようですので(テンプレートの規約らしきものを読んで)私は使えないようです…。うう。
うわ~また可愛いのを♪
話かわりますが、以前相談したと思うのですが、素材サイトで配布されている桜のセットを元に手を加えたデザインをつくりました。
公開すべきBlogではどういう訳か反映されていないので、別のURLでアップしています。
ここまで加工してもよかったのかな?と不安なのでユヅさんに了解をいただきたいなと思ってますし。
よかったら上のurlから見てやってください。よろしくです<(_ _)>
Σ(|||▽||| )
表示は下でしたね≧(´▽`)≦アハハハ
●きょんさん
こんにちはー^^
桜が散ってもよろしくお付き合いくださいませ(笑)
自分の知っていることを知らないかもしれない人に説明するのは、見落としなどがありがちですが、できるだけコピペですむように解説できればと思います^^
●keiさん
いつもコメント有難うございますー^^
そこでkeiさんもsbデビゥですよ!(笑)
テンプレートのデザインは他への流用はご遠慮いただいてますが、壁紙とかは素材にまわしてもいいかなぁと思ってます。
羊のタローみたいにかわいがってもらえるかしら(笑)
●かすりんさん
こんにちはー(*´ー`*)
URL拝見しました。はなやかになりましたねー!
POWERDのところに、image by web*citronとリンクをいただいて有難うございます。
公開していただいて大丈夫ですよ~^^
ありがとうございます(///ω///)
早速公開しました♪
カスタマイズするの初めてだったんで、結構苦労しました。素材屋さんって大変だなあって思いましたよ~。
ていうか、sbにすりゃこんな苦労はしなくていいのに・・・と何度も思ってしまいましたヾ(- -;)
●かすりんさん
素材屋はゼロから描いてる分楽なのですが、セット素材やテンプレートだとバランスや配置もありますからねー><;
sbだとテンプレ周りは本当に楽です…もう手放せませーん(笑)
MTをはじめ、他のブログツールにもそれぞれいいところがありますが、テンプレ重視なので(笑)
こんにちわー。
テンプレート変更にあたり、使用させていただきました~。
こんにちは。以前レイアウト崩れ(バーが下に廻る)について質問させていただいたのですが、その際お返事頂いた中に「IEのマージンの計算バグはコチラ参照」みたいな事が書いてあったのですが、リンクが入ってなかったんです。宜しければ再度教えていただけませんでしょうか。よろしくお願いいたします。
●shiroさん
同じ質問を4月末に別のエントリー(link)でshiroさんがされてまして、そのレスに参考リンクを3件ほどはっておきましたが…^^;
ああああ!すみません。確認してませんでした。大ボケでした!本当すいませんでした。
こんばんは。
現在針ねずみのテンプレお借りしています。12px罫線有に変更したいのですが、罫線画像が表示されません・・・。(×印にもならず、存在していない状態になってしまっています)
多分私のPCのセキュリティソフト?関係なのかなぁと思うのですが、罫線画像はweb*citronさんで入手可能だったりするのでしょうか??
画像のアドレスに直接飛んでも表示されませんか?
アドレス
12px本文用:link
引用用:link
ここで表示されなければ、素材屋のほうでも同じことになると思います…。
画像を保存する間だけ、一時的にセキュリティソフトを一旦切ってみるとか。
(こちらのページ及び画像はノートン先生でウイルスチェック済みです)
早速のお返事ありがとうございます!
直接飛んだら表示されました。本当にありがとうございます。
これからもBlog、楽しみにしています!
素材お借りしました。
ありがとうございます♪
いつも素敵なテンプレを楽しみにしてます。
シンプルで可愛いテンプレ♪が大好きです。
これからもご活躍を期待してます^^
ユヅさん、こんにちは。
ハリーの壁紙をお借りしましたm(_ _)m
4月にこちらのテンプレートに一目ぼれして他のブログからsbに引っ越して参りました。とっても大好きなテンプレートです。
そして素材屋さんのスキンもサイトにて愛用させていただいてます。
これからも頑張って下さい!!
応援しております♪
●micoさん
こんにちは。
ハリーの壁紙お持ち帰りありがとうです^^
シンプルで可愛いのがお好きなのですね、期待に応えられるように頑張りますー♪
●hiyoさん
hiyoさんこんにちは。
コメントありがとうございます。
一目ぼれなんて恐れ多いです、アワワ。sbにお引越しまで…!!
sbに引越してきてよかったわー!と思えるテンプレートが作れるように精進いたします><
はじめまして。
罫線素材お借りしました。
そして、
設置したんですが、どうしてもずれてしまいます。
sbではなくジュゲムを使用しているので無理なのでしょうか?
●kiyopさん
はじめまして。
これらはうちで配布しているsbのテンプレートの針ねずみシリーズを使用されている方用に作ったものですので、その他での利用はこちらで想定する範囲内ではなくサポートは致しかねます。
絵文字とIEのバグによる表示崩れでしょうから、絵文字の画像が原因です。絵文字の画像に全部class指定かけてmargin調整すればIE対策にはなるかと。
お返事ありがとうございます。
やはりsb以外では難しいですね・・・。
そこまで解らないので断念します。
お忙しいのにありがとうございました。
sbにした際には、お世話になりますので、運営頑張ってください。
こんにちは。いつも素敵な素材、眺めているだけでもとても楽しいです。針ねずみのフォントサイズのカスタマイズをしたかったのですが、エントリ内に肝心の背景画像が表示されていないようなのでコメントさせていただきました。お忙しいとは思いますが、よろしくお願いします。
●マナミさん
表示はちゃんとされていますよ^^
特にアクセス制限等もかけていませんので、マナミさんの環境で何らかの原因でブロックされているのかもしれません。
コメント欄の上の方で、同様の方のために画像のアドレスを書いてありますのでそちらをご参考下さい。
あああすみませんコメント欄を凝視していませんでした……同じ症状の方が以前にもいらしたのに、わざわざもう一度お手間を掛けさせて済みませんでしたorz
無事解決して見やすいフォントサイズに出来ました。ありがとうございました!
素材だけでなく隅々までキレイなブログですね^^*
解説も丁寧でとても勉強になりました。