2005.05.28
border
色々迷いましたが共有テンプレートにエントリーさせていただきました。テンプレートの設定 → テンプレートの追加 → ユーザ共有テンプレートから追加 → B → borderから選択できます。
まだ仕組みを理解しきれていないので不具合などあるかもしれません。
表示が崩れたりしていましたら遠慮なくご指摘くださいませ。
このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。
画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。
ただHTMLの構造をlivedoor Blogのモノにかなり似せて作ってるので、FC2ブログに慣れている方にはカスタマイズし辛いかもしれません。
何かありましたらこちらにご質問ください。
作成環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.4、Opera8、Netscape7.1
IE使用時の文字サイズ：中か小
この記事へのトラックバックURL
http://cie.blog11.fc2.com/tb.php/7-c164e5c2
この記事へのトラックバック
テンプレ作るどー！という宣言からはや一週間。やっとできました、シノワテンプレ。はー疲れた。この一週間、毎日こちょこちょやってた訳ですが、最初ベースに使った公式テンプレのsimpleっちうのが結構くせものでして、スタイルシートをいじると何故かエントリーが倍に増加�
カスタムテンプレできまひた。 | 腐レMacer at 2005.06.12 18:24
sieさんのテンプレート"border"を、思いっきり改造させて頂きました。原型あるのかないのか･･(笑)不具合などありましたら教えていただけると嬉しいです♪
デザイン変更 | いつか虹の橋を渡ろう at 2005.06.21 22:11
この記事へのコメント
こんにちは。
こちらのテンプレートをお借りして使わせて頂いているものなんですが、
このテンプレートの場合のコメントのツリー化はどう行うのでしょうか？
少々場違いな質問になってしまってすみませんです。
http://nz.jugemers.net/log/eid31.htmlのカスタマイズ講座を試しているのですがどうも上手くいかないもので...
スクリプト等は埋め込んでいるのですが、最新コメントのタグの｛の部分と、こちらで使われているタグの<での使い方の違いからなのでしょうか？
｛にすると崩れてしまいます。
こちらのテンプレートをお借りして使わせて頂いているものなんですが、
このテンプレートの場合のコメントのツリー化はどう行うのでしょうか？
少々場違いな質問になってしまってすみませんです。
http://nz.jugemers.net/log/eid31.htmlのカスタマイズ講座を試しているのですがどうも上手くいかないもので...
スクリプト等は埋め込んでいるのですが、最新コメントのタグの｛の部分と、こちらで使われているタグの<での使い方の違いからなのでしょうか？
｛にすると崩れてしまいます。
崩れてしまう原因としては、まずやすくんさんが作られたメニューの項目の
my cooking ristやblogpeople、カウンターの
<div class="side">を閉じる終了タグの</div>がそれぞれ抜け落ちていること。
閉じ忘れには十分注意してカスタマイズを進めてください。
それとULとLIを使わないとツリー化が出来ないみたいなので
<div class="sidebody">を使わないようにしないといけません。
今ある最新コメントのテンプレをこのように変えてみてください。
<div class="sidetitle">タイトル文字</div><!-- タイトル文字 -->
<div class="side">
<ul>
<!--rcomment-->
<li><a href="" title=""></a></li>
<!--/rcomment-->
</ul>
</div><!-- .side END -->
このスクリプトを使ったことがないので間違っているかもしれません・・・
また何かありましたらどうぞです。
> ｛の部分と、こちらで使われているタグの<での使い方の違いからなのでしょうか？
こちらはちょっとよくわかりませんでした。(汗)
my cooking ristやblogpeople、カウンターの
<div class="side">を閉じる終了タグの</div>がそれぞれ抜け落ちていること。
閉じ忘れには十分注意してカスタマイズを進めてください。
それとULとLIを使わないとツリー化が出来ないみたいなので
<div class="sidebody">を使わないようにしないといけません。
今ある最新コメントのテンプレをこのように変えてみてください。
<div class="sidetitle">タイトル文字</div><!-- タイトル文字 -->
<div class="side">
<ul>
<!--rcomment-->
<li><a href="" title=""></a></li>
<!--/rcomment-->
</ul>
</div><!-- .side END -->
このスクリプトを使ったことがないので間違っているかもしれません・・・
また何かありましたらどうぞです。
> ｛の部分と、こちらで使われているタグの<での使い方の違いからなのでしょうか？
こちらはちょっとよくわかりませんでした。(汗)
ご回答ありがとうございます！
テンプレを使わせていただいて何とか形になりました。
＞<li><a href="" title=""></a></li>
この部分の使い方がいまいち分からなくてそこは以前のままにしていて今の形になっています。
＞＞ <li><%rcomment_etitle><br/><a href="<%rcomment_link>#comment"><%rcomment_name>
(<%rcomment_month>/<%rcomment_day>)</a></li>
こうゆうのを入れてます。
そのままだとコメントが表示されなかったもので...
あと出来ればもう少し左寄せにしたいのですが、どうしたらよろしいでしょうか？
貴重なお時間とらせましてすいません。
テンプレを使わせていただいて何とか形になりました。
＞<li><a href="" title=""></a></li>
この部分の使い方がいまいち分からなくてそこは以前のままにしていて今の形になっています。
＞＞ <li><%rcomment_etitle><br/><a href="<%rcomment_link>#comment"><%rcomment_name>
(<%rcomment_month>/<%rcomment_day>)</a></li>
こうゆうのを入れてます。
そのままだとコメントが表示されなかったもので...
あと出来ればもう少し左寄せにしたいのですが、どうしたらよろしいでしょうか？
貴重なお時間とらせましてすいません。
ただ今帰宅しました。お返事遅れてゴメンなさい。
> そのままだとコメントが表示されなかったもので...
<li></li>の中は人によって変数の入れ方が違うので適当に入れてもらえるかなーと思って
わざと書かなかったんですけど、逆に解かりづらかったみたいですね。すみません。(汗)
> 左寄せにしたいのですが
CSSのほうにULやLIタグのスタイルが定義されていませんので
/* ココから */
.side ul{
margin:0px;
padding:0px;
list-style:none;
}
.side li{
padding:1px 5px 1px 14px;
margin:0px 0px 5px 5px;
background:url('http://blog11.fc2.com/c/cie/file/border_sidebody.png') no-repeat;
}/* リンク設定 */
.side li a{color:#000040;text-decoration:none;}
.side li a:link{color:#000040;text-decoration:none;}
.side li a:visited{color:#000040;text-decoration:none;}
.side li a:hover{color:#932d05;text-decoration:underline;}
/* ココまで */
をCSSの中に追加して保存してください。
これで今までと同じように表示されると思います。
最後にお節介ですが記述ミスを発見したので・・・
<div class="sidetitle">Recent comments<div>←ここ
閉じ忘れてます。</div>にして下さい。
あとカテゴリ一覧で使われている
<div class="sidebody">
は必要ないので削除してください。
これで大丈夫かな・・・
> そのままだとコメントが表示されなかったもので...
<li></li>の中は人によって変数の入れ方が違うので適当に入れてもらえるかなーと思って
わざと書かなかったんですけど、逆に解かりづらかったみたいですね。すみません。(汗)
> 左寄せにしたいのですが
CSSのほうにULやLIタグのスタイルが定義されていませんので
/* ココから */
.side ul{
margin:0px;
padding:0px;
list-style:none;
}
.side li{
padding:1px 5px 1px 14px;
margin:0px 0px 5px 5px;
background:url('http://blog11.fc2.com/c/cie/file/border_sidebody.png') no-repeat;
}/* リンク設定 */
.side li a{color:#000040;text-decoration:none;}
.side li a:link{color:#000040;text-decoration:none;}
.side li a:visited{color:#000040;text-decoration:none;}
.side li a:hover{color:#932d05;text-decoration:underline;}
/* ココまで */
をCSSの中に追加して保存してください。
これで今までと同じように表示されると思います。
最後にお節介ですが記述ミスを発見したので・・・
<div class="sidetitle">Recent comments<div>←ここ
閉じ忘れてます。</div>にして下さい。
あとカテゴリ一覧で使われている
<div class="sidebody">
は必要ないので削除してください。
これで大丈夫かな・・・
ちゃんと出来ました！
すいませんでした。なんせパソコン歴３ヶ月なもので。
ありがとうございました！
すいませんでした。なんせパソコン歴３ヶ月なもので。
ありがとうございました！
macでは表示ガタガタですね。
Posted by お名前無し at 2005.05.30 00:22 | 編集
macでは制作時に確認をとりながら作れないので・・・
差し支えなければブラウザは何をお使いになっているのか教えて下さい。
出来ればバージョンも。
先ほどmacから確認できるサービスを使ってみたところ
Safari2.0は問題なし。
Mozilla1.7.7でも問題なし。
macIE5.2.3は背景が表示されずサイドメニューが下に落ちている(？)。
状態で見えているようでした。
差し支えなければブラウザは何をお使いになっているのか教えて下さい。
出来ればバージョンも。
先ほどmacから確認できるサービスを使ってみたところ
Safari2.0は問題なし。
Mozilla1.7.7でも問題なし。
macIE5.2.3は背景が表示されずサイドメニューが下に落ちている(？)。
状態で見えているようでした。
こんにちは。
こちらのテンプレートをＤＬして使わせていただいてます。
昨日、アクセスカウンターを設置したのですが、それ以来、
アクセスカウンターから下に画面がスクロール出来たり出来なかったり･･･という現象がおきてしまいます。
アクセスカウンターにポインタを一度おくと、それより下も表示されるようにはなるのです･･･
こちらに質問していいものかどうか分らないのですが、
解決方法など、ご存知でしたら教えて頂けないでしょうか？
お忙しいところすみません。
よろしくお願いいたします。
こちらのテンプレートをＤＬして使わせていただいてます。
昨日、アクセスカウンターを設置したのですが、それ以来、
アクセスカウンターから下に画面がスクロール出来たり出来なかったり･･･という現象がおきてしまいます。
アクセスカウンターにポインタを一度おくと、それより下も表示されるようにはなるのです･･･
こちらに質問していいものかどうか分らないのですが、
解決方法など、ご存知でしたら教えて頂けないでしょうか？
お忙しいところすみません。
よろしくお願いいたします。
ひろ子さんはじめまして。ご利用ありがとうございます。
確かにIEではスクロールできたり出来なかったりしますね。[汗]
ちゃんとした原因はわかりませんが、すこし表示が崩れてしまっているのでまずそこから直してください。
MyBlogListの項目の終了タグが抜け落ちてしまっていますので
<!--/mybloglist-->
</div>
<!-- MyBlogList END -->
このように間に</div>を入れてあげてください。
これで崩れが直ります。[さむあっぷ]
ただこれだと一番下にカウンターが表示されてしまうので
もし今表示されている所と同じ所にカウンターを表示させたい場合。
</div><!-- #links END -->
の直上に
<div style="text-align:center;margin:20px 0px;">
カウンターの設置コード
</div>
このようにいれてみてください。
すこし難しいかもしれませんが、解からない所がありましたら気軽にご質問してくださいませ。[にこっ]
確かにIEではスクロールできたり出来なかったりしますね。[汗]
ちゃんとした原因はわかりませんが、すこし表示が崩れてしまっているのでまずそこから直してください。
MyBlogListの項目の終了タグが抜け落ちてしまっていますので
<!--/mybloglist-->
</div>
<!-- MyBlogList END -->
このように間に</div>を入れてあげてください。
これで崩れが直ります。[さむあっぷ]
ただこれだと一番下にカウンターが表示されてしまうので
もし今表示されている所と同じ所にカウンターを表示させたい場合。
</div><!-- #links END -->
の直上に
<div style="text-align:center;margin:20px 0px;">
カウンターの設置コード
</div>
このようにいれてみてください。
すこし難しいかもしれませんが、解からない所がありましたら気軽にご質問してくださいませ。[にこっ]
ひろ子です。
アドバイス頂いた通りにやってみたら直りました！
ありがとうございました！！！
ご回答をすぐに頂いていたのに、こちらの返事が遅くなってすみませんでした(汗）
本当にありがとうございました。
助かりました！
アドバイス頂いた通りにやってみたら直りました！
ありがとうございました！！！
ご回答をすぐに頂いていたのに、こちらの返事が遅くなってすみませんでした(汗）
本当にありがとうございました。
助かりました！
コメントありがとうございました[くるっ]
Mac IE対策といってはなんですが、スタイルシートスタイルブックのIE用CSSの指定方法（http://www.stylesheet-stylebook.com/?p=29）の方法はどうでしょう？
これをやるとCSSファイルがどんどん長くなっていって、掛け軸みたいなファイルになってしまうんですが、ちゃんと表示されるそうです。
取り急ぎご参考まで。
Mac IE対策といってはなんですが、スタイルシートスタイルブックのIE用CSSの指定方法（http://www.stylesheet-stylebook.com/?p=29）の方法はどうでしょう？
これをやるとCSSファイルがどんどん長くなっていって、掛け軸みたいなファイルになってしまうんですが、ちゃんと表示されるそうです。
取り急ぎご参考まで。
強力林檎7500さんこんばんは。[ひよこ]
とても参考になるブログのご紹介ありがとうございました。
もっともっと勉強します！[さむあっぷ]
とても参考になるブログのご紹介ありがとうございました。
もっともっと勉強します！[さむあっぷ]
こんにちは、はじめまして。
とてもかわいくてダウンロードしたのですが、何度アクセス解析のタグ貼り付けて更新ボタンおしてもそれが反映されないのですが・・・。
ほかのヤツでは大丈夫でした。
どこか特別な場所でもあるのでしょうか。
初心者すぎてすみません[泣]
とてもかわいくてダウンロードしたのですが、何度アクセス解析のタグ貼り付けて更新ボタンおしてもそれが反映されないのですが・・・。
ほかのヤツでは大丈夫でした。
どこか特別な場所でもあるのでしょうか。
初心者すぎてすみません[泣]
Posted by む〜。 at 2005.09.30 08:34 | 編集
む〜。さんはじめまして。
返信が遅くなってしまい底辺失礼いたしました。
特別変わったところは無いはずなのでアクセス解析のタグが反映されないというのはないとおもうんですが・・・
ちなみにうちでは
</div><!-- #container END -->
の下にアクセス解析の設置タグを貼り付けております。
返信が遅くなってしまい底辺失礼いたしました。
特別変わったところは無いはずなのでアクセス解析のタグが反映されないというのはないとおもうんですが・・・
ちなみにうちでは
</div><!-- #container END -->
の下にアクセス解析の設置タグを貼り付けております。
初めまして。
こちらのテンプレートをお借りして使っております。
とてもセンスが良くて気に入っております。
どうもありがとうございます。
お聞きしたいことがありまして。。。エントリーする画像に白枠を付けたいと思っておりまして、知人に聞いたら
.entry_text img {
background: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
margin: 0px 5px 5px 0px;
padding: 3px;
}
をCSSに挿入するといいよ、と言われたんですが、やってみても上手くいきません。
なんだか場違いな質問かもしれませんが、よろしければ教えていただけないでしょうか？
どうぞよろしくお願い致します。
こちらのテンプレートをお借りして使っております。
とてもセンスが良くて気に入っております。
どうもありがとうございます。
お聞きしたいことがありまして。。。エントリーする画像に白枠を付けたいと思っておりまして、知人に聞いたら
.entry_text img {
background: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
margin: 0px 5px 5px 0px;
padding: 3px;
}
をCSSに挿入するといいよ、と言われたんですが、やってみても上手くいきません。
なんだか場違いな質問かもしれませんが、よろしければ教えていただけないでしょうか？
どうぞよろしくお願い致します。
Posted by minako at 2005.11.08 11:19 | 編集
先程、コメントしたminakoです。
お騒がせしてすいません。
白枠付けることができました。。。すいませんでした。
お騒がせしてすいません。
白枠付けることができました。。。すいませんでした。
Posted by minako at 2005.11.08 19:51 | 編集
minakoさんはじめまして。[くるっ]
テンプレートをご利用くださりありがとうございます。
またなにかありましたら気軽にコメントしてくださいね。
---
すみません追記です。
エントリー内の画像(IMGタグ)に枠をつけると絵文字にまで枠が付いてしまいます。
もし絵文字に枠が必要ない場合は
.main .emoji{ }の中へ
border:0;
padding:0;
を入れてください。
テンプレートをご利用くださりありがとうございます。
またなにかありましたら気軽にコメントしてくださいね。
---
すみません追記です。
エントリー内の画像(IMGタグ)に枠をつけると絵文字にまで枠が付いてしまいます。
もし絵文字に枠が必要ない場合は
.main .emoji{ }の中へ
border:0;
padding:0;
を入れてください。
この記事へコメントする
| HOME |
Recent Entries
Recent Comments
Recent Trackbacks
Archives
Categories
Tags
Links
Profile
cie
普段はlivedoor Blog用のテンプレートを作っています。コンテストに釣られて浮気。
本家はLinksのbuena suerte!からどうぞです。
本家はLinksのbuena suerte!からどうぞです。
Credit
Powered By FC2 BLOG