pb_puddle、pb_guitarcaseについて。
05/12/2006(Fri)

初めて共有テンプレートに登録します。
まだまだ未熟者ですので色々と不備があるかと思いますが気に入っていただけたら幸いです。またお気付きの点、ご感想などありましたらコメント欄よりご連絡ください。
共有テンプレート、pb_puddleとpb_guitarcaseについて。
*2007/4/29、pb_guitarcaseのデザインをリニューアルしました。
利用規約はこちらにまとめたので必ず一読ください。
以下は仕様についてです。
プラグイン非対応
プラグインに対応させる
フリースペースの使い方
以上。
- プラグイン非対応のため、サイドメニューには最低限必要と思われる項目を入れてあります。その他、加えたい項目がある場合、フリースペースをご利用ください。
- 9/11/2006にプラグイン対応にしました。
プラグインに対応させる
- こちらをテンプレートに書き加えてください。その際、非プラグイン対応部分を<!--not_plugin-->〜<!--/not_plugin-->で囲むのをお忘れないようお願いします。
- ただしプラグインに対応させる場合、プラグインをツリー化に対応させない限り、最新のコメントおよび最新のトラックバック欄のツリーが消え、通常のリストとして表示されます。
- プラグインに対応させた後にツリー化もしたいという場合、こちらを参考にご自身のプラグインの中身を書き換えてください。テンプレートは既にツリー化のスクリプトが組み込まれていますので、プラグインの設定のみでOKです。
フリースペースの使い方
- デフォルトではこのようになっています。
- 赤字の部分をメニュータイトルに書き換えてください。
- 青字の部分はメニューの中身となります。基本的にプラグインの中身(HTML編集の中身)をそのままコピペするだけでOKです。フォントのサイズやmargin/paddingの編集が必要であれば、コピペした内容を<div id="○○"></div>で囲んでCSSで個別に設定してください。デフォルトでは、<div id="free"></div>となっておりますので、CSSのこの部分をご自身で変更してくださっても構いません。
<h3>フリー1</h3>
<div id="free">ここに文章やHTMLを入力してください
改行する場所には<br>を入れてください</div>
以上。
comments
こちらのテンプレートなのですが左のメニューを
右側にしたい場合はどうすれば良いのでしょうか。。
またトップの写真を毎回ランダムで変えるような
事はできますか?宜しくお願い致します。
右側にしたい場合はどうすれば良いのでしょうか。。
またトップの写真を毎回ランダムで変えるような
事はできますか?宜しくお願い致します。
とおさん はじめまして。
右メニューについてですが、
スタイルシートの#mainと#menuを以下のようにしてみてください。赤字の部分です。
/*右メイン*/
#main {
width:560px;
float:left;
margin:60px 0px 0px;
padding:0px;
overflow:hidden;
}
/*左サイドメニュー*/
#menu {
width:180px;
float:right;
margin:60px 10px 0px 0px;
padding:0px;
overflow:hidden;
}
.entry_table{
width: 500px;
margin: 50px 0px 30px 20px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #E7CFA4;
border-bottom: 1px solid #E7CFA4;
}
marginの数値はご自身でお好きなように変えてみてくださいね。
またトップ画像についてですが、残念ながら写真をランダムにということはできません。
随時ご自身で画像を入れ替えていただくことになります。
右メニューについてですが、
スタイルシートの#mainと#menuを以下のようにしてみてください。赤字の部分です。
/*右メイン*/
#main {
width:560px;
float:left;
margin:60px 0px 0px;
padding:0px;
overflow:hidden;
}
/*左サイドメニュー*/
#menu {
width:180px;
float:right;
margin:60px 10px 0px 0px;
padding:0px;
overflow:hidden;
}
.entry_table{
width: 500px;
margin: 50px 0px 30px 20px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #E7CFA4;
border-bottom: 1px solid #E7CFA4;
}
marginの数値はご自身でお好きなように変えてみてくださいね。
またトップ画像についてですが、残念ながら写真をランダムにということはできません。
随時ご自身で画像を入れ替えていただくことになります。
ご返答ありがとうございます。
只今さっそく変更した所、左右は変わったのですが、
サイドバーのコメント欄等の枝分かれ部分が表示されず、
普通に上から順に表示されてしましいました。。
この枝分かれの派生部分も凄く気に入っていたので残念です。
こちらも右サイドバーにした場合に反映されるようにはできないのでしょうか?
宜しくお願い致します。
只今さっそく変更した所、左右は変わったのですが、
サイドバーのコメント欄等の枝分かれ部分が表示されず、
普通に上から順に表示されてしましいました。。
この枝分かれの派生部分も凄く気に入っていたので残念です。
こちらも右サイドバーにした場合に反映されるようにはできないのでしょうか?
宜しくお願い致します。
こんばんは。
こちらでWin IE6.0とMac Safari、Firefoxで確認しましたが、右メニューにしてもツリーが消えるという不具合は確認できませんでした。
まず、メニューとメイン(エントリ欄)の左右を入れ替えることで、ツリー化やメニューの中身が影響を受けることはありません。
とおさんはプラグインを有効に変えられたということはございませんか?
このテンプレートはあくまでプラグイン無効の状態でツリーが表示されるようになっています。プラグイン有効に設定した場合、ツリーは消えます。プラグイン有効にしてツリーを反映させる場合は当エントリ内の「プラグインに対応させる」の項目をご参考ください。
プラグインは無効のままであれば…
とおさんの動作環境はどのようなものでしょう。
ひとつ気になるのはMacのsafariでテンプレートの編集をするとツリー化が消えてしまうことがあるようなのです。私も経験があり、以前FC2の掲示板にも似たような症状が報告されていました。エンコードの関係と書いてあった気がするのですが、いまいち定かではありません(すみません!)。
私の経験上、safariでテンプレートの修正をしてツリー化が消えた場合、テンプレートをダウンロードし直し、safari以外のブラウザ(IEやFirefox)でカスタマイズをする方法でしか解決策は見つかりませんでした。もちろんこれはあくまで「safariでツリー化されたテンプレートのカスタマイズ」による不具合であって、safariでブログを表示させた場合ツリーが反映されないということではありません。
これといったご回答ができず申し訳ありませんが、上記にお心当たりないかいまいちど確認していただけませんでしょうか。
こちらでWin IE6.0とMac Safari、Firefoxで確認しましたが、右メニューにしてもツリーが消えるという不具合は確認できませんでした。
まず、メニューとメイン(エントリ欄)の左右を入れ替えることで、ツリー化やメニューの中身が影響を受けることはありません。
とおさんはプラグインを有効に変えられたということはございませんか?
このテンプレートはあくまでプラグイン無効の状態でツリーが表示されるようになっています。プラグイン有効に設定した場合、ツリーは消えます。プラグイン有効にしてツリーを反映させる場合は当エントリ内の「プラグインに対応させる」の項目をご参考ください。
プラグインは無効のままであれば…
とおさんの動作環境はどのようなものでしょう。
ひとつ気になるのはMacのsafariでテンプレートの編集をするとツリー化が消えてしまうことがあるようなのです。私も経験があり、以前FC2の掲示板にも似たような症状が報告されていました。エンコードの関係と書いてあった気がするのですが、いまいち定かではありません(すみません!)。
私の経験上、safariでテンプレートの修正をしてツリー化が消えた場合、テンプレートをダウンロードし直し、safari以外のブラウザ(IEやFirefox)でカスタマイズをする方法でしか解決策は見つかりませんでした。もちろんこれはあくまで「safariでツリー化されたテンプレートのカスタマイズ」による不具合であって、safariでブログを表示させた場合ツリーが反映されないということではありません。
これといったご回答ができず申し訳ありませんが、上記にお心当たりないかいまいちど確認していただけませんでしょうか。
初めまして。kazukoと申します。
テンプレートとても素敵でお借りしました。ありがとうございます。
ところで、質問を一つさせてください。
こちらのテンプレートに大きな写真を掲載しますと、幅が足りなくなり、端が切れてしまいます。改善する方法はありますでしょうか?初歩的な質問でしたら申し訳ありません。どうぞ宜しくお願いいたします。
テンプレートとても素敵でお借りしました。ありがとうございます。
ところで、質問を一つさせてください。
こちらのテンプレートに大きな写真を掲載しますと、幅が足りなくなり、端が切れてしまいます。改善する方法はありますでしょうか?初歩的な質問でしたら申し訳ありません。どうぞ宜しくお願いいたします。
とっても素適なテンプレートですね。
嬉しくなってしまいました。
シックで上品で・・・・・
感謝いたします。
嬉しくなってしまいました。
シックで上品で・・・・・
感謝いたします。
はじめまして。
気に入っていただけたようで何よりです。
エントリ幅についてですが、ブログを拝見させていただきました。(パン美味しそう〜)。
これについては後ほどエントリで説明しようと思っていますが、kazukoさんの場合、以下の青字の部分のように修正してみてください。5カ所です。(スタイルシート真ん中よりちょっと下あたりのエントリーの設定の部分です)。
エントリー枠全体の修正。
.entry_table{
width: 545px;
margin: 50px 0px 30px 0px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #E7CFA4;
border-bottom: 1px solid #E7CFA4;
}
エントリー枠とテキストの間のスペース(左右)の修正(かなりギリギリになります)。
.entry_body {
font-size:12px;
color:#666;
line-height:170%;
margin:0px;
padding:20px 10px;
}
画像とテキスト間の余白。
.entry_body img {
padding: 0px;
margin:5px;
}
最後にエントリタイトルも以下のように修正してください。テキストの文頭に揃えるためです。
h2 {
font-size:14px;
color:#8C8060;
margin:0px;
padding:10px 0px 0px 10px;
}
-----------
kazukoさんの場合、500pxと大きな写真をお使いですのでこのように少しずつスペースを稼いで大きくしていきましたが、デザイン的にはこれが限界かと思います。
くれぐれもプレビューで確認しながらお願いしますね。
気に入っていただけたようで何よりです。
エントリ幅についてですが、ブログを拝見させていただきました。(パン美味しそう〜)。
これについては後ほどエントリで説明しようと思っていますが、kazukoさんの場合、以下の青字の部分のように修正してみてください。5カ所です。(スタイルシート真ん中よりちょっと下あたりのエントリーの設定の部分です)。
エントリー枠全体の修正。
.entry_table{
width: 545px;
margin: 50px 0px 30px 0px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #E7CFA4;
border-bottom: 1px solid #E7CFA4;
}
エントリー枠とテキストの間のスペース(左右)の修正(かなりギリギリになります)。
.entry_body {
font-size:12px;
color:#666;
line-height:170%;
margin:0px;
padding:20px 10px;
}
画像とテキスト間の余白。
.entry_body img {
padding: 0px;
margin:5px;
}
最後にエントリタイトルも以下のように修正してください。テキストの文頭に揃えるためです。
h2 {
font-size:14px;
color:#8C8060;
margin:0px;
padding:10px 0px 0px 10px;
}
-----------
kazukoさんの場合、500pxと大きな写真をお使いですのでこのように少しずつスペースを稼いで大きくしていきましたが、デザイン的にはこれが限界かと思います。
くれぐれもプレビューで確認しながらお願いしますね。
stellaさん はじめまして。
とても嬉しいコメントありがとうございます。
stellaさんのインテリアやお花もとてもきれいですね。私も花を買ったり植えたりするのが大好きでメインブログでたまに紹介したりしています。
ところで、stellaさんも上のkazukoさん同様、写真のサイズが500px幅と大きめなので、気になるようでしたら修正してみてください。
それから、せっかくのタイトルが写真と重なって読みにくいかと思いますので、
h1 a:link, h1 a:visited {color:#fff; text-decoration: none;}
h1 a:hover, h1 a:active {color:#8C8060; text-decoration: none;}
.intro {
font-size:12px;
font-weight:bold;
color:#fff;
text-align:center;
margin:0px;
padding:15px 0px 0px 5px;
}
このようにすればとりあえず文字の色が白になります。よろしければどうぞ。
とても嬉しいコメントありがとうございます。
stellaさんのインテリアやお花もとてもきれいですね。私も花を買ったり植えたりするのが大好きでメインブログでたまに紹介したりしています。
ところで、stellaさんも上のkazukoさん同様、写真のサイズが500px幅と大きめなので、気になるようでしたら修正してみてください。
それから、せっかくのタイトルが写真と重なって読みにくいかと思いますので、
h1 a:link, h1 a:visited {color:#fff; text-decoration: none;}
h1 a:hover, h1 a:active {color:#8C8060; text-decoration: none;}
.intro {
font-size:12px;
font-weight:bold;
color:#fff;
text-align:center;
margin:0px;
padding:15px 0px 0px 5px;
}
このようにすればとりあえず文字の色が白になります。よろしければどうぞ。
お忙しいところ、ご丁寧にありがとうございます。
テンプレを少しいじるのだけでもこわごわですが、あまりに素適だったので、身の程知らずに写真と幅だけ・・・
色は変になったら大変なのでそのままにしておりましたが、ご助言のとおりやってみました。
これからも色々お世話になることと思いますが、どうぞよろしくお願い致します。
写真も本当はpb様のように、一枚を横幅一杯に入れたいのですが、私の能力では???です。
テンプレを少しいじるのだけでもこわごわですが、あまりに素適だったので、身の程知らずに写真と幅だけ・・・
色は変になったら大変なのでそのままにしておりましたが、ご助言のとおりやってみました。
これからも色々お世話になることと思いますが、どうぞよろしくお願い致します。
写真も本当はpb様のように、一枚を横幅一杯に入れたいのですが、私の能力では???です。

お忙しい中、ご親切にまた丁寧に教えてくださり本当にありがとうございました。
おかげさまでうまく行きました。
これからも素敵なテンプレートを始め、
写真やブログの記事なども楽しみにしています。
どうぞ宜しくお願いいたします。
おかげさまでうまく行きました。
これからも素敵なテンプレートを始め、
写真やブログの記事なども楽しみにしています。
どうぞ宜しくお願いいたします。
ブログ拝見させていただきました。
写真も大きめのを使用されたようでちゃんと収まっていますね。すてきです。
ヘッダ写真はなるべく横幅780px以上のものをお使いください。
小さいものだと縦横に並んでしまうか、1枚を真ん中に置いて余白は「塗りつぶし」状態になってしまうので。
それからブログタイトルですが、お節介ながらもう1つ。
h1 a:link, h1 a:visited {color:#fff; text-decoration: none;}
h1 a:hover, h1 a:active {color:#FFAFBD; text-decoration: none;}
こんな色はいかがでしょう。マウスを置いた時の色の設定です。今のままだとやはり見えにくいかなと思いましたので。面倒であれば放置してくださって結構です。
それから、エントリ記事内の写真のせいで、エントリが右に寄ってしまってますよね。
もし手間暇かけられるようでしたら、上のkazukoさん宛のコメントを参照の上(そのままコピペしてOKです)修正されることおすすめします♪
また何かありましたらご質問くださいませ。
写真も大きめのを使用されたようでちゃんと収まっていますね。すてきです。
ヘッダ写真はなるべく横幅780px以上のものをお使いください。
小さいものだと縦横に並んでしまうか、1枚を真ん中に置いて余白は「塗りつぶし」状態になってしまうので。
それからブログタイトルですが、お節介ながらもう1つ。
h1 a:link, h1 a:visited {color:#fff; text-decoration: none;}
h1 a:hover, h1 a:active {color:#FFAFBD; text-decoration: none;}
こんな色はいかがでしょう。マウスを置いた時の色の設定です。今のままだとやはり見えにくいかなと思いましたので。面倒であれば放置してくださって結構です。
それから、エントリ記事内の写真のせいで、エントリが右に寄ってしまってますよね。
もし手間暇かけられるようでしたら、上のkazukoさん宛のコメントを参照の上(そのままコピペしてOKです)修正されることおすすめします♪
また何かありましたらご質問くださいませ。
うまくいったようで何よりです。
こちらのブログはかなりテキトーですが、メインブログは楽しくやってますのでよろしかったら遊びにきてくださいませ。
また何かお気付きの点ありましたらこちらこそよろしくお願いいたします。
こちらのブログはかなりテキトーですが、メインブログは楽しくやってますのでよろしかったら遊びにきてくださいませ。
また何かお気付きの点ありましたらこちらこそよろしくお願いいたします。
本当に色々教えていただきありがとうございました。
こんなにご親切にご教授願えるなんて思ってもみなかったので、感激です。
これからもどうぞよろしくお願い致します。
本当にありがとうございました。
こんなにご親切にご教授願えるなんて思ってもみなかったので、感激です。
これからもどうぞよろしくお願い致します。
本当にありがとうございました。
stellaさん こんにちは。
うまく修正できたようで良かったです。
また何かありましたらご遠慮なく。
うまく修正できたようで良かったです。
また何かありましたらご遠慮なく。
post a comment
| ホーム |


















akipon(04/26)
pb(04/25)
akipon(04/25)
pb(04/25)
akipon(04/25)
pb(04/24)
ゆん(04/24)
kotori*(04/23)
pb(04/22)
kotori*(04/22)
pb(04/21)
kotori*(04/20)
anges*(04/18)
kotori*(04/17)
pb(04/17)
pb(04/17)
pb(04/17)
anges*(04/17)
ringo.ringo(04/15)