こそっとゴルフ・パンヤ

NEW ENTRIES

　← tw_2col_2 テンプレート | TOP | tw_2col_l_1_plg テンプレート →

tw_3col_2 テンプレート

2006年04月16日 (日)

tw_3col_2 テンプレート

~~公開申請中。~~
2006.04.18 公開されました。

3カラムテンプレート
プラグインには非対応です。

”tw_3col_1_plg”との違いは、
・サイドメニュー折りたたみ表示追加
・プラグイン非対応
の2点です。

【特徴】
(1)パンくずリスト
ヘッダー部下にパンくずリストを表示。
今現在見ているページがどこなのか一目で分かります。

(2)追記折りたたみ表示
個別記事ページに飛ばずに、追記の表示をON/OFFできます。
初期状態は非表示になっています。

(3)Indexページでのコメント折りたたみ表示
個別記事ページに飛ばずに、コメントの表示をON/OFFできます。
初期状態は非表示になっています。

(4)サイドメニュー折りたたみ表示(ON/OFF付)
サイドメニューの各項目の表示ON/OFFができます。
初期状態のON/OFFは自由選択できます。
サイドメニュー項目名の▽▲をクリックしてみて下さい。

(5)サイドメニューツリー化
最近の投稿記事、コメント、トラックバックをツリー表示しています。

(6)新着マーク対応
24時間以内に投稿された記事、コメント、トラックバックに新着マークを表示します。

一応W3C XHTML1.0に準拠してます。記事記述が準拠していることが前提ですが＾＾；
カラーリングなどはCSSにてお好みに合わせて変更して下さいませ。

【サイドメニューの追加について】
サイドメニューを自由に追加、削除できます。
プロフィール部分を例に説明いたしますと、
h3タグのID属性とその下のdivタグのID属性には共通して”profile”という単語が入っています。
この”profile”が本テンプレートの最下部に記述されているサイドメニュー折りたたみスクリプトの
InitFoldNaviファンクションの定義とリンクしています。
このInitFoldNaviファンクションでページをオープンしたときの表示ON/OFFを定義しています。

たとえば、カウンターを設置する場合の例として、

<h3 id="cntname">COUNTER </h3>
<div id="cntlist" class="menubody">
カウンターの記述
</div>

を追加し、さらに、テンプレートの最下部に記述されているサイドメニュー折りたたみスクリプトの
InitFoldNaviファンクションに、

FoldNavigation('cnt' ,'on',false); // ←初期表示でオープンにする場合は"on"、閉じている状態は"off"

を追加します。
（青字部分を合わせる）

【コメント折りたたみ表示について】
INDEXページでのコメント折りたたみ表示を行うには、環境設定の変更が必要です。
管理者ページ＞環境設定の変更＞ブログの設定ページを開き、
一番下「アドバンス設定（上級者用）」の「<%topentry_comment_list>を有効にする」を”無効にする”から”有効にする”に変更します。

【TOP画像の入れ替えについて】
トップページの画像はダミーですので、900*230pxでお好みの画像と差し替えてください。
そのままお使い頂いても結構です。
画像はスタイルシートで定義しています。
お好みの画像をファイルアップロードしたら、
そのURLをスタイルシートの以下の赤字部分を差し替えてください。

div#header {
padding:4px 10px;
height:230px;
background-image:url(http://blog36.fc2.com/t/tigerwoos/file/blue_sky_bg_900px.jpg);
text-align:right;
color:#0000ff;
font-size:12px;
background-repeat:no-repeat;
}

09:05

[BLOGいじり]テンプレート

(0)

(33)

COMMENT

画像が変えられないのですが。。。 by Kalaka

お借りしてますが、画像が変わらず、元に戻しても元の青空が反映されません
お教えくださるととても勉強になります

>Kalakaさん by Tigerうっす

はじめまして。
テンプレートのご利用、ありがとうございます。
KalakaさんのBLOGのスタイルシートを拝見させて頂きました。
余分な改行が入っているようです。

div#header {
padding:4px 10px;
height:230px;
background-image:url ←ココに改行が入っている
(http://blog36.fc2.com/t/tigerwoos/file/blue_sky_bg_900px.jpg);
text-align:right;
color:#0000ff;
font-size:12px;
background-repeat:no-repeat;
}

