fc2ブログ
2005.11.02

cheap paper

cheap paper

古くて安っぽい紙をイメージして作ってみました。(日記帳とか航海日誌みたいな感じ?)記事部分は可変です。
livedoor Blogですでに配布しているものをFC2用に移植してみました。


上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。


このテンプレートの使用上の注意

・本文やサイドメニュー、コメントに長い英文を入れると自動改行されず表示が崩れる可能性があります。


・記事部分よりサイドバーが長くなる場合、ページ左側の画像が途中で切れてしまってカッコ悪いので、 ページに表示させる記事数をうまく調整していただければと思います。


・記事に画像などを合わせて投稿されると行と背景の罫線がずれて表示されることがあります。
※テキストと引用だけの場合はずれません。


・ブラウザのウィンドウをリサイズした時に一番上がちょっとズレてしまいますが上下にスクロールして頂ければ元に戻ります。


このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。


画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。


このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。


制作環境は以下の通り。
OS:WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ:InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ:中

スポンサーサイト




Posted at 11:19 | Template | COM(44) | TB(0)
この記事へのトラックバックURL
http://cie.blog11.fc2.com/tb.php/21-ef074a8c
この記事へのトラックバック
この記事へのコメント
昨日の15時ごろにコメントしていただいた方、なぜか投稿が反映されていないようです。[汗]

コメント通知メールは着ていたのですが
> はじめまして。今日cieさんのテンプレートcheap pae
までしか通知されていませんでした。

もし何かこのテンプレートに不都合がございましたら再度コメントして頂ければ幸いです。
お手数ですがよろしくお願いいたします。

--
おそらくフォーラムのこの現象と同じものだと考えられます。
http://blog.fc2.com/forum/viewtopic.php?t=4663

まだ原因が特定されていないようなのでこの先間違いが無いよう
テンプレートを修正して注意書きしておきます。
Posted by cie at 2005.11.04 11:00 | 編集
はじめまして。
cheap paperを使用させていただいていますtacoと申します。

文字を小さく表示したいのですが、プレビューでは反映され実際の画面で反映されません。
できないのでしょうか。どうぞ教えてください。


Posted by taco at 2005.11.10 23:34 | 編集
tacoさんはじめまして。
テンプレートのご利用ありがとうございます。

> 文字を小さく表示したいのですが
どこの部分の文字サイズかちょっとわかりませんがおそらくは記事部分でしょうか・・・

.main{ }の中の
font-size:0.75em;
を0.7~0.6emにすると記事本文だけの文字サイズが小さくなります。

もし全体の文字サイズを小さくされたい場合
body{ }の中の
font-size:1em;
を0.9~0.8emにしてもらうと全体の文字サイズが小さくなります。
※コメント部分やサイドメニューの文字がかなり小さくなってしまうかもしれません。
Posted by cie at 2005.11.11 01:58 | 編集
ありがとうございます。
記事本文の文字サイズのことでした。言葉が足りず申し訳ありません。。。
いくつか試してみましたが、やはり文字サイズは変更せずこのまま使用させていただきます。
お手数をおかけしました。

Posted by taco at 2005.11.11 20:38 | 編集
はじめまして!
とても素敵なので使用させていただきたいのですが、
可能であれば、右側に記事にしたいのですが、
どうすればいいのでしょうか??
いきなりすみません。。。
お時間あるときにでも教えていただけると嬉しいです。
よろしくお願いいたします。
Posted by ゆかり at 2006.01.18 03:07 | 編集
ゆかりさんはじめまして。

> 右側に記事にしたいのですが、どうすればいいのでしょうか?
テンプレートの管理からCSS部を編集してください。
#少々長くなりますが上から順に説明させてもらいますので、お付き合いください。

