こそっとゴルフ・パンヤ

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

[04/17]　tw_2col_3_plg_boxy テンプレート
[04/16]　提供テンプレートについて
[04/16]　tw_2col_2 テンプレート
[04/16]　tw_3col_2 テンプレート
[04/16]　tw_2col_l_1_plg テンプレート

tw_2col_3_plg_boxy テンプレート

2006年04月17日 (月)

「tw_2col_3_plg_boxy」テンプレート

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

今まで作成したテンプレートをベースに、
シンプル且つちょぴりデザインを取り込んでみました＾＾；
どうですかね？
自分では結構気に入っているんですがｗ
各項目をシャドー付きBOXで囲んでいるので、名前の最後にboxyと付けました。
色の好みもあると思うので、CSSでご自由にカスタマイズして下さいませ（ぺこあにめ）

追記
右メニュー上部のCSSチェンジャーで使用しているCSSが欲しいとの要望を受けましたので、
ダウンロードできるように致しました。
カスタムベースでご利用ください。

Open↓

2カラム、プラグイン対応テンプレートです。
メニューの左右入れ替えはCSSにて容易に可能。

【特徴】
(1)横型カレンダー
土日色別表示。
通常カレンダーとの併用も可能です。

(2)パンくずリスト
ページ上部にパンくずリストを表示。
今現在見ているページがどこなのか一目で分かります。

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

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

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

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

※：サイドメニューのツリー化、新着マークについては、プラグインの編集が必要ですので、詳しくは下記URLをご参照ください。
JavaScript、CSSは対応済みです。
http://hiyokokun.blog2.fc2.com/blog-entry-106.html
http://tigerwoos.blog36.fc2.com/blog-entry-50.html

【メニューの左右入れ替えについて】
メニュー部分の左右入れ替えが、CSSにて容易に可能です。
赤字部分を入れ替えてください。

div#primary {
float : left; /* 記事部分を右にする場合は、”right”を指定してください。 */
width : 520px; /* 幅を520pxに設定 */
}

div#sidemenu {
float : right; /* メニュー部分を左にする場合は、”left”を指定してください。 */
width : 200px; /* 幅を200pxに設定 */
}

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

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

Close↑

10:48

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

(0)

(10)

提供テンプレートについて

2006年04月16日 (日)

2006.04.18 Update!
【機能比較】

テンプレート名	公開	カラム数	プラグイン対応	パンくずリスト	追記折りたたみ表示	コメント折りたたみ表示	サイドメニュー折りたたみ表示 (ON/OFF付)	サイドメニューツリー化	新着マーク
tw_3col_1_plg	〇	3	〇	〇	〇	〇		△ (※1)	△ (※1)
tw_2col_r_1_plg	〇	2 (右メニュー)	〇	〇	〇	〇		△ (※1)	△ (※1)
tw_2col_l_1_plg	〇	2 (左メニュー)	〇	〇	〇	〇		△ (※1)	△ (※1)
tw_3col_2	〇	3		〇	〇	〇	〇	〇	〇
tw_2col_2	〇	2 (入れ替え可能)		〇	〇	〇	〇	〇	〇
tw_2col_3_plg_boxy	〇	2 (入れ替え可能)	〇	〇	〇	〇		△ (※1)	△ (※1)

※1：プラグインの修正が必要

【テンプレート名の意味】
tw_2col_r_1_plg
tw：TigerWoosの略ですｗ。固定。
2col：カラム数。2colは2カラムテンプレ。3colは3カラムテンプレ。
r(またはl)：2カラムテンプレの場合、”r”は右メニュー、”l”は左メニュー。表記が無い場合は、入れ替え可能。
数字：バージョン番号
plg：プラグイン対応。表記が無い場合はプラグイン未対応。

【動作確認について】
提供しているテンプレートは以下のブラウザで動作確認しております。
・Sleipnir(1.6)
・IE(6.0)
・Firefox(1.5.0.2)
・Netscape（7.1）
・Opera(8.54)
テンプレートによっては、Netscape、Operaでは一部表示がずれる場合があります。