改行を削除して頂ければ、直ると思います。
記事内の「TOP画像の入れ替えについて」の説明では改行されているように見えてしまいますね＾＾；
コピー＆ペーストして頂ければ分かると思いますが、改行マークは入っていないのです。
紛らわしい表示で失礼いたしました。
それではよろしくお願いいたします。

ビッグ・マハロ！ by Kalaka

わぁ～こんな小さな事でも大きく影響するなんて[おみごとあにめ]
ありがとうございました。後色々と頑張って見ます[にや]
ありがとうございました、そしてまた解らない事があったら聞きに来ると思います。その時はよろしくです[ぴーす]

>Kalakaさん by Tigerうっす

解決されたようで、よかったです。
ちょっとしたミスが、思わぬ結果を生むんですよねぇ。
また何かありましたら、お気軽にお越しください。

画像を並べるには？ by Ｋａｌａｋａ

小さい画像を並べるにはどうすればいいですか？
こちらにお返事を頂けると見に来れますのでお願いします

>Ｋａｌａｋａさん by Tigerうっす

画像を貼り付ける際に付けられるimgタグの後ろに<br clear="all">があると思いますが、これを削除すれば並べられると思いますけど。

Top 画像 by Ｋａｌａｋａ

Ｔｏｐ画像に写真を並べたいのですが、どうすればよいでしょうか？

>Ｋａｌａｋａさん by Tigerうっす

TOP画像はCSSのbackground-imageプロパティで実現していますが、
一度に複数のurlを指定できません（将来はできるようになるらしいですが）。
(1)方法1
画像編集ソフトを用いて並べたい画像を一つの画像にまとめ、background-imageで指定するのが手軽なやり方だと思います。
(2)方法2
定期的に並べる画像を変更したい等の理由でCSSで実現したいならば、下記の方法で実現できます。
たとえば、100px×100pxの二つの画像を並べたいなら、

<div id="header">
<h1><a href='<%url>' name='pagetop' id='pagetop'><%blog_name></a></h1>
<div>

を
<div id="header1">
<div id="header2">
<h1><a href='<%url>' name='pagetop' id='pagetop'><%blog_name></a></h1>
<div>
<div>

などと変更し、CSSで、

#header1{
height:100px; /* 画像が入る高さ */
background-image : url(1つ目の画像URL);
background-repeat: no-repeat;
background-position: 0px 0px; /* 左上から表示 */
}
#header2{
height:100px; /* 画像が入る高さ */
background-image : url(2つ目の画像URL);
background-repeat: no-repeat;
background-position: 100px 0px; /* 左上から100pxの位置に表示 */
}

と指定すれば、二つの画像を並べられます。
BLOGタイトルやBLOGの概要部分の位置調整が必要になる場合があるかと思いますので、
方法2によるカスタマイズは自己責任でお願いいたします。

まはろ by Ｋａｌａｋa

試してみます
ありがとうございます[ういんくあにめ]

>Kａｌａｋaさｎ by Tigerうっす

色々試してみてくださませー。

ダメでした。。。。 by Ｋａｌａｋa

画像が重なってしまいます
どうしてぇ～[わーんあにめ]

>Ｋａｌａｋaさん by Tigerうっす

画像サイズまたは開始位置が違うんじゃないかと思いますが、
その重なっている状態を見ないことには、なんとも言えません。

でも～ by Ｋａｌａｋa

重なったままのブログを更新できないし。。。。
左側に３つの写真が重なるんですが。。。

>Ｋａｌａｋaさん by Tigerうっす

#header1{
height:100px; /* 画像が入る高さ */
background-image : url(1つ目の画像URL);
background-repeat: no-repeat;
background-position: 0px 0px; /* 左上から表示 */
}
#header2{
height:100px; /* 画像が入る高さ */
background-image : url(2つ目の画像URL);
background-repeat: no-repeat;
background-position: 100px 0px; /* 左上から100pxの位置に表示 */
}
赤字部分の画像の開始位置は正しいですか？
これをそのままコピペしてもダメですよ。
ご自分の用意した画像サイズに合わせて数値を変更しないと。
該当部分のHTML、CSSを見ないことにはこれ以上なにも言えません。

えぇ～ん by Ｋａｌａｋa

100ｘ100の画像だから二つ目は一つ目分の100の次に表示するようにセットするわけですよね。
もう少し頑張ってみますね[ひやりあにめ]
ありがとうございます

諦めました by Kalaka