まず body{ }中にあります
background:#fff ('http://省略/cheap_body.png') repeat-y 100% 0%;
ここを
background:#fff ('http://省略/cheap_body2.png') repeat-y 0% 0%;
のように編集します。 つづきまして #container{ }の中にあります
padding:0px 0px 0px 10px;
となっている所を
padding:0px 10px 0px 0px;
に、
background:url('http://省略/cheap_container.png') repeat-y 0% 0%;
ここを
background:url('http://省略/cheap_container2.png') repeat-y 100% 0%;
に編集します。 つぎに #banner{ }の中に
margin-left:250px;
こちらを追記述します。 続いて .blog{ }の中にあります
margin-right:250px;
となっている所を
margin-left:250px;
に編集してください。 続きまして #links{ }の中にあります
right:10px;
こちらを
left:10px;
に編集します。 最後に #footer{ }の中にある
margin:0px 0px 0px 0px;
こちらを
margin:0px 0px 0px 250px;
のように編集してください。
あとは保存ボタンを押して確認してみてください。
たぶん崩れず表示されると思います。

わかりにくいところなどありましたらまたご質問くださいませ。
Posted by cie at 2006.01.19 00:56 | 編集
できましたーーーー!!!!!
ご親切な説明、本当にありがとうございました!
色々自分でも勉強してみたくなりました。
またわからないことが出てきましたら質問させていただくかもしれませんが、何卒よろしくお願いいたしますm(_ _)m
本当にありがとうございました★
Posted by ゆかり at 2006.01.19 06:35 | 編集
はじめまして、cieさん。
cheappaperとても素敵です♪

いろいろツリー化などカスタマイズさせていただきましたが、それが原因か分りませんが、
記事数が少ない(短い?)時、左側の茶色い線が切れてしまいます。

お時間ありましたらご指導いただければありがたいです。[さけび]
Posted by 猫山はるちぃ at 2006.02.10 18:20 | 編集
猫山はるちぃさんはじめまして。
テンプレートをご利用くださりありがとうございます。[にこっ]

これはこのテンプレートの使用上の注意に書いている
> 記事部分よりサイドバーが長くなる場合、ページ左側の画像が途中で切れてしまってカッコ悪いので、
という症状だと思います。
大変申し訳ございませんがこのテンプレートの仕様ですので、ご理解頂ければと思います。すみません。[しゅん]
Posted by cie at 2006.02.11 09:08 | 編集
cieさま

お応えありがとうございます。
左側の画像を消して使わせていただきますね
[にこっ]
Posted by 猫山はるちぃ at 2006.02.11 22:16 | 編集
はじめまして
シンプルなcheap paperが気に入って[はあと]使用させていただいていますpopoです。
まだまだ初心者でわからないことが多いのですが、このテンプレートを3カラムにすることはできますか?
Posted by POPO at 2006.02.19 13:44 | 編集
POPOさんはじめまして。
テンプレートのご利用ありがとうございます。[にこっ]

> このテンプレートを3カラムにすることはできますか?
できます。
ただCSSだけでなくHTMLテンプレートから変更しなくてはいけませんので少々難しい作業になるかと存じます。

2,3日頂ければ3カラム用のテンプレートを用意させていただきますが、それでもよろしいでしょうか?
3カラムは真ん中が記事で左右にメニューがある場合と、片側に2つメニューを寄せる場合がありますので希望をお書きください。
Posted by cie at 2006.02.20 00:18 | 編集
わーい[ぱちぱち][ぱちぱち]
片側にメニューを2つ寄せる方がすきです。
わざわざありがとうございます。楽しみに待ってます[にこっ]
Posted by POPO at 2006.02.20 11:16 | 編集
お待たせしました。

右にメニューを2つ寄せてみました。
http://blog11.fc2.com/c/cie/file/cheap_3cr.css(CSS)
http://blog11.fc2.com/c/cie/file/cheap_3cr.txt(HTML)
こちらの二つのファイルをそれぞれテンプレートの編集からHTML,CSSの欄にコピーして保存してください。

記事の幅を固定幅にはしませんでしたので、使用する際
・ブラウザのウィンドウサイズが小さいと表示が崩れる。
・たくさんサイドメニューに項目があると表示が重たくなる。
このような症状がでてしまう事がありますので注意してお使いください。
Posted by cie at 2006.02.22 09:30 | 編集
はじめまして。
ずっといいテンプレ探していたのですが、やっと見つけました!これ大変気に入ってます!
質問なんですが、バックの色を変えることは可能でしょうか?もし色を変えるのが失礼にあたるのならこれでも十分満足なのでこれで使わしていただきます。
気分転換とかで変えたいなぁと思ってコメントさせていただきました!
Posted by 八雲 at 2006.03.14 10:29 | 編集
八雲さんはじめまして。
テンプレートのご利用ありがとうございます。[にこっ]

