sunny's blog

sunnyが読んだ本やマンガの覚書ブログです。

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このページのトップへ
「まぁたカスタマイズかい!」

と飽きられてしまっているかも。
でもすみません、また珈琲娘です。

「折りたたみ」がどういうものかというと、左側のメニューの

最近の記事[+]

とかなっているものがそうです。
[+]が出ているメニューは「折りたたんで」あります。

[+]を押すと開き、[-]を押すと閉じます。

実は、ツリー化と同じくらいコレがしたかったんですよ。


ブロランバナー小
↑メニュー横の[+][-]をぽちぽちしてみて下さると嬉しいです^^
 ついでに、その上の緑のバナーかこちらもクリックしてくださると、
 もっと嬉しいです



覚書代わりに、今回行った作業を詳しく説明します(プラグイン対応テンプレート「coffeegirl」です)。

今回お世話になったのは「アジアンビートカンケリキッズさん」です。
どうもありがとうございました。

ここでは上記サイトさんに書かれている通りにsunnyが行った作業を、そのまま書いてあるにすぎず、まる引き写しではありませんので、実際に折りたたみしたい、という方は「アジアン~」さんのサイトを読んだ方が判りやすいです
(coffegirlユーザーの方は、ここに書いてある通りで出来るはずですが)。


「管理者ページ」→「環境設定:テンプレートの設定」→

折りたたみたいテンプレートの編集・修正を選択します。
(最初に今のHTMLをメモ帳などに保管してください。)

上のほうのウィンドウ「HTMLの編集」を下のほうにスクロールすると、おそらく一番下から2行目あたりに

</body>

という記述がありますので、その記述の直前(ツリー化等を行っている場合ツリー化の直前)に、こちら↓を挿入します(表の中をそのままコピー&貼り付けして大丈夫です)。


<!折りたたみスクリプトここから>
<script type="text/javascript">
<!--
function InitFoldNavi() {
FoldNavigation('newentry','off',false); // 最新エントリ
FoldNavigation('entry' ,'on' ,true); // ページエントリ
FoldNavigation('comment' ,'on' ,false); // 最新コメント
FoldNavigation('tb' ,'on' ,false); // 最新トラックバック
FoldNavigation('archive' ,'off',true); // アーカイブ
FoldNavigation('link' ,'on' ,true); // リンク
FoldNavigation('category' ,'off',false); // カテゴリー    
FoldNavigation('profile' ,'off',false); // プロファイル
}
function FoldNavigation(idName,initMode,viewNum) {
var openMark = '▽'; /* 閉じている場合に開くためのマーク */
var closeMark = '△'; /* 開いている場合に閉じるためのマーク */
var preMark = true; /* マークの挿入位置。タイトルの前なら true、タイトルの後ろなら false */
var idTitle = Array(idName,'name').join('');
var idList = Array(idName,'list').join('');
var objTitle = this.document.getElementById(idTitle);
var objLists = this.document.getElementById(idList);
if (!objTitle || !objLists) return;
var dispMode = objLists.style.display;
if (!dispMode) {
var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join('');
var insMark = new Array();
var insText = new Array();
insMark[insMark.length] = Array('<a class="foldmark" href="#" onclick="',tmpText,'" onkeypress="',tmpText,'">').join('');
insMark[insMark.length] = (initMode == 'off') ? openMark : closeMark;
insMark[insMark.length] = '</a>';
if (preMark) insText[insText.length] = insMark.join('');
insText[insText.length] = objTitle.innerHTML;
if (viewNum) {
var objItems = objLists.getElementsByTagName('li');
insText[insText.length] = Array(' <span>(',objItems.length,')</span>').join('');
}
if (!preMark) insText[insText.length] = insMark.join('');
objLists.style.display = (initMode == 'off') ? 'none' : 'block';
objTitle.innerHTML = insText.join('');
} else if (initMode == 'chng') {
var objMarks = objTitle.getElementsByTagName('a');
for (i=0;i<objMarks.length;i++) {
if (objMarks[i].className == 'foldmark') {
objMarks[i].firstChild.nodeValue = (dispMode == 'none') ? closeMark : openMark;
}
}
objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
}
}
InitFoldNavi(); // ナビゲーションの折り畳み
// -->
</script>
<!折りたたみスクリプトここまで>
スクリプト作成者:「JUGEMカスタマイズ講座」takkyunさん
(Javaスクリプトをそのまま転載するのはマナー等、問題あるでしょうか? 詳しい方、ご指導くださいませ。悪意は毛頭ございませんので、差し支えありましたら即直しますm(_ _)m)

sunnyの場合、折りたたみたいメニューは全て「プラグインカテゴリー1」でしたから、HTMLの中から↓を探し、青字部分を切り取ってメモ帳などに貼り付けて保存しておきます。

<!--plugin_first-->
<h3 style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</p>

<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
<!--/plugin_first-->


また、赤字の部分は削除します。

折りたたみたいメニューがプラグインカテゴリー2や3にある方は、

<!--plugin_second-->~<!--/plugin_second-->
<!--plugin_third-->~<!--/plugin_third-->

を探して同様にします。
1と2の両方にあるときなどは、両方について同じようにします。

(HTMLのプラグイン部分の記述が上記以外の場合は、アジアンビートカンケリキッズさんの「HTML変更例2」を参照してください。)

ここまででテンプレートのHTML編集は終わりです。「更新」して今度は「環境設定:プラグインの設定」を選択してください。
(くれぐれも元のHTMLをメモ帳などに保管してからにしてください。)