な～んども色々と手をほどこしましたが、成功せずじまい[かなし]
画像の並びは諦めました[わーんあにめ]

最後にもう一つだけ！ by Kalaka

一つの画像をセンターに持ってくるにはどこを触れば良いですか？
paddingやback graundのpxのナンバーを変えても何も変化無しです。最後に一つお願いします[ひやりあにめ]

>Kalakaさん by Tigerうっす

(￣- ￣ ) ンー　できませんか・・・
おかしいなぁ。
サンプルを作ってみましたので、下記URLを見てください。
http://blog36.fc2.com/t/tigerwoos/file/test2.html
ソースを見ていただければ、分かると思います。
（ソースの見方はブラウザのトップメニューの”表示”から”ソース”を選択）
スタイルシートは、headタグ内に書いてます。

画像のセンタリングは、
background-position : center top;
と指定すればOKです。
上記サンプルに合わせて載せてます。
スタイルシートの詳細は、下記サイトが便利ですので、
勉強してみてください。
http://www.htmq.com/index.htm

ご親切に。。。 by Kalaka

ありがとうございます。
再度頑張ってみます、それに教えて頂いたこのサイトとっても解りやすいですね。勉強します[あせ]

管理人のみ閲覧できます by -

お恥ずかしい。。。。 by Kalaka

今見つけました[それ]何が問題だったのか。。。。
background を backgraund　とタイプミスでした。
これまた、チョットしたミスが大きく影響するのですね。
本当にありがとうございます。こんなに親切に対応してくださるテンプの提供者は初めてです。感謝[おみごとあにめ]

>モニカさん by Tigerうっす

管理者のみに公開になっているので、お返事をどこにしようか迷ったのですが、ここに記述させていただきます。
tw_3col_2テンプレートはプラグイン非対応ですので、
このままではプラグインのフリーエリアを折りたたむことはできません。
下記方法のどれかをお試しください。

方法１：ご自分でメニュー項目を追加する。
右メニューや左メニューを表示する部分がテンプレート中にありますので、
そこにご自分でHTMLを記述し、メニュー項目を追加します。
追加したメニュー項目を折りたたむ方法は、
このテンプレートの記事の中【サイドメニューの追加について】に記述しています。

方法２：プラグインの記述を追加する
プラグインフリーエリアのみを用意したプラグインカテゴリーを用意し、折りたたみ処理を施します。
たとえば、プラグインカテゴリー３をフリーエリア専用にした場合、
メニューの任意の位置に、


<h3 id="<%plugin_third_description>name"><%plugin_third_title></h3>
<div class="menubody">
<div class="plugin_content" id="<%plugin_third_description>list">
<%plugin_third_content>
</div>
<%plugin_third_description2>
</div>


と記述します。
プラグインメニューの折りたたみ方法は、ここで書くと長くなるので、
下記サイトに詳しく書かれていますので、そちらをご参照ください。
「プラグインの折りたたみその2」がよいでしょう。
http://bisco.blog2.fc2.com/blog-entry-355.html
この場合、折りたたみスクリプトはすでにテンプレの最後に記述していますので、プラグインの説明文の変更、スクリプトの一部追加のみでOKなはずです。

方法３：プラグイン対応のテンプレを使用し、それに折りたたみ処理を施す。
tw_3col_2のプラグイン対応版が”tw_3col_1_plg”です。
このテンプレをご利用いただき、折りたたみ処理を施します。
折りたたみのカスタマイズ方法は、方法2で紹介したサイトを参考になさってください。
なお、このテンプレには折りたたみスクリプトは記述していません。

>Kalakaさん by Tigerうっす

無事解決なさったようですね＾＾
よかったです[くらっかー]
正しく記述しているはずでも、うまく動かない場合は、
多くはスペルミスしています。
当然思った通りの動きはしてくれません。
スペルミスを防ぐには、自分でタイプするのではなく、同じ記述をしている部分をコピーして使うのがいいと思いますよ。

管理人のみ閲覧できます by -

>モニカさん by Tigerうっす

Top画像を中央に移動するのは、
スタイルシートに下記の赤字の様に追加してください。
また、サイトタイトルを左にするには、黄色部分を変更して下さい。

div#header {
padding:4px 10px; /* ←位置調整 */
height:230px;
background-image:url(http://blog58.fc2.com/m/monika2525/file/blog_flower.gif);
text-align:left; /* rightからleftに変更 */
color:#0000ff;
font-size:12px;
background-repeat:no-repeat;
background-position:center top; /* ←追加 */
}