【HTMLの検証について】
提供しているテンプレートは、3WC Markup Validation ServiceでHTMLの正当性をチェックしています（XHTML1.0 Standard）。
また、スタイルシートは、W3C CSS 検証サービスで正当性をチェックしております。

11:48

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

(0)

(10)

COMMENT

by hayano7228

うっすさんの見てプロフィールのシール私も作ってみました。[げーあにめ]

by Tigerうっす

ぉ、はやさんも使いましたか！[わらあにめ]
これ、面白いですよねぇｗ
当分、設置していると思います( ﾟ∀ﾟ)･∵. ﾌﾞﾞﾊｯ!

ﾟ+.(ﾉ｡･ω･)ﾉ*.ｵｵｫｫ☆ﾟ･:*☆ by 新條ぴかる

テンプレが増えてる！！
さすがです

って、うっすさん今テンプレ触ってるのかな・・・ｗ
コメント画面来る前は前のテンプレだったのに、コメント画面来たら２カラムなったぁ～ｗ
すごく良い感じのテンプレですね^^
また。。ダンウンロードしちゃいそうです(A´･ω･)ﾌｷﾌｷ
ここんとこテンプレ改造ばかりでパンヤしてないのは内緒だよ(･rω･)ﾎﾞｿﾎﾞｿ

>ぴかるさん by Tigerうっす

ばーれーたーかー。
(⌒▽⌒)アハハ!
気晴らしにテンプレいじっている時に、たまたまぴかるさんがアクセスされたんですねｗ
雛形が一度できてしまうと、時間もそんなに掛からないので、また作っちゃいました。
実はもう一つBLOGを作っていて（実験用のBLOGなんですがｗ）、そっち用のテンプレが欲しかったのです。
今までのものとはちょっとイメージを変えてみました。
明日には公開されると思いますので、よかったらお試しをｗ
パンヤもぜひご一緒したいですね～。
最近は夜に島またはビーチ辺りのプライベートで対戦していることが多いので、
見かけたら声をかけてくださいね[ういんくあにめ]

テンプレお借りしてますm(._.)m by オウベトロス

　お邪魔いたしますm(._.)m
　テンプレtw_2col_3_plg_boxyを使わせていただいていますが、どうしても教えて頂きたい事があり、失礼とは思いましたが書き込みさせていただきます
　いわゆる、テキストの画像回り込みをやってみたのですが、プレビューでは美味くいっているのに、いざ公開すると画像の方が白く表示されないのですが・・・。
　FC2のQ&Aなどの対処法は一通り試して見ました。セキュリティーツールとの関係とかもチェックしたんですが、どうも解りません＞＜
　試しに別テンプレに変更したら、あっさり表示されていたので、テンプレの何処かをいじる必要があるのかも？と思い、ご本人に聞くのが一番早いかと・・・
　私としては、このテンプレがどうしても使いたいので（シンプルでありながら、綺麗で機能も充実してるので）お暇な時にでも結構ですので、ご教授いただければありがたいのですが＾＾；
　どうか、よろしくお願いしますm(._.)m

オウベトロスさん by Tigerうっす

はじめまして＾＾
テンプレのご利用、ありがとうございます。
(￣◇￣;)エッ？
テキストの画像回り込み、できませんか？
テキストを画像の下ではなく、横にもってきたいんですよね？
テンプレやCSSでは特別なことはやっていないので、
<br cleear=all>を削除して、</a>の横にテキストを記述すればできると思うのですが。
最新記事の最初の画像でやってみましたので、ご覧ください。
右メニューの一番下「Style Changer」でtw_2col_3_plg_boxyを選択すれば、該当のテンプレで表示状態を確認できると思います。

もし可能なら、その画像が白く表示されない状態を見せていただければ、
何か解決策が見つかるかもしれません。