先ほど、テンプレートのHTMLから切り取った青字のコチラ↓を見てみます。

<h3 style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3>


赤字部分は削除します。
残ったのはコレだけ↓かもしれません。

<h3>~</h3>

コレは、メニューのタイトルに関する記述です。さきほどいじったプラグインカテゴリーに入っているすべてのプラグインHTMLの上に、こちらを使ってタイトルを書いておきます。

例:最近の記事
<h3 >最近の記事</h3>
<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
</li>
<!--/recent-->
</ul>

折りたたまない場合、書き足すのは青字部分のみです。「最近の記事」はそれぞれのプラグインに見合った、好きなタイトルに書き換えられます。(例:「最近のコメント」「最近のトラックバック」など)

折りたたむ場合はさらに、↓このように青字&ピンク字部分を書き足します。

例:最近の記事

<h3 class="side_title" id="newentryname">最近の記事</h3>
<div id="newentrylist">
<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
</li>
<!--/recent-->
</ul>
</div>


ピンク字部分(nameとlist)はそれぞれのプラグインに応じて下を参照して書き換えます。
nameが先、listが後です。


ページエントリーリスト
タイトル:entryname
本体:entrylist
最新エントリーリスト
タイトル:newentryname
本体:newentrylist
最新コメントリスト
タイトル:commentname
本体:commentlist
最新トラックバックリスト
タイトル:tbname
本体:tblist
リンクリスト
タイトル:linkname
本体:linklist
カテゴリーリスト
タイトル:categoryname
本体:categorylist
アーカイブリスト
タイトル:archivename
本体:archivelist
ユーザーリスト
タイトル:profilename
本体:profilelist


ご苦労様でした。これで折りたたみは完成したはずです。

ただし、coffeegirlユーザーの方は、メニューを開くと背景画像が入ってしまっていると思います。これを消します。

テンプレートの編集に戻り、下のウィンドウ「スタイルシート」の中ほどに

/* その他 */

という記述を探し、その下に

div#○○list { background-image: none; }

↑これを貼り付けると消えます。

例:sunnyのスタイルシートより
/* その他 */
div#newentrylist { background-image: none; }
div#commentlist { background-image: none; }
div#tblist { background-image: none; }
div#archivelist { background-image: none; }
div#categorylist { background-image: none; }


※(2006/02/22追記)
上のやりかたでも画像は消えますが、もっとシンプルな方法もあります。

2006年2月22日付の記事のこちらに書いて置きましたので、よろしければ参照ください。
(追記終わり)※

また、ツリー化スクリプトを入れている場合、ツリー化したくないメニューまでツリー化されていると思います。
ツリー化を外すにはツリー化スクリプトの一番下の部分

createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化

↑この中からツリー化したくないメニューの記述を削除してしまえばツリー化が外れます。

便利サイト:「ねずみが丘」さんの「タグ変換」

テーマ:ブログのカスタマイズbyド素人 - ジャンル:コンピュータ

このページのトップへ

コメント

久しぶりに巡回にまいりました。
↑ショバ代取りに来たわけじゃないの。

おもしろいから+と-ポチポチして遊びました。
帰る時赤いのもやってく。

  • 2006/02/15(水) 14:15:26 |
  • URL |
  • クミコフ #-
  • [編集]

>クミコフさん

風邪の具合いかがですか?

しょうが湯飲んで、あったまったから、きっともうすぐ治りますよね。
ポチポチ遊んでくださってありがとうございます^^
赤いのも嬉しいです^^

  • 2006/02/15(水) 15:42:32 |
  • URL |
  • sunny #r3Uboryc
  • [編集]

全く問題ないようです

モトネタサイトをきちんとリンク貼って紹介していらして、おもあけに、元サイトでは、何も注釈がなくて(この1行を外すなとか、リンクはトップへとか)、基本的に「ご自由に」の奇特なサイトさんなので、今回のsunnyさんの紹介の仕方は全く問題がない、と、思いますヨ。
感謝する人も、たくさんいそうだし、「善行」だと思います。

  • 2006/02/16(木) 18:35:29 |
  • URL |
  • maman.m #PPZLTXC6
  • [編集]

がんばってますね~!
私は今週末に、ツリー化にチャレンジしてみます!
平日は時間がなくて・・・
わからない事あったら教えて下さい!!!

  • 2006/02/16(木) 22:36:21 |
  • URL |
  • RUNA #-
  • [編集]

>mamanさん

良かった、mamanさんのようなプロに問題ない、と言っていただけて安心しました^^

自分の復習のために書いたのですが、もしも誰かの役に立つことがあったら嬉しいです。
カスタマイズは下手の横好きで、おかしなところも多々あると思います。
今後ともよろしくご教授くださいv


>RUNAさん
ツリー化は紹介しておいたサイトさん見て作業したら、まず大丈夫ですよ^^
時間あるときにのんびりやってみて下さいv
私で答えられることがあったら、もちろんお手伝いしますよ~^^

  • 2006/02/17(金) 09:29:25 |
  • URL |
  • sunny #r3Uboryc
  • [編集]
このページのトップへ

コメントの投稿


管理者にだけ表示を許可する

このページのトップへ

トラックバック

FC2Ad

Information

sunny
  • Author: sunny
  • 夫、コドモ、アカゴ、sunnyの4人家族。

Search

Calendar

03月 « 2017年04月 » 05月
Sun Mon Tue Wed Thu Fri Sat
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

 

ユニークカウンター

since 05/11/28

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

リンク

このブログをリンクに追加する

【ぷかレイ戦闘中】

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。