サイトタイトルは単純に左に寄せると、画像の文字と重なってしまう様なので、
上記の紫部分や、下記の紫部分で調整してくださいね。

h1 {
color:#0000ff;
font-size:18px;
margin:10px;
padding-top:160px; /* サイトタイトルの上からの位置 */
padding-right:10px; /* サイトタイトルの左からの位置 */
}

この部分のmarginやpaddingの指定の仕方は、ちょっとソースが汚いので、位置調整するのは面倒くさいかもしれません＾＾；
ごめんなさい。
サイトタイトルの上からの位置は、
padding-top:10px;
にすると、大体現在の状態に近づけると思います。

スタイルシートについては、下記のサイトが分かりやすいと思いますので、参考になさってください。
http://www.htmq.com/index.htm

お体の調子はいかがでしょうか？
お大事になさってくださいね。

こんばんは by モニカ

[おみごとあにめ]
本当にありがとうございます＾＾
うれしいです。できました＾＾
左部分カキコあったら分かりやすいですね＾＾
いつもいつも足を運んでしまいました＾＾
これからもよろしくおねがいします。
新しいテンプレート楽しみです。ここのパンや絵文字もたのしそうですね＾＾

>モニカさん by Tigerうっす

できましたか！
よかったです＾＾
今後ともよろしくお願いいたします。
新作テンプレ・・・いつになるかなぁ[ひょえ]
よかったらパンヤ絵文字も使ってみてくださいね。

管理人のみ閲覧できます by -

minaさんへ by Tigerうっす

コメント非表示になっているので、どこにお返事しようか迷ったのですが、
ここで返答させていただきます。
今、サイトを拝見させて頂きました。
特に表示の崩れは無いように見えたのですが、
画像サイズを変更されたのでしょうか？

このテンプレは中央部分は横460pxに設定していますので、
画像もこのサイズに収まるようにしないと表示が崩れてしまいます。
このサイズ以上の画像を使っている場合、残念ながら回避策は無いかと思います。
お手数ですが、画像サイズを変更いただくか、
中央カラムのサイズを変更するしか方法はないと思います。
どうかご了承ください。

お返事遅くなり、ごめんなさい。
本日自宅のネット環境が復旧したもので＾＾；
楽しいBLOGライフをお過ごしください。

おはようございます by MARI

はじめまして[ぺこあにめ]
さっそくですが
「http://blog36.fc2.com/t/tigerwoos/file/list_mark01.gif」
こちらの画像がどうしても変えられなくて
果てしなく悩んでいます[あれ]
どこをいじればかえられますか？
ご指導お願いします[わーんあにめ]

>MARIさん by Tigerうっす

MARIさん、はじめまして＾＾
このリストマークですが、テンプレートの222行目と255行目のh2タグ内で定義しています。
<h2> <img src="http://blog36.fc2.com/t/tigerwoos/file/list_mark01.gif" width="19" height="19" style="vertical-align:middle" alt="リストマーク" /> <%sub_title>の記事一覧</h2>

お好みのマークをファイルアップロードしたら、
そのアドレスを上記青字部分に指定してください。
また、その横幅、高さも赤字部分を書き換えてくださいね。
成功をお祈りします。

ありがとうございました by MARI

無事を変更することができました[ぺこあにめ]
2箇所あるところを1箇所しか差し替えてなかったのが
原因だったみたいです[ぎょ]
ありがとうございました[はーとあにめ]

カスタマイズについて by めぐ

初めまして。
色々探していてこちらに辿りつきました。
今更ですが、こちらのテンプレをお借りしたかったのですが使いたいものが３カラムの折りたたみでプラグイン対応が欲しかったんです。
でもなくて。。。
３カラム折りたたみでプラグイン対応に出来ますか？
もしくは、折りたたみの方法を教えて頂けないでしょうか？
折りたたみは他サイトで載っていて出来たのですが、こちらの様に記憶？する事が出来ません。
来た人が見たいメニューのみ開いて、次来た時も前回と同じメニューを開いて置きたいのです。
方法は内緒なのでしょうか？
お返事お待ちしております。[ぺこあにめ]

コメントを閉じる▲

　← tw_2col_2 テンプレート | TOP | tw_2col_l_1_plg テンプレート →