[PR]
Posted on Wednesday, Dec 04, 2024 22:18
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
Clear One
Posted on Monday, Sep 07, 2009 00:21
- テンプレート： Clear One
- 使用色： ■ ■ ■
- レイアウト： 1カラム
記事部分は560px、記事内画像最大幅は545pxです。
JavaScript（jQuery）を使用しています。
[10/05] プラグインのリンクの記述ミスを修正。
[10/07] コメントやトラックバックを非表示にするとレイアウトが崩れていたのを修正。
前々から作ってみたかった1カラムのテンプレート。
メニュー部分にjQueryを使用し、触れると中身がみょーんと出てきます。俗に言うドロップダウンメニュー。
今まで作った中で一番記事幅が広いので、長文で書きたい人や大きい画像を貼りたい方におすすめ。シンプルなので投稿画像も映えると思います。
メニュー部分のカスタマイズ方法についてはコチラに記載。
背景を白色にする方法
まずテンプレートのCSSの10行目の
background: url(http://bfile.shinobi.jp/5629/clearone_bg.gif) repeat-x #f8f8f8;
となっているところを、以下のように書き直します。
background: #fff;
これで背景画像を取り除き、背景色も白色になりました。
ですが、このままだとグラデーションがかかっていた部分が汚くなってしまうので、CSSの83行目と99行目、103行目の背景指定を直します。
83行目（#wrapの部分）
background: url(http://bfile.shinobi.jp/5629/clearone_wrap.gif) no-repeat #fff;
↓urlの括弧の中身を書き換える。
background: url(http://blog.cnobi.jp/v1/blog/user/4224caef498b3267ecfd6d3c80635754/1254742115) no-repeat #fff;
99行目（#contentsの部分）
background: url(http://bfile.shinobi.jp/5629/clearone_contents.gif) repeat-y;
↓urlの括弧の中身を書き換える。
background: url(http://blog.cnobi.jp/v1/blog/user/4224caef498b3267ecfd6d3c80635754/1254742119) repeat-y;
361行目と438行目（h3#commentsとh3#trackbacksの部分）
background: url(http://bfile.shinobi.jp/5629/clearone_hr.gif) no-repeat 0 0;
↓urlの括弧の中身を書き換える。
background: url(http://blog.cnobi.jp/v1/blog/user/4224caef498b3267ecfd6d3c80635754/1255004963) no-repeat 0 0;
103行目（#footerの部分）
background: url(http://blog.cnobi.jp/v1/blog/user/4224caef498b3267ecfd6d3c80635754/1252243375) no-repeat 0 0 #f8f8f8;
↓urlの括弧の中身を書き換え、最後に書いてある背景色指定、#f8f8f8;を#fff;に直す。
background: url(http://blog.cnobi.jp/v1/blog/user/4224caef498b3267ecfd6d3c80635754/1254742122) no-repeat 0 0 #fff;
以上のように書き直せば、グラデーションだった部分も汚くない白背景になります。
コンテンツの背景も白色にする方法
コンテンツの背景も白色にしたい方は、上記の背景を白色にする方法でCSSを書き直して正常に表示されるか確認した後、以下のように書き直して下さい。
83行目（#wrapの部分）
background: url(http://file.ninjacustom.blog.shinobi.jp/clearone_wrap_w.gif) no-repeat #fff;
↓_w.gifを_ww.gifにする。
background: url(http://file.ninjacustom.blog.shinobi.jp/clearone_wrap_ww.gif) no-repeat #fff;
103行目（#footerの部分）
background: url(http://file.ninjacustom.blog.shinobi.jp/clearone_footer_w.gif) no-repeat 0 0 #fff;
↓_w.gifを_ww.gifにする。
background: url(http://file.ninjacustom.blog.shinobi.jp/clearone_footer_ww.gif) no-repeat 0 0 #fff;
以上です。
Comment
メイ
2009.09.11 at 01:45 | Edit
初めまして。Clear One、シンプルさにときめいて使わせていただいています。
しかし、どうも追記へのリンクが表示されないようなのですが…。
お手隙の際にでもご確認いただけると幸いです。
テンプレートをご利用して頂き、どうもありがとうございます。
急いで調べてみたところ、メイさんの仰るとおり追記リンクが表示されていませんでした…orz
今しがた記事にも同じ事を書いたのですが、修正後のテンプレートを再度DLして頂くか、テンプレートの138行目～147行目の修正をお願いします。
<!--if_entry-->
<!--if_not_entry-->
<!--if_ps_text-->
<p><a href="<!--$entry_link-->"><!--$entry_ps_title--></a></p>
<!--/if_ps_text-->
<!--/if_not_entry-->
<!--if_ps_text-->
<!--$entry_ps_text-->
<!--/if_ps_text-->
<!--/if_entry-->
となっているところを、
<!--if_entry-->
<!--if_ps_text-->
<!--$entry_ps_text-->
<!--/if_ps_text-->
<!--/if_entry-->
<!--if_not_entry-->
<!--if_ps_text-->
<p><a href="<!--$entry_link-->"><!--$entry_ps_title--></a></p>
<!--/if_ps_text-->
<!--/if_not_entry-->
と修正すれば、きちんと追記リンクが表示されるようになります。
ご報告どうもありがとうございました(`・ω・´)
From Master | 2009.09.12 at 08:53
K
2009.09.19 at 12:33 | Edit
Hello, I am overseas users.
I have found that is not open "Trackback" article, template has BUG.
I cut the picture, you can see:
http://img30.imageshack.us/img30/5521/2009091901.png (Open the "Trackback")
http://img170.imageshack.us/img170/8502/2009091902.png (Close the "Trackback")
I really like your template, can trouble you to tell me how to repair it?
Thanks! :-)
Hello, Thank you for using template! ;)
I'm not good at English.
If I make mistakes in my English, please pardon me.
Please edit 364line of CSS.
div.comment { margin: 0 22px 30px; }
↓
div.comment { margin: 0 22px; padding-bottom: 30px; }
Thank you comments!
--------
こんにちは、テンプレートを使ってくれてどうもありがとうございます！
私は英語が得意ではありません。
ミスもあると思いますが大目にみてください。
CSSの364行目を以下のように編集して下さい。
div.comment { margin: 0 22px 30px; }
↓
div.comment { margin: 0 22px 0px; padding-bottom: 30px; }
コメントどうもありがとう！
From Master | 2009.09.19 at 19:58
nam.
2009.10.05 at 16:26 URL | Edit
はじめまして。
シンプルで、いいテンプレートなので、
使わせて頂こうと思いますが、リンクが、うまく設定されません。
管理ページのほう、
リンクの編集で、
元々の管理ページ、記事を書くのリンクを消して、
新しいリンクを設定したのですが、
（プログ上には、表示されます。）
指定先が見つかりませんという画面が出ます。
カテゴリーの設定と何か、関係ありますか？
もしかしたら、忍者ブログのほうの問題かとも、思いますが、
教えていただけるとありがたいです。
あと、背景を真っ白にしたいな～と、思うのですが、
一番上（TOP）の部分の、カラーをいじれたりできますか？
初めまして～。
テンプレートを確認してみたところリンクタグの記述が間違っていました(;´Д`)
テンプレートの108行目、
<li><a href="$plugin_link_link" <!--if_target_flg-->target="<!--$plugin_link_target-->"<!--/if_target_flg-->><!--$plugin_link_title--></a></li>
となっているところを、以下のように書き直して下さい。
<li><a href="<!--$plugin_link_link-->" target="<!--$plugin_link_target-->"><!--$plugin_link_title--></a></li>
これできちんとリンク先に飛べるようになります。
先ほど共有テンプレートにも修正申請しましたので、もし直すのが面倒だったりよく分からなかった場合は、そちらを再度ダウンロードして頂ければと思います。
ご報告どうもありがとうございました！
背景色については説明すると長くなってしまうので、記事にその方法を書きました。
分からないところがあればお気軽にコメントどうぞー。
From Master | 2009.10.05 at 21:16
nam.
2009.10.06 at 17:28 URL | Edit
さっそくの回答、ありがとうございます。
リンク上手くいきました。
あとは、枠ありの真っ白という感じです。
ずいぶん、自分的には、よくなったんですが、
せっかくなので、もう少しお聞きしてもいいですか？
メニューのコメントと、トラックバックを消したんですが、
記事上の下のところの表示が残ってしまいます。
表示は、全て消せますか？
あと、アクセス解析なんですけど、
使う場合は、プログラムを、どこに挿入すればいいですか？
それと、ボクは、考え中ですが、
もしかしたら、他の方が、使われるかもしれないと思ったのが、
メニューに、
管理ベージにあるプロフィールが使える、プロフィールの項目です。
あってもいいかもしれません。
たびたび、すいませんが、
よろしくです。
上手くいったようで何よりです(*´∀`*)
コメントとトラックバックの消し方についてなのですが、私自身コメントやトラックバックを消した事がなかったので全く設定していませんでした…orz すみません。
ここにその方法を書くととてつもない長さになってしまうので、大変お手数ですが、修正したhtmlを置いておくのでそちらを見ながら修正して頂く形か、
つい先ほど修正申請を行ったので、それが反映されるまで待って頂く形になってしまいます(´・ω・`)
http://blog.cnobi.jp/v1/blog/user/4224caef498b3267ecfd6d3c80635754/1254916594
148行目の</div>から下をコピペすると、カスタマイズしたであろう箇所を変更前に戻さずにすむと思います。
コピペした後は、記事修正画面の[続きを書く]の隣の[詳細設定]を押して頂き、コメントとトラックバックを[受け付けない]にチェックをすればOKです。
148行目がどこか分からない場合は一旦メモ帳に全てコピペして頂き、Ctrl+Gを押して出てきたところに148と打てば148行目にカーソルが移動してくれます。
Ctrl+Gを押しても何も出てこない場合は、[書式]→[右端で折り返す]のチェックを外してから試して下さい。
アクセス解析の件ですが、忍者のアクセス解析でしょうか？
もし忍者のアクセス解析でしたら、
http://www.ninja.co.jp/help/analyze/use001_2.html
上記のURLが参考になると思いますので、そちらを参考になさって下さい。
＞ <body>と</body>の間であればどこでも構いません。
と書かれてあるので、<body>タグのすぐ下に書けば大丈夫だと思います。
プロフィールの件は土日にいじってみようかと思います。
それまで少々お待ち下さい～
From Master | 2009.10.07 at 21:34
nam.
2009.10.08 at 16:45 URL | Edit
さっそくのお返事ありがとです。
素人な質問して申し訳ないです。
アクセス解析の方は、無事つけられました。
ボクの見ていた説明では、
管理ページのプラグインのHTMLに載せるということだったので、
それをしてみたところ、うまくいかず、質問しました。
コメント、トラックバックを消す、
のお返事もありがとうございます。
実は、ビジュアルの問題で、記事をいくつか連なって表示したときに、
右下に、何もなく、次の記事というのが、キレイなのかなと思いまして。
カテゴリーも含めて、消せたらと思ってました。
でも、
記事を一つだけの表示にしたら、本っぽくて、
コメントの表示されたときの
切り取り線みたいのとか、両端の半円みたいのが、
切符というか、紙みたいで一つ記事なら、
デザインもいいなーと、思い直しまして、
コメント蘭は、そのままにしようかと思います、
わざわざお返事いただいたのに、すいません。
もろもろ、丁寧にありがとうございました。
こちらこそ記述ミスしてばかりで申し訳ありません。それにnam.さんのおかげで新たな発見を得られたので、とても感謝しております。ありがとうございます。
忍者のプラグインはどうもhtmlの書き方が好きではないので、基本的に私の作ったテンプレートではプラグイン対応していないのです。そのせいでアクセス解析で手間取らせてしまったようで…やっぱり対応した方がいいのかなー。
そうそう、記事詳細ページに移った時の背景を少しへこませた部分、本当はブログトップページの記事一つ一つを区切るために使用しようかと思っていたのですが、そうすると記事のタイトルが目立ってくれなかったので、記事詳細ページの区切りに使用したのです。気に入ってくださったみたいで嬉しいです。
こちらこそ、ご報告どうもありがとうございました！
From Master | 2009.10.08 at 21:46
nam.
2009.10.09 at 01:41 URL | Edit
お返事ありがとうございます。
またまた、あと、もう一つ、気になってきまして。
ここまできたので、欲張って書き込みさせていただきます。
へこんでいるデザイン、かなり気に入ってるんですけど、
コメント欄を表示した時に一番したのところ、
search の上のところなんですが、
最後もへこみ、切り取り線 （あってもなくても） みたいな感じに出来ますか？
半円じゃなく、1/4円みたいな。
サーチの欄を別にして、まだ紙は続いてるよーっぽく。
それで、
紙っぽさがさらに出るような、気がしまして。
ややこしいこと言ってたら、申し訳ないです。
今でも、
十分にいいと思っているので、
簡単なことであれば、お返事ください。
ふむふむ…つまりコンテンツの背景をフッターで止めず、画面下まで持ってきたいということでしょうか？
それでしたら、CSSの"レイアウト"の中の101行目あたりにある、#footerと入れ替えてみて下さい。
間違ってると困るので、一応元のCSSのバックアップも取っておいて下さいね。
#footer {
padding: 50px 20px 40px;
background: url(http://blog.cnobi.jp/v1/blog/user/4224caef498b3267ecfd6d3c80635754/1255004963) no-repeat;
}
From Master | 2009.10.09 at 20:22
nam.
2009.10.11 at 20:52 URL | Edit
返事遅くなりました。
ありがとです。
いい感じっす。
この感じだと、いくつか記事を表示する方が、
かっこよさげなので、そうします。
また、なんか気づいたら、メールします。
ありがとでした。
でわ。
こちらこそどうもありがとうございました。
どんどんカスタマイズして自分だけのテンプレートにしてやって下さいね。
また何かあればいつでもどうぞー。
From Master | 2009.10.17 at 00:20