早速のご回答ありがとうございます＾＾ by オウベトロス

　お忙しい所コメント有難うございます
　<br clear="all">を削除してテキストを記述すると、挿入した画像の一番したの行からテキストが表示されますよね（新着のパンヤゴルフの記事の顔文字、拝見いたしました、位置的にあそこから確かに始まります）
　いくつか文章をかくと、回り込むのは一行だけで、あとは普通に下に流れてしまうようで、結局一行のみの回り込みという感じになります。これでは、回り込ませる意味があまりないので、アップした画像ファイルのタグの最後に<align="left">を入れて、テキストを、画像右側の空白部最初から表示されるようにしてみました。
　プレビューでは美味くいって、ちゃんと画像の頭とテキスト書き出しの頭が同じ位置で始まり、表示も問題なかったのですが、保存して公開、ブログ確認してみたら、回り込み指定した画像のみ４点が表示されず（でも画像の部分は確保されていて、そこをクリックすると、いわゆる別窓での表示はされる）状態です。
　現在もそのままＵＰしてありますので、ＵＲＬから一度見ていただければと思います＾＾；（最新記事で、しかもそれしか、実質上げてないので、直ぐ解るかと・・・＾＾；）
　私の要求自体が無理なんでしょうか＾＾；

>オウベトロスさん by Tigerうっす

align="left"を指定してでの回り込みだったのですね。
で、こちらでも画像が表示されない現象を確認しました。
他のテンプレでは表示されるのも確認しましたので、
違いを考えると、どうやら前面のボックスの背景色を白で塗りつぶしているのが原因のようです。

.entry {
position: relative;
top: -5px;
left: -5px;
padding:0px 5px 5px 5px;
border:#0000ff 1px solid;
background-color: #ffffff;　←これが原因
}

この指定は裏の紫色のBOXと重ねてシャドーを作るために必要な指定なのですが、
他のブラウザ（FirefoxやNetscape）では問題なく表示されるので、IEのバグの様な気がします＾＾；
この現象を回避するために、imgタグに「style="position: relative; z-index: auto;"」（ボックスの重なりの順序）を指定したらIEでも表示できるようになりました。
でも、画像を貼るたびにこの指定を追加するのも面倒くさいので、
CSSでimgを定義しているところに追加してみてください。

img {
border:none;
position: relative;
z-index: auto;
}

一応問題はクリアされると思います。
最新記事の追記部分の画像で確認できます。

直りました＾＾ by オウベトロス

　ちょうどFireFoxを入れて確認してみようかと思っていた所に、回答ありがとうございます＾＾
　先ほどＣＳＳを書き換えて見たところ、チャンと表示されました。
　ブラウザの相性で、もしや要求自体が無理かと思っていたのですが、これで心おきなく更新できます＾＾

　長々とご迷惑おかけしましたm(._.)m

>オウベトロスさん by Tigerうっす

実はこの問題は少々悩みました＾＾；
でも解決できて、よかったです＾＾
今後とも、このテンプレをかわいがってやってくださいませ（ぺこ）

コメントを閉じる▲

tw_2col_2 テンプレート

2006年04月16日 (日)

共有テンプレート * ブログ

tw_2col_2 テンプレート

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

Open↓

2カラムテンプレート。
プラグインには非対応です。
メニュー部分の左右入れ替えは、CSSにて容易に可能。

”tw_2col_r_1_plg(tw_2col_l_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"

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

【メニューの左右入れ替えについて】
メニュー部分の左右入れ替えが、CSSにて容易に可能です。
赤字部分を入れ替えてください。

div#primary {
float : left; /* 記事部分を右にする場合は、”right”を指定してください。 */
width : 520px; /* 幅を520pxに設定 */
}

div#sidemenu {
float : right; /* メニュー部分を左にする場合は、”left”を指定してください。 */
width : 200px; /* 幅を200pxに設定 */
}

【コメント折りたたみ表示について】
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;
}

Close↑

09:16

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