カスタマイズに制限は設けていませんのでどうぞお好きに改造していただいて構いませんよ。[さむあっぷ]
Posted by cie at 2006.03.15 00:08 | 編集
ありがとうございます!
なにをいじればいいのかわからないのでまたにします^^;
このテンプレはほんとに気に入ってて、長い間使いたいので見慣れないようにしたいんです^^

ほんとにグッジョブっすw[ぱちぱち]
Posted by 八雲 at 2006.03.15 11:13 | 編集
こんなノート風のを探していました。
質問です。。。
画像を左側に入れて、その横に本文を入れたいのですが、画像の下の行からしか、始まりません。
画像の最上部と同じ行から、記事が始まるにはどうしたらよろしいでしょうか?
今、使用のテンプレートだと画像のタグの<br clear="all">の部分を削除すればOKのようなのですが、、、
全く知識がないので、すごい基本的なことで申し訳ありませんが、よろしくお願いいたします。
Posted by なつ母 at 2006.08.27 16:25 | 編集
なつ母さんはじめまして。
ご利用ありがとうございます。

> 画像を左側に入れて、その横に本文を入れたい
えと、これは3つくらい方法があります。

1つ目。
まず記事を投稿する際、画像タグの中に
<img src="URI" alt="ALT" border="0" align="left" />ここにテキストあああああ<br clear="all" />
という感じにする。

2つ目。
<img src="URI" alt="ALT" border="0" style="float: left;" />ここにテキストあああああ<br style="clear: left;" />
という感じにする。

3つ目。
まずテンプレートの編集のスタイルシートの方の枠に
.main img.pict {
float: left;
padding:4px;
margin-right:5px;
margin-bottom:5px;
}

こちらを追記してテンプレートを保存。記事作成時の画像タグを
<img src="URI" alt="ALT" border="0" class="pict" />ここにテキストあああああ<br style="clear: left;" />
という感じにする。

以上です。
Posted by cie at 2006.08.28 22:07 | 編集
りがとうございます[にこっ]!
やってみます。
これからもよろしくm(._.)mお願いします。
Posted by なつ母 at 2006.09.03 10:08 | 編集
はじめまして!
素敵なデザインのテンプレートで、早速使わせて頂きたいと思います。質問なのですが、サイト内の字体がMS UI Gothicなので、できたらテンプレートの字体もMS UI Gothicにしたいのです。試しにやってみたものの上手くいかず…;どうしたら変更できるのでしょうか?(><;)
Posted by haze at 2007.01.01 15:20 | 編集
hazeさんはじめまして。
テンプレートのご利用ありがとうございます。[にこっ]

字体を変更するには、スタイルシートのbody {}中にある
font-family:Verdana, sans-serif, 'HiraKakuPro-W3', 'ヒラギノ角ゴ Pro W3', Osaka, Arial;
ここを
font-family: 'MS UI Gothic';
このように変更してみてください。
これで全体がMS UI Gothicになるはずです。
Posted by cie at 2007.01.05 07:45 | 編集
こんにちは。最近になってこちらのテンプレ使用するようになりました。気にいっています♪
ですが気になることがありまして・・・質問です。
自分のブログの過去記事を見て気がついたのですが、
一部のカテゴリー(手作り…のところが主)で
画像が重なって表示されたり、記事とは関係ない
別の記事に他の記事の画像が張り付いていたり(?)
レイアウトも崩れています。
あと、一部の絵文字もあるべき場所ではないところ
(写真と重なっていることろもありました)に
表示されています。
何が原因かわかりますか?教えてください。
よろしくお願いします。
Posted by こうめママ at 2007.01.13 17:40 | 編集
こうめママさんこんにちは。
すみません。このテンプレは特に問題が多いテンプレなんです……[汗]

とりあえずの原因はおそらくAmazon本の紹介の<table>タグ部分だと思うんですが……根本的な解決はちょっと難しいかもしれません。

> レイアウトが崩れています。
本文にAmazon本の紹介を貼る時の、
<table style="width:85%;border:0;" border="0">
この部分の赤文字(width:85%;)を消して貼ってみてください。
これでレイアウトの崩れ(右に広がっている問題)は解消されると思います。
#これをしても画像が重なったりしている所がまだあるかなと。

全て書き換えるのは大変な作業ですので、スタイルシートで調節しようと試みていますが、今の所解決策は見つかっておりません。
お時間いただければ他の部分も含めての解決策を模索しますが、どれほどの期間をいただいても完全に解決しますとは現在の所保証できません。すみません。[泣]

気に入って使っていただいていて大変恐縮なんですけれども、テンプレート自体を変更される事も考えられるとよろしいかもしれません……[さけび]
Posted by cie at 2007.01.16 09:53 | 編集
すみません。
解決は無理かもと書いてしまいましたが、もしかすると解決するかもしれない方法を思い出しましたのでここに付け加えておきますね。[汗2]

スタイルシートの
.main img {position: relative;}
という記述を削除してみてください。
これで画像が彼方此方行く事はなくなるかと思います。

ただ、もしかすると背景の罫線が投稿した画像より上に表示されてしまうかもしれません。[ちゅうい]
Posted by cie at 2007.01.16 12:54 | 編集
管理人さん、丁寧な回答ありがとうございました。
とっても気に入っていたので、しばらくはこのまま
使おうと思っていたんですけど、残念です。
写真が多い日記には向かないんでしょうかね・・・
・・・が、解決方法があったみたいで!
スタイルシートの方を試して見ることにします。
どうもありがとうございました!!

Posted by こうめママ at 2007.01.17 10:59 | 編集
早速やってみました。スタイルシートの方も指定の箇所を削除して
みました。今の所、確認した所はきれいに表示されております。が、
Amazon本の紹介を載せた記事はやはり変わらずだたったので、
こちらも1つづつ消してやってみました。
(記事中に紹介しているところはそれほど多くなかったのでよかったです)無事解決しました。

>ただ、もしかすると背景の罫線が投稿した画像より上に表示されてしまうかもしれません。
これは写真の上に罫線がのってしまうってことでしょうか?今の所、それはないみたいです。

他の細かい所は気にしないことにします^^;
この度は色々とありがとうございましたm(__)m
Posted by こうめママ at 2007.01.17 11:18 | 編集
こんにちは!前回は丁寧なお答え有り難う御座いました!おかげさまで変更することが出来ましたv愛用していますvv
それで、恐縮ながらまたまたご質問なのですが;;スクロールバーをこのテンプレートに似合う色合いに変更出来ないでしょうか??度々申し訳ないのですが、教えて頂けたら幸いです;
Posted by haze at 2007.01.24 16:29 | 編集
hazeさんこんばんは。

似合うといわれても難しいですね……
適当ですけどテンプレ内で使われているカラーコードを組み合わせて2つ作ってみましたんでお好きなほうをどうぞ。

html, body {
scrollbar-track-color: #e6d6bc; /* トラックの色 */
scrollbar-face-color: #706751; /* バーの色 */
scrollbar-arrow-color: #fff; /* 矢印の色 */
scrollbar-shadow-color: #424242; /* 右下枠内の色 */
scrollbar-darkshadow-color: #424242; /* 右下枠外の色 */
scrollbar-highlight-color: #fff; /* 左下枠内の色 */
scrollbar-3dlight-color: #424242; /* 左下枠外の色 */
}


html, body {
scrollbar-track-color: #e6d6bc; /* トラックの色 */
scrollbar-face-color: #e6d6bc; /* バーの色 */
scrollbar-arrow-color: #424242; /* 矢印の色 */
scrollbar-shadow-color: #e6d6bc; /* 右下枠内の色 */
scrollbar-darkshadow-color: #706751; /* 右下枠外の色 */
scrollbar-highlight-color: #e6d6bc; /* 左下枠内の色 */
scrollbar-3dlight-color: #706751; /* 左下枠外の色 */
}
Posted by cie at 2007.01.24 21:48 | 編集
はじめまして。
このテンプレートが気に入ってカスタマイズしようと考えているのですが、
ブラウザの「お気に入り」とかを表示したり、ウィンドウサイズを狭くする時にどうしても崩れますよね・・・(;_;)
記事幅を固定するようにできる方法があれば、教えてくださると幸いです。m(_ _)m
Posted by eco at 2007.01.25 18:52 | 編集
ecoさんはじめまして。
テンプレートのご利用ありがとうございます。[にこっ]

どのくらいの幅が良いのかわかりませんでしたので、とりあえず全体幅850px固定のスタイルを作ってみました。

http://blog11.fc2.com/c/cie/template/cheap_solid/style.css
ここにアクセスして、全てをコピーした後、テンプレートの編集よりスタイルシートに貼り付けて保存してみてください。

不足がありましたらまたご連絡くださいませ。
Posted by cie at 2007.01.27 12:24 | 編集
こんばんは。
cssファイルを開いてみたら日本語が文字化けしていたので、なんとか手で直していきました[汗2]
サイズの方は850pxでちょうどよい感じです♪
本当にわざわざ作ってくださって、ありがとうございました[笑]
大事に使っていきますね!
Posted by eco at 2007.01.27 22:40 | 編集
とりあえずうまく行かれたようでよかったのですが、少し説明が足りませんでした。[汗2]

FC2ではスタイルシートファイルはEUC-JPというShift_JIS以外の文字コードで保存されています。
ですからWindows付属のメモ帳などでは文字化けしてしまいますので、対応したテキストエディタで開いていただけると問題なく表示されるかと思います。

大丈夫かとは思いますが、何か問題が出ましたら対応したエディタで開いてみてください。
Posted by cie at 2007.01.28 01:00 | 編集
初めまして!シンプルなデザイン、末永く使わせていただきたいと思ってます。
850pxで固定するスタイルシートを利用したところ、デザインが崩れてしまいました。
何処を直せばデザイン通りに表示されるのか教えていただけると嬉しいです。
Posted by かみさん at 2007.05.13 20:07 | 編集
かみさん さんはじめまして。
テンプレートのご利用ありがとうございます。

今は通常のものをお使いのようで、崩れている状態の確認が取れませんです。[汗]

おそらくですが、崩れてしまう原因は記事中ニ挿入された画像の回り込みを解除していないからだと思います。
解除する方法は、<img>タグの後、若しくは、段落の後ろに
<br clear="all" />
を入れてみてください。
Posted by cie at 2007.05.14 00:42 | 編集
このコメントは管理人のみ閲覧できます
Posted by at 2007.05.15 10:17 | 編集
わざわざすみません。
今確認させてもらいましたところ、確かに表示がおかしいですね。 IE だと左に間が空いてしまって、 Firefox だと紙の部分が広がって見えます。

通常はこのようになるはずなんですけれども
http://cie.blog11.fc2.com/?style2=cheap_solid&index
スタイルシートを見る限り、全てスタイルシートを一行で書かれてしまっているようなので、まず、これを読みやすいよう
http://blog11.fc2.com/c/cie/template/cheap_solid/style.css
このようにキチンと改行を入れた形にして下さい。

次にスタイルシートの body { } の中の
background: #fff url('略') repeat-y 750px 0;
ここの 750px540px へ。
#content { } の中の
width:600px; を width:550px; にそれぞれ変更して保存します。

これでおそらく崩れず表示されるはずです……
Posted by cie at 2007.05.15 22:34 | 編集
ご親切にありがとうございました。
お陰様で好みのデザインに仕上がりました。
末永く利用させていただきます。
Posted by かみさん at 2007.05.17 16:14 | 編集
このコメントは管理人のみ閲覧できます
Posted by at 2007.05.29 10:00 | 編集
はじめまして。
素敵なテンプレートなので使用させていただいています。
「記事編集」もあって、とても使いやすいテンプレートですね。
Posted by のまど at 2009.07.06 22:56 | 編集
このコメントは管理者の承認待ちです
Posted by at 2010.04.18 01:45 | 編集
このコメントは管理者の承認待ちです
Posted by at 2010.10.04 18:40 | 編集
このコメントは管理者の承認待ちです
Posted by at 2011.06.05 13:21 | 編集
このコメントは管理者の承認待ちです
Posted by at 2012.05.03 20:47 | 編集
この記事へコメントする

ご利用のブラウザ、設定ではご利用になれません。
  コメントが反映されない現象が起こっているようですので お手数ですが「書込」ボタンを押される前に本文を全てコピーしておいて下さい。
書き込み後はコメントが反映されているかどうか確認をお願い致します。