(0)

(7)

COMMENT

by takeru

管理人さん初めまして！
管理人さんの作ったスキンを使わせてもらってます☆

質問なんですけど、TOP画像はどうすればかえることができるんですか？？
どの部分に画像のurlを挿入すればｲｲんですか？

こんな質問ですいません。。。

>takeruさん by Tigerうっす

はじめまして＾＾
テンプレのご利用、ありがとうございます[ぺこあにめ]

TOP画像の入れ替え方法の説明が抜けていましたね[ひやりあにめ]
ごめんなさいペコリ(o_ _)ｏ))
TOP画像はスタイルシートのheaderを定義しているところで指定しているので、
ファイルをアップロードしたら、下記のbackground-image部分を差し替えてください。

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;
}

よろしくお願いいたします。

by takeru

ありがとうございまっす！！！！！！
できましたぁぁぁぁー！！！！！！！
よかったら覗きにきてください・・・っても音楽なBLOGですが。

>takeruさん by Tigerうっす

できましたか[ぐっど]
よかったです＾＾
後ほど拝見に伺いますね～

質問 by おんじ

はじめまして。
こちらのテンプレートを使用させていただいています。
超初心者ながら色々試行錯誤しているのですが、質問があります。

日記タイトルの前に青い丸いアイコンがありますが、これを削除もしくは変更する時はどこを操作すればよろしいのでしょうか？

すみません、教えていただけると助かります。

おんじさん by Tigerうっす

おんじさん、はじめまして。

青い丸いアイコンは、
テンプレのHTML編集で
http://blog36.fc2.com/t/tigerwoos/file/list_mark01.gif
の記述を探していただき、お好きなお好きな画像をアップロード後、書き直してください。

このBLOGは仕事の都合で半ば休業中なので、
なかなかお返事することができません。
回答遅くなりすみませんでした。
[ぺこあにめ]

こんにちわ by 有砂

はじめまして。
テンプレートが奇麗なので愛用させていただいています。
本日、このような症状が発生したので、ちょとお問い合わせ、ご教授して頂けたらと思いましてコメントしました。
今まで、普通に使えていたのですが、本日ある記事を投稿たら10個表示されるはずのが1個になってしまいました(エントリーリストと記事が１個になってしまった)。
ブログの設定を確認するも1ページに表示する記事の数は10の設定になっている。
あれー？と思い、新規に追加したエントリーを削除したのですが、元に戻らず。
再度新規に記事を投稿するも1個のまま。
FC2に問い合わせると、「<%topentry_comment_list>を有効にする」の”有効にする”が原因になっているとメールにて回答。
ブログ設定を”無効にする”に変更すると元に戻りました。
ただ、このままだとコメントの折りたたみが利用できないので、再度”有効にする”に設定しなおす。
そうすると、また1個しか表示されない・・・orz

これは、何か私が悪い事でもしたのでしょうか・・・
今まで普通に使えていたのですが。
私のトコロで変更したのは、TOPの画像ぐらいで・・・
あ、あと解析を<body>の直下に追記しています。

</head>
<body>




<div id="container">
こんな感じなのですが・・・

コメントを閉じる▲

tw_3col_2 テンプレート

2006年04月16日 (日)

共有テンプレート * ブログ

tw_3col_2 テンプレート

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

Open↓

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;
}

Close↑

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_l_1_plg テンプレート

2006年04月16日 (日)

共有テンプレート * ブログ

「tw_2col_l_1_plg」テンプレート

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

Open↓

2カラム左メニュー、プラグイン対応テンプレート。

”tw_3col_1_plg”の2カラム左メニューバージョンです。

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

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

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

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

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

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

【TOP画像の入れ替えについて】
トップページの画像はダミーですので、740*220pxでお好みの画像と差し替えてください。
そのままお使い頂いても結構です。
画像はスタイルシートで定義しています。
お好みの画像をファイルアップロードしたら、
その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;
}

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

Close↑