サイドメニュー折りたたみ(改)
Tag:[]
2004.12.06 追記
サイドメニュー折りたたみのエントリーを書き直しましたので
を参照ください。
我楽さんのサイトにあるサイドメニューの折りたたみが気に入り、あらかたできたので、ぼちぼちエントリー追加。経由で
に随分前から取りかかってましたがようやく陽の目を見ることになりました。苦労した点はあとで書くとして、とりあえずメモ。
なお関連記事もございますのでよろしければ後ほど参照ください。
この機能は文字のごとくサイドメニューの折りたたみです。メニューのタイトル部分は常時表示で、タイトル横にある[+]/[-]でメニューリストの表示・非表示を切り替えられます。またメニュー単位に表示・非表示の初期状態を設定できます。
私の場合はリストが長いものに折りたたみをつけ、さらに利用度が低いと思われる「Monthly Archives」と「Recent Entries」を折りたたんだ状態にしてみました。またメニューのリスト合計数をタイトル横に表示できます。そのままの流用では正常に表示されませんでしたが若干のスクリプト修正で有効になりました。以下設定方法です。
1.テンプレートのサイドメニューにid属性を付与
下記の要領で折りたたみたいサイドメニューのタイトルに「id=xxname」、リストの方に「id=xxlist」を付与します。"name"と"list"は固定、"xx"の部分はメニュー毎に異なる名称を付与します(例えばカテゴリーリストは"category"、エントリーは"entry"等)。
<div class="sidetitle">
Categories
</div>
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<div class="sidetitle" id="categoryname">
Categories
</div>
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
2.JavaScriptファイルの作成
下記の内容を丸ごとコピーして"menufolder.js"という名前のファイルを作成します。作成したファイルはここではmt.cgiが配置されているディレクトリに配置することにします。赤および青字はオリジナルのスクリプトとの差分を示しています。
オリジナルではスクリプトをテンプレートに直接記述されていますが、他のテンプレートで同機能を持ちまわることを考え、ここでは独立したファイルにしてみました。注:ファイルの文字コードはBlogの文字コードと一致させてください。またMac+IEの場合は、後述の「テンプレートにJavaScriptファイル読み込みの設定」で示された位置に、本スクリプトを直接埋め込むようにしてください(jsファイルを正常に読み込めない報告を頂いております)。
function InitFoldNavi() {
FoldNavigation('newentry','off',false); // new entry
FoldNavigation('entry' ,'on' ,true); // entry
FoldNavigation('comment' ,'on' ,false); // comment
FoldNavigation('tb' ,'on' ,false); // trackback
FoldNavigation('archive' ,'off',true); // archive
FoldNavigation('link' ,'on' ,true); // link
FoldNavigation('profile' ,'off',false); // profile
}
function FoldNavigation(idName,initMode,viewNum) {
var openMark = '[+]'; // open mark
var closeMark = '[?]'; // close mark
var preMark = true; // position of mark
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;
objItems = objLists.getElementsByTagName('a');
var counter;
if (idName == "link") { // delete 3Link
counter = objItems.length - 3;
} else {
counter = objItems.length;
}
insText[insText.length] = ' ' + Array(' <span>',counter,'</span>').join('') + ' ' + objTitle.innerHTML;
} else {
insText[insText.length] = ' ' + objTitle.innerHTML;
}
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();
以下スクリプトの説明です。上部にある
FoldNavigation('newentry','off',false);
ですが、()内のパラメータの意味はそれぞれ
FoldNavigation('id属性名','初期状態',リスト数表示);
です。id属性名が先の"category"や"entry"に対応します。つまり折りたたみをしたいメニュー分、この行を作ります(注:全角文字(空白など)が混入しないように気をつけてください)。その右の初期状態はページを開いた時の折りたたみ状態です。onは開いた上体、offは閉じた状態です。最後のリスト数表示はタイトル横にそのメニュー内のリスト数(例えばカテゴリーメニューにカテゴリーが10あれば"10")を表示します。'true'と記述すれば表示、'false'は非表示です。
青色部分はオリジナルから変更した部分です。以下主な変更内容です。
まず、"[+]"、"[?]"はメニュータイトル横に表示される折りたたみ切り替え用のリンク文字です(好きな文字を設定できます)。
このスクリプトは前述の通りタイトル横にリストの合計数を表示してくれます。オリジナルは"li"のタグ数を計算して表示していますが改造版では<a href="?">タグの数を計算するようにしています(リスト表示に<li>タグを使っていないため)。またオリジナルではリストの合計数をタイトル右側に"()"で表示していますが、このスクリプトではタイトルの左側に表示するようにしてみました。BlogPeopleのリンク数についてはバナーと登録用リンクの計3つが余分なので、その分を減算しています(エレガントさに欠けますが…)。
さらに折りたたみ用マークをつけることでタイトルの位置が若干左にずれるため、タイトル左に全角空白を1文字挿入して微妙に位置調整しています(ただしマークをタイトル右側に挿入することが前提)。
3.テンプレートにJavaScriptファイル読み込みの設定
テンプレートの一番最後の方(</body>の直前等)に、先に作成したJavaScriptファイルを読み込むためのタグをを挿入します。
<script type="text/javascript" src="http://xxx/menufolder.js"></script>
"xxx"の部分には任意のURLを設定してください。JavaScriptファイルをmt.cgiと同じディレクトリに配置した場合、私のblogを例にとるとxxxの部分は"www.koikikukan.com"になります。
4.スタイルシートの追加
styles-site.css の .sidetitle の下に下記を追加します。
.sidetitle a {
float: right; /* マークを右側に配置 */
width: 1.8em;
text-decoration: none;
}
.sidetitle a.foldmark {
font-size:7px; /* マークのフォントサイズ */
padding-right:3px; /* マークの位置調整 */
}
このスタイルシートは適切な指定でないかも知れませんがとりあえず正常に動作しています。
設定方法は以上です。当初マークが右側に配置されなくて悩みましたがオリジナルのサイトにかなりの質問コメントが寄せられており、そちらを参照しました(スタイルシートのfloat: rightの設定とJavaScript上部にある「マークの挿入位置」がきちんと指定できていれば大丈夫みたいです)。
マークは右側に無事配置されたのですが今度はタイトル右端にくっついてしまうのが気になるので、これはpaddingで調整しました。blogの中にblogを作っている気分です。この時スタイルシートを変更しても変更が反映されずまたしても悩みましたが、ブラウザのキャッシュに古いデータが残っているのが原因のようでした。IEであればブラウザの「更新」をクリックするかキャッシュを削除しましょう。
ちなみに「Recent Comments」等もリスト数を取得できる筈なのですが動作確認できていないので保留にしています。できるようになりました。↓追記参照ください。
2004.08.31追記
上記2.の青色部分を下記のスクリプトの青色部分と入れ替えれば「最近のコメント」も件数表示が可能になります。これは「最近のコメント」にあるURLのaタグの"#"を計数しています。
if (viewNum) {
var objItems;
var href;
var commentCounter = 0;
objItems = objLists.getElementsByTagName('a');
if (idName == 'comment') {
for (i = 0; i < objItems.length; i++) {
href = objItems[i].getAttribute("href");
if(href.indexOf("#") == -1){
commentCounter++;
}
}
}
var counter;
if (idName == "link") {
counter = objItems.length - 3;
} else {
counter = objItems.length - commentCounter;
}
insText[insText.length] = ' ' + Array(' <span>',counter,'</span>').join('') + ' ' + objTitle.innerHTML;
} else {
insText[insText.length] = ' ' + objTitle.innerHTML;
}
2004.09.20追記
BlogPeople以外にリンクを増やす場合は
if (idName == "link") { // Linkは不要な3リンク分を減算
counter = objItems.length - 3;
} else {
counter = objItems.length;
}
の部分を
if (idName == "link1") {
counter = objItems.length - 3;
} else if (idName == "link2") {
counter = objItems.length - 2;
} else {
counter = objItems.length;
}
のように、link名を適宜対応した属性名のものに変更して条件文を必要な分だけ追加してください。追加するのは減算が必要な場合だけです。
2004.10.01追記
コピー後、";"のある行は途中で折り返しがないかご確認ください(折り返しがあるとsafariで正常に表示されないようです)
2004.11.01追記
サイドメニュー折りたたみ状態保持スクリプトおよびサイドメニュー折りたたみの動作遅延対処へのリンクを本文に追加しました。
2004.11.02追記
JavaScriptの日本語コメントを半角英数に修正しました。またMac+IEの場合はmenufolder.jsを正常に読み込めないようですので、スクリプトを直接テンプレート内に埋め込む記述を追加しました。
- ListfolderプラグインをMovable Typeに適用する
- サイドメニューの折りたたみ(Movable Type 4.x デフォルトテンプレート用)
- サイドメニューの折りたたみ(定義リスト編)
- サイドメニューの一部を折りたたむ
- サイドメニューの折りたたみマークに画像を使用する
- サイドメニューの折りたたみ(Movable Type デフォルトテンプレート用)
- サイドメニューの折りたたみ(v5.0:ゆっくり折りたたむ)
- サイドメニューの折りたたみに画像を使用する
- サイドメニューの折りたたみ(v4.0)
- menufolder.js 3.01 リリース
- Movable Type ユーザー・マニュアルをサイドメニューに追加
- サブカテゴリーリストの折りたたみ
- サイドメニュー折りたたみスクリプト(cookie等改善版)
- サイドメニューの折りたたみスクリプト改修中
- サイドメニュー折りたたみの動作遅延対処
≫ 奥が深いね from チョコチッブログ
うちのブログは、Movable Type を使って動いています。
ちょっと旅をし... [続きを読む]
≫ サイドメニュー折りたたみ from NO DOUBT
色々と付け足していったら、段々と縦長になってきちゃって何だかスッキリしない。 そんな時、素敵な方法を見つけちゃいました。 小粋空間さんで公開されてます、サイドメ... [続きを読む]
≫ カスタマ:サイドバーの折り畳み from -h@tezone-
ずっと小粋空間さんにお世話になりつつ、サイドバーの折り畳みに
挑戦してたんですが... [続きを読む]
≫ 左右のやつにある[+]や[?] from /PEN/
多大なご迷惑をおかけしている小粋空間のyujiro様のサイトを参考に、またまた手... [続きを読む]
≫ サイドメニュー折りたたみ from Caprice Tico
サイドメニューに設定したBlogPeopleのTrackBacks
便利なんだけ... [続きを読む]
≫ カスタマ:サイドバーの折り畳み from -h@tezone-
ずっと小粋空間さんにお世話になりつつ、サイドバーの折り畳みに
挑戦してたんですが... [続きを読む]
≫ サイドバー折りたたみ from Treasure
サイドバーを折りたたんだり開いたりするやつ
ずっと気になってて、やっと出来た。
... [続きを読む]
≫ サイドメニュー折りたたみ from Tales of Eternia ONLINE ?さすらい?
小粋空間様の「サイドメニュー折りたたみ(改)」を導入する事二日目やっとせいこうし... [続きを読む]
≫ サイドメニュー折りたたみ from mavericyard*
サイドメニューに開閉ボタンを設置するスクリプトを紹介します。このスクリプトを設置するとサイドメニューをタイトル(Category,Archive,etc) / ... [続きを読む]
≫ 長くなりすぎたサイドバーを折りたたもうっ! from 喜怒哀楽
トラックバック・ピープルがかなり長いものになってしまった・・・。 サイドバーの折... [続きを読む]
≫ サイドメニューの折りたたみ from life goes on*
小粋空間: サイドメニュー折りたたみ(改) サイドメニューが長くなってきたので... [続きを読む]
≫ Sleipnir開発停止!? from blogっぱぐ。
小粋空間さんに衝撃的なエントリーが・・・。 (サイドメニュー折りたたみ使わせて頂... [続きを読む]
≫ とうとうやりました! from life in my style diary
サイドメニューが長ったらしくなってきたので、どうにかして折りたたみたかったんです... [続きを読む]
≫ 弄り中 from Bamkero.net
ウォー (丿 ̄ο ̄)丿アタシのやりたかったことだ???!!!
頑張って弄ってみます。 [続きを読む]
≫ blogページをトップに from Sokunの平凡な日常
今までwww.sokun.jpには別のトップページを用意していたのですが、あまり意味がないので、このブログをトップに持ってくることにしました。... [続きを読む]
≫ サイドメニュー折りたたみ from Magic White
やっと仕事休み利用してやりました。これ時間かかるんです(汗。 今回は、利用してい... [続きを読む]
≫ 「サイドメニューの折りたたみ」機能せず from Carefree Field
その前に「追記の折りたたみ」を先に試してみました。こちらは問題なく機能 したので... [続きを読む]
≫ サイドバー折りたたみ from うだうだうだ
ちょっと、bloglistとかが長くなってきたので
サイドバー折りたたみ式にしま... [続きを読む]
≫ サイドメニュー折りたたみ from ふんわり堂
こちらも昨日から何回か試していたのですが、昨日はまったくできず、今日は新しく読み... [続きを読む]
≫ サイドバー折りたたみ from *SAKURASAKU*
やっと出来ましたサイドバーの折りたたみ♪ 参考サイト 小粋空間さん:サイドメニュ... [続きを読む]
≫ サイドメニュー折りたたみ from アルの足跡
サイドメニューに設定したBlogPeopleのTrackBacks 便利なんだけ... [続きを読む]
≫ エデンの戦士&Movable Type from KillerPierce
カムイ先生の「エデンの戦士」11巻買いました!修行編、理解力のない私には少々難解... [続きを読む]
≫ エデンの戦士&Movable Type from KillerPierce
カムイ先生の「エデンの戦士」11巻買いました!修行編、理解力のない私には少々難解... [続きを読む]
≫ カテゴリー折りたたみ化 from ROUTE16
小粋空間様で紹介されていた サイドバー折りたたみカスタマイズを導入しやした(*´... [続きを読む]
≫ カテゴリー折りたたみ化 from ROUTE16
小粋空間様で紹介されていた サイドバー折りたたみカスタマイズ を... [続きを読む]
≫ カテゴリー折りたたみ化 from ROUTE16
小粋空間様で紹介されていた サイドバー折りたたみカスタマイズ を導入しやした(... [続きを読む]
折りたたみ成功おめでとうございまーす!
楽しいですねー、これ。思わずパタパタして遊んでしまいました。
記事の内容はさっぱりわかりませんが、「*折りたたみ*/*折りたたみ*」というゴミコメントを通報させていただいた者としてはお祝いの言葉を述べずにいられませんでしたわ。
では、皆様おやすみなさいませ。
コメントありがとうございます。あれからかなり日が経ちましたね…。
とりあえずまたひとつ技が増えました。
おおっ!
実現しましたねぇ。(笑)
すみません、私が横着しないできちんと書いていれば、もう少し楽にできたかもしれないのに・・・反省。しかもリスト合計数表示が機能するようにしていただいて。
つかわさせていただきます。(笑)
どうもです。
お気遣いなく。そのおかげで勉強できました(笑)。
なんとなくいい感じに出来上がりました。
これやってみてるんですが、うまくいかないです。
|-||+|の表示くらい出てもいいはずなんですが、うんともすんとも・・・。
ちょっと悩んできます(涙
>hateさん
お疲れ様です。
とりあえずお分かりにならないようでしたら、設定したままの状態でご連絡頂ければこちらから動作確認およびソースの確認をしてみます。
時間をあけて再設置してみましたが、やはり|-||+|も出ませんです・・・(汗
>折りたたみをしたいメニュー分、この行を作ります。
これを理解していず、そのまま全文コピーしたままUPしてたので、
再設置時は自分が増やした数だけ、設定しました。
が、一向に見える気配がありません。キャッシュクリアも試しました。
ちなみにIEの左下のbarにエラーメッセージが出ています。。
ホントに毎度お手数おかけします。よろしくお願いいたします。
すいません。スクリプトにバグがあったようです。
そこまでは分かったのですが今頭が全然回ってないのでお待ち頂けますでしょうか。
度々申し訳ございません…。
>再設置時は自分が増やした数だけ、設定しました。
こちらはOKです!
いろいろお忙しいところ、お手数おかけします。
よろしくお願いいたします(;_;
>hateさん
大変お待たせ致しました。スクリプトを修正致しました。ちなみに不具合があった場所ですが、
・スクリプト内のspanタグが実体参照になっていなかったため表示されていなかった
・スクリプト内のfor文の比較演算子(<)が一箇所実体参照になっていなかった(ボケ)
度重なる不祥事でご迷惑をおかけしましたこと深くお詫び申し上げます。m(__)m
なおスクリプトはjsファイルにして、手順を若干変更させて頂きました。
試験は、hateさんのトップページのソースとCSSをお借りして、blogに表示されている状態のスクリプトをコピーして動作確認しました。CSSの設定も問題ありません。ただしローカル環境で動作させたのでこうさぎの読み込みがうまくできず、そこはコメントアウトさせていただきました。
再度うまく動作しないようであればお手数かけますがご連絡ください。なおオリジナルのページのスクリプト利用でも正常に動作しております。
以上です。それではよろしくお願い致します。
素敵な方法を公開して頂いてありがとうございます。
早速導入させて頂きました。
あと、TBですが2回送信されてしまったので、最初の方を削除して頂ければと思います。
お手数をおかけいたしますが、宜しくお願いします。
>みゆさん
ごぶさたしてますー。
エントリーでのご紹介ありがとうございます!
うまく動いているみたいで良かったです。
#遅くなりましたが重複TBも削除しておきました。
こんにちわ。お世話になりっぱなしですみません。
どうもうまくいかないので、日を置いてやってもみたんですが、
やはり|-||+|マークも出ないんですよねぇ・・・。
やり方間違ってるんでしょうか・・・またエラーが出てるのです。。
id="newentryname"とid="newentrylist"等の追加、
menufolder.jsの作成・設置(mt3下のディリクトリに置きました)
「FoldNavigation('newentry','off',false); 」の変更、
JavaScriptの1行を追加、スタイルシート記述追加。
以上をやったのですが、あってますよね?
お手数ですが、お時間の余裕のある時でもまた確認していただけますか。
わたしのミスだとは思うんですけど、こううまくいかないと、
やる気が飛んじゃって凹みますね・・・(^^;
なんだか疲れさせてしまっているようで大変恐縮してます…申し訳ございません。
hateさんのmenufolder.jsを拝見させて頂きました。
まずInitFlodNaviの中のFoldNavigationが書かれている一番左側の空白に全角スペースが使われています(2行目はOK、3?13行目です)ので、これを半角スペースにするか、スペースを削除してやってください。
また menufolder.js ですが、文字コードUTF-8で保存くださってますでしょうか。こちらからダウンロードさせていただいたのはShift_JISになっているように見えました(UTF-8で保存されていたらお許しください)。
前回はindex.htmlに直接記述するようにしていましたが配置方法を変えてしまったのでこの点が気になりました。他の文字コードではマークが文字化けしますのでご注意ください。
UTF-8で保存できない場合は、index.htmlの
<script type="text/javascript" src="http://hatezone.net/mt3/menufolder.js"></script>
を削除して、代わりにmenufolder.js用のスクリプトを
<script language="javascript" type="text/javascript">
:
</script>
で括ってindex.htmlの同じ位置に直接記述してみてください(=以前の設定方法です)。
これでうまくいかない場合は私のスクリプトにまだ問題が残っているかも知れませんのでオリジナルのスクリプトを一度貼り付けていただけますでしょうか。
以上です。それではよろしくお願い致します(今度こそうまくいくことを心より願ってます)。
で、で、出来ましたあぁぁ!!うわ?ん、すごい嬉しいっ!!(T_T
上記部分を変えることたった数分、念のため再構築して、Blogを見たら、出ましたよ?!
ホントにすごいボンミスをしっぱなしで、お手数おかけしました。
無事に設置できてホントに嬉しい!yujiro様のサポートのおかげです!(感涙
ホント無知って怖いですよね・・・「半角じゃないとダメ」な理由もわからないから、
違いに意識しないで見た目で同じようにしたりとか、おバカを(汗
簡単な作業はメモ帳でしちゃうので、そこがまず問題だったのかも。
これからは手抜きせず、ちゃんとエディタ使います(^^;;
数日又にかけたので、理解する為、今一度わたしなりにまとめを書いて、
頭の中整理してみます。はい(汗
いやはや本当にお世話になりっぱなしで・・・。
こんなやつですが、これからもよろしくお願いします!大感謝です!!
おめでとうございます!
いや?うまくいって本当に良かったです。なんだか私も嬉しいです。
たしかにプログラムは半角英数が一般的ですね。日本語のような全角がOKなのは表示する文字やコメントくらいで、他で使うと誤ったコードとして解釈されてしまうようです。
空白や文字コードの話はエントリーに注意事項として追記しておきたいと思います。意外とこういう事って気がつかないですからね。
#私もメモ帳愛用してますのでご心配なく
本当にお疲れ様でした!!
他の件では私がミスっているので痛み分けということで(笑)。
またやってきてしまいました・・・ホントに何度も申し訳ないです(涙
どれを閉じてどれを開けようか、やってたんですが、
どうもBlogPeopleとMyBlogListの、数の表示がどうもおかしいんです。
前者が2、後者が4も違うんです・・・スプリクトは-3のまま、いじっていません。
id"link"をBlogpeoleのみにしてしまってた時は、-3されてました。
今回のは-3も働いてない感じで、同じ差があるならわかるのですが、
なんで違うのか?・・ちょうど両リストの整理しようとは思ってたので、
明日でもやってみます・・・なんなんでしょうかね、一体(^^;;
すいません!これは私のミスです。度々本当にご迷惑おかけします。
リンクが2つあるので"link1"と"link2"で設定されていると思います。この場合はスクリプトの
if (idName == "link") { // Linkは不要な3リンク分を減算
counter = objItems.length - 3;
} else {
counter = objItems.length;
}
の部分を
if (idName == "link1") { // link1は不要な3リンク分を減算
counter = objItems.length - 3;
} else if (idName == "link2") { // link2は不要な2リンク分を減算
counter = objItems.length - 2;
} else {
counter = objItems.length;
}
に入れ替えて頂けますでしょうか。
入れ替えたスクリプトでは"link1"を-3、"link2"を-2減算するようにしています。現在数が合わないのはBlogeopleやMyBlogListのリンク名を"link"という名前で登録されていないのでこの減算処理が通過してません("link"と"link1"や"link2"は似ていますが1文字でも一致していないとダメなんです)。
減算するのはバナーや「私を登録」のような分を差し引くためですが、「これだけ差し引いてください」と言い切れないので、実際の表示をみながら減算する値を修正して頂けますでしょうか(半角数字でお願い致します)。
また何かありましたら遠慮なくご連絡ください。土曜?月曜はPCを操作できないところに出かけるのでたいしたコメントができないかも知れません。予めご容赦ください。
いつも早いご指導、ありがとうございますっ!
今度こそ完了しました?!ホントに感謝感激です!!
これからも、懲りずにまたよろしくお願いしますぅm(_ _)m
今度は気になっていたダジャレ、ツッコミに来たいと思います?!(爆
休日ゆっくり休んでくださいね!(^^
あ、うまくいきましたね。
では今度こそ本当の本当に…おめでとうございます!!!
いつでもツッコミにきてやってください。関西系のボケも練習しときます。(笑)
大変お疲れさまでした?!!
いつも拝見させていただいております。
とても素敵なテンプレートをありがとうございます。
早速ですが、折りたたみ状態の保持スクリプトは、今回の場合でも導入可能なのでしょうか?
また、その方法は別途ではなく前記事の方法で可能なのでしょうか?
これからも小気味の利いたダジャレ(笑)楽しみにしています。
>月子さん
はじめまして。いつもご覧くださりありがとうございます。
折りたたみ状態保持スクリプトは、ここで引用させて頂いているオリジナル(JUGEMカスタマイズ講座さんのもの)、あるいは私が修正したもののいずれでも導入可能です。
また前記事(サイドメニュー折りたたみ(改))のスクリプトをご利用くださる場合は、手順上スクリプトの埋め込み先がmenufolder.jsとなります。
私の動作環境が今のところそうなってますので(多分)大丈夫だと思います。一度お試しになってください。
不具合等ございましたらお気軽にご連絡ください。
ダジャレもどうぞお楽しみに。(笑)
こんばんは。いろいろ検索して、やっとこれだ!と思うものにめぐり合えました。とても重宝しています。ありがとうございました。
リンクの方も、ありがうございました。これからもよろしくお願いします。
>ゆこりんさん
こんばんは。書き込みありがとうございました。
折りたたみは「JUGEMカスタマイズ講座」さんから頂いたものですがお役に立てたようで良かったです。
こちらこそ今後ともよろしくお願い致します。
こちらにまで顔を出してしまって恐縮なのですが…今一度お助け願えませんでしょうか(T^T)
サイドバーにある各モジュール群に属性を与えました。
javascriptファイルも作成しました。mt.cgiがあるディレクトリに入れてあります。アドレスを直で打ち込んでも見られるので、存在しているはずです。エンコードもUTF-8になっています。
JavaScriptファイル読み込みの設定も、main.indexにつけました。
スタイルシートにも追加しました。
でも…失敗でした(T^T)
特記事項があるとすれば…今は未加入なのですが、、いずれ登録するつもりでBlogPeopleに関するタグ(?)のところをそのままにしてある事と、「サイドメニュー折りたたみ状態保持スクリプト」に記載されているものを追加した事くらいです。
お暇な時で構いません…ソースなど見て頂いて、ご助言頂ければ幸いですm(__)m
>PENさん
こんばんは。サイドバーが一時ずれていたようですが今は正常に見えています。
不具合は直りましたでしょうか?
JavaScriptのエラーはmenufolder.jsの最後の"}"がひとつ足りないようです。
それではよろしくお願い致します。
タグって怖いですね…閉じ忘れとかあると、それだけでだめなんですね(T^T)
ご指摘頂いてから、"}"を足してしっかり閉じてみたんですが…やっぱりダメでした(T^T)
どこか根本的にダメダメだったりするんでしょうか…。
BP登録、ありがとうございますm(__)m
こちらからも、登録させて頂きました♪
>PENさん
すいません。どこかまだ不具合が残ってますでしょうか(パッと見でわからないので…すいません)。
…と書きっぱなしですいませんが今日はこの辺で。
キャッシュをクリアし、何度リロードさせても"safari"上では全く表示されていないのですが、先程"Netscape 7.0"にて確認してみましたところ、無事に表示されている事を確認致しました(>_
連投ですみませんm(__)m
どうやら、ネスケでは表示される…というか、Mozilla系のブラウザでしか表示されないようです(T^T)
こちらのサイトは、safariでもIEでも表示されるのに…どうしてうちだけ…という感じです(^^;
こんにちは。
不具合の件、理解できました。頭がまわらなくてすいません。
表示されないのは折りたたみマークだけでしょうか?
#私のサイトがsafariで表示されるのはある意味偶然だと思います(笑)。
以下、気が付いた点です。
まず、JavaScriptを直接HTMLに貼り付けられる場合は、念のためコメント
<script type="text/javascript" language="javascript">
<!--
:
//-->
</script>
で括られた方がいいみたいです。
またJavaScript内にコメントされる場合は
<!-- ? -->
ではなく
// ?
/* ? */
が良いと思います。
あと面倒でなければ、まずはデフォルト状態のテンプレートから折りたたみスクリプトだけを設定されてみてはいかがでしょうか?切り分けをしないと表示されない原因が見つかりそうにありませんので。
ちなみにWindows2000のIE6.0・Netscape7.1・Opera7.23・Sleipnir1.66ではちゃんと表示されているようです。
またHTMLチェックで調べてみるのもいいかも知れません。
それではよろしくお願い致します。
昨夜、このエントリーに記載されているタグではなく、こちらのソースからjavascriptファイルを見させて頂きましていろいろと試してみましたところ、コピペしたタグ(こちらのエントリーの08.31追記分)の
insText[insText.length] = ' ' + Array(' ',counter,'').join('') + ' ' +objTitle.innerHTML;
} else {
insText[insText.length] = ' ' + objTitle.innerHTML;
の、一行目の最初の ' と ' の間と、三行目の ' と ' の間に全角スペースがひとつ使われていたので、それを半角スペースふたつに直した事と、改行されてしまっていた「+objTitle.innerHTML;」部を一行目の後ろに来るようにしましたところ、safariでもしっかりと表示されるようになりました!
これによって何が変わるのかわかりませんが…とりあえず、無事に表示されましたm(__)m
よく見たら、一番基本のjavascriptのところには、
insText[insText.length] = ' ' + Array(' ',counter,'').join('') + ' ' + objTitle.innerHTML;
} else {
insText[insText.length] = ' ' + objTitle.innerHTML;
となっていて、「' '」という風に、半角スペースふたつになっていましたね(^^;
気付かずにサクッとコピペしていい気になってました(苦笑)
>PENさん
すいませんっっっ!!(T_T)
偉そうなことを書いてしまい大変申し訳ございません。結局私のミスでしたね…。_| ̄|○
全角スペースは途中で文字化けした経緯があって半角2つに変更、これを に変えたつもりでしたが追記分の修正がもれてました。
本当に申し訳ございません(全角の箇所は先程修正しました)。m(__)m
こんないい加減な奴ですいませんが今後ともよろしくお願い致します。
何はともあれうまくいって良かったです(おいおい…)。
#safari、おそるべし…。
いえいえ、とんでもございません(>_
そうですね。開発サイドの仕様(?)の解釈の違いなのでしょうか。
個人的には半角英数の連続で途中で折り返して欲しいというのがあるのですが…。
テンプレに続き、またお借りしました
いつもありがとうございます。
トラバ二回も送っちゃったので
削除お願いします。申し訳ありません。
MTでトラバエラーが起こってもトラバされてるんですね・・
なんかまだよくわかってなくてごめんなさい。
こんばんはー。
うまくいったようですね。ホッとしました。
遅くなりましたが重複分削除しておきました。
ではでは。
>ちひろさん
補足です。トラックバックエラーについてはまたエントリーで書きたいと思います(何でもネタにする私…)。
私も失敗してしまいました(つД`)
CSS設定済み、文字コード確認済み、文章中の全角空白の確認済みなのですが、さっぱり表示されません。
もう何がダメなのかさっぱり分からないので、よろしければだめな点を教えて頂けませんか?
アドレスはhttp://moso.upper.jp/blog/です。
お忙しいところ、ご迷惑をおかけして申し訳ありません。
どうぞよろしくお願いいたします。
すいません!多重投稿してしまいました。ご面倒ですが消しておいて頂けますか?
こんな事でまでお手数かけてしまい申し訳ありません。
>もそさん
こんにちは。
私から見るとカスタマイズ順調に進んでいるように見えますよ。
気になった点ですが、menufolder.js は
http://moso.upper.jp/blog/
の配下に配置されているでしょうか。
こちらからファイルを参照しようとすると404 File Not Found になりますのでこの辺りが問題ではないでしょうか。
ちなみにもそさんのトップページをお借りしてPCのローカルエリアに置いてあるmenufolder.jsを読み込ませると正常に表示できましたので、他の設定は大丈夫だと思います。
それではよろしくお願い致します。
重複コメント削除しておきました。
どうもサーバの調子が良くないみたいで、コメントの登録が正常終了しない時があるみたいです(そのため再構築が起動されず表示に反映されない場合がありようです)。すいません…。
一度投降すればblogには必ず登録されていますのでご心配なく。
アドバイスありがとうございました。
スクリプト自体はちゃんとかけてるんですね。
ちょっとだけ安心しました。が!
やっぱり動かないんです。
/blog配下にjs.ファイルを持っていったのですがダメで、cgi/mt配下のファイルを読み込ませるようにしてもダメで…。
頭がフリーズしてしまったので今日はもうおしまいにします(つД`)
取り急ぎお礼申し上げます。
>もそさん
こんばんは。
気が付くのが遅くなりましたがmenufolder.jsのスクリプト挿入位置が誤っているようです。今書く余裕がないので後ほど。42?48行目を削除すれば(もしかしたら)動作するかも知れません。
また、
・タグの横に付与する名称は全て異なるものにしてください(例えば月別カテゴリーはarchive→monthly、リンクはlink→link1・link2等)
・"id"の左には全て半角スペースがあるようにしてください
<div class="sidetitle"id="archivename">
↓
<div class="sidetitle" id="archivename">
とり急ぎご連絡まで。
必ず動くようになりますのでゆっくり焦らずにいきましょう!!
励ましてもらってありがとうございます(つД`)
寝る前にコメント見つけてうれしくなってしまいました。
id要素は初めは全て違う名前を付けていたのですが、動かなかったので間違ってるの!?と思ってわざわざ重複させてしまっていました。
とても無駄な作業をしていた事が分かってがっかりですw
今日はもう脳みそがとろけているので、明日朝起きたらまた頑張ります。
こうなったら完成するまで絶対粘りますよー。
>もそさん
こんにちは。大変お待たせ致しました。
とりあえず menufolder.js の中身を下記の修正したものに入れ替えて試してみていただけますでしょうか(保存時の文字コードにお気をつけください)。
idは一応、
月別:monthly
リンク:link1?link4
という名称で加えておきました。
こちらのローカル環境では下記をコピーしたもので正常に動作しておりますが、不具合ございましたらお手数ですが再度ご連絡いただけますでしょうか。
それではよろしくお願い致します。
======ここから(この行は不要)======
function InitFoldNavi() {
FoldNavigation('newentry','off',false); // 最新エントリ
FoldNavigation('entry' ,'on' ,true); // ページエントリ
FoldNavigation('comment' ,'on' ,false); // 最新コメント
FoldNavigation('tb' ,'off' ,false); // 最新トラックバック
FoldNavigation('archive' ,'off',true); // アーカイブ
FoldNavigation('monthly' ,'on' ,true); // 月別
FoldNavigation('link1' ,'on' ,true); // リンク1
FoldNavigation('link2' ,'on' ,true); // リンク2
FoldNavigation('link3' ,'on' ,true); // リンク3
FoldNavigation('link4' ,'on' ,true); // リンク4
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;
var href;
var commentCounter = 0;
objItems = objLists.getElementsByTagName('a');
if (idName == 'comment') {
for (i = 0; i < objItems.length; i++) {
href = objItems[i].getAttribute("href");
if(href.indexOf("#") == -1){
commentCounter++;
}
}
}
var counter;
if (idName == "link1") {
counter = objItems.length - 2;
} else if (idName == "link2") {
counter = objItems.length - 2;
} else if (idName == "link3") {
counter = objItems.length - 2;
} else if (idName == "link4") {
counter = objItems.length - 0;
} else {
counter = objItems.length - commentCounter;
}
insText[insText.length] = ' ' + Array(' <span>',counter,'</span>').join('') + ' ' +objTitle.innerHTML;
} else {
insText[insText.length] = ' ' + objTitle.innerHTML;
}
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(); // ナビゲーションの折り畳み
======ここまで(この行は不要)======
こんばんは♪
2日間かかって やっと2つのBLOGの
折りたたみに成功しました(^-^;
年のせいか 理解するのに時間がかかってしまいます (T▽T)
どうもありがとうございましたm(__)m
>mayutanさん
お疲れさまでした!!
きれいに折りたためてますね!
この技ですんなり成功する人が少ないのは説明が良くないからかも知れませんね…。すいません。
#私も何日かかったことか(笑)。
本当にお疲れさまでした!
yujiroさん こんばんは♪
yujiroさんの説明ではなく 私の知識不足なんだと思います(^-^;
1つだけ 質問させて下さい
BBSも折りたたみたいのですが
タイトルに付く数字を 消すことは可能ですか?( 0 BBS )
お暇な時にでも アドバイスよろしくお願いします
やっと完成しました(つД`)
これも全部懇切丁寧なyujiroさんの説明のおかげです。
本当にありがとうございました。
感謝しても仕切れないです。
これで今日はゆっくりと眠れそうです。
>mayutanさん
こんばんは。
数字を表示しない方法ですが、menufolder.js の上部にある
FoldNavigation('bbs','off',true);
のbbsに該当する行を
FoldNavigation('bbs','off',false);
という風に、"true" の文字を "false" に変更してやってください。
それではよろしくお願い致します。
>もそさん
どうもお疲れさまでしたー!
素敵なサイトになりましたね。
開設されたら改めてリンクの方に登録させて頂きたいと思います。
色々あって大変だったみたいですが本日はごゆっくりとお休みください。
ではでは。
こんばんは
ごめんなさいm(__)m 今 一番上のほうの説明を見たら 書いてありましたね
お手数おかけしちゃって申し訳ありませんでした
どうもありがとうございました
おやすみなさい
続きを読むから個別エントリーへ行くと、再上部に script type="text/javascript" language="javascript"> が・・・。ページでエラーが発生しているようで困っています。
解決いたしました^^;
>kurokigaiさん
こんにちは。
返事遅くなってすいません(自分の方でいっぱいいっぱいになってしまってました…)。
事象からみるとHTMLタグの問題と思われますが結局再インストールされたようで、お役にたてず申し訳ございません。
スタイルシート(配色等の設定)でHTMLとファイルが独立していますので、今後改造等で上記のようなエラーが発生しても使いまわせると思います。
yujiroさん、こんばんは!
今日は、このサイドメニューの折りたたみに挑戦しました。
試行錯誤、四苦八苦しながらも、なんとか出来ました!
この度も、分かりやすい説明のお陰で、トラブルも何とか解決できました。
ありがとうございました。
これからも宜しくお願いいたします。
>ポムポムさん
こんばんはー。
記事参照ありがとうございます。
見事成功されたようで、おめでとうございます!
説明が分かりづらくてすいません。
多分このサイトのカスタマイズ記事で一番やっかいなもののひとつだと思います。
その分達成感も大きいかと!
やっぱり泣きをいれさせてください(・・。)
いろいろ試してみましたが、、、折りたためませんでした。
IEで動作チェックをしておりますので、テンプレートに直書きをしましたが、、、変わらず。
今は、外部読み込みjsにしております。
ご指導いただけますか?(・・。)
>Suzieさん
こんにちはー。
作業お疲れさまです。
ご質問の件ですが、テンプレートに配置されたJavaScript
<script type="text/javascript"> <!-- FoldNavigation('comment','off',true); FoldNavigation('tb','off',true); //--> </script>
を
</div> <!-- 左サイドバー終了 -->
の直前に移動し、
<script type="text/javascript"> <!-- FoldNavigation('kousagi','on',false); FoldNavigation('search','on',false); FoldNavigation('category','on',true); FoldNavigation('monthly','off',true); FoldNavigation('newentry','on',true); FoldNavigation('link2','on',true); FoldNavigation('link1','off',true); FoldNavigation('link','on',false); //--> </script>
を
<div class="side"> <a href="http://yujiro.dyndns.org/blog/koikikukan/"> <img alt="小粋空間" src="http://suzie.apple.io/suzie/koikikukan.gif" width="128" height="22" /</a> </div>
のすぐ上に、それぞれ移動してやってください。
つまりJavaScriptは各メニューの「上」ではなく「下」に配置します。
これで表示されると思いますのでお試しください。
それではよろしくお願い致します。
yujiroさん、早速ありがとうございました><
できました!!
って、、何をワタシは読んでいたんでしょう・・・
直下でしたのね(・・。)
ボケててすみませんでした。
また、よろしくお願いします。
>Suzieさん
おめでとうございます!
いえいえ、問題ございません。
では今後ともよろしくお願い致します。
今回は、ここの折りたたみ使うーとか思ってるんでるんですが、
サブカテゴリ表示でid属性使ってるからカテゴリーにも動くのかなぁ、、。と思いまして、、。
回答いただければと思います。
よろしくです。
こんにちは。
やっと折りたたみまでたどり着きました。
なんとか出来たみたいです。(^u^)
ありがとうございま?す。
>みよたんさん
こんにちはー。
メニュー全体の折りたたみであれば他のメニューと同じように設定すればよいのですが、現在のid属性名(categories)を変更しないといけないかも知れません。
サブカテゴリー別の折りたたみということであれば…うまく動きそうにありません(要検討)。
>miaowさん
こんにちはー。
早々にこられましたね。(^_^
記事参照ありがとうございます!
またテンプレート・モジュールも併せてご利用くださりありがとうございます。
スンナリできて良かったです。
ではでは!
はじめまして。こちらのサイドバー折りたたみを参考にさせて頂きました。大変参考になりました。感謝感謝です。
あと、2回送ってはいけないと分かっていたのに、操作ミスで2回もTBを送ってしまいました。すいませんでしたm(__)m。
はい。分かりました。
試してみますね。
サブカテゴリの別折りたたみは、、、。(汗。
>Soさん
はじめまして。
記事参照くださりありがとうございました!
うまくできて良かったです。
TBは削除しておきました。
どうぞお気遣いなく。
あ、勝手ながらMyBlogList登録させていただきました。
それでは今後ともどうぞよろしくお願い致します。
>みよたんさん
こんばんはー。
すいません…。
こちらでも検討してみます(完成するかどうかも不明ですが…)。
こんばんわ!!
わざわざ見に来てくださってありがとうございました♪
あの後、時間を置いてもう一回やってみたら、なぜかあっさりできました。
すっきりと、しかも自分でおきたいものは全部おけて、快適です。
ありがとうございました。
>KMさん
こんばんはー。
どういたしまして。
一体なんだったんでしょうね。
でもうまくできてよかったです!
ではでは。
こんにちは、C・バードです。何とかサイドメニューの折りたたみが
機能するようになりました。
わざわざ足を運んで下さり有難うございました。
改めて精査したところ問題は、単なるタグの指定違いでした。
id="categorylist"にするところを→id="categoryname"
に間違ってコピぺしてしまいました。
つまりどちらも"categorynamem"にしてしまったのです。
単なるケアレスミスでした。m(__)m
>C・バードさん
こんばんは。
ご連絡ありがとうございました。
うまくできて良かったです!
いつもお世話になっております。
サイドバーの折りたたみ・状態保持スクリプト、使わせていただきました。
うまく動いてくれているようなのですが、
Blogpeopleと、birthdayblogが、なぜか個数が表示されません。
お手すきのときに教えていただけるとうれしいです。
>わっちゅさん
こんばんはー。
記事参照くださりありがとうございます!
ご質問の件ですが、menufolder.jsの
FoldNavigation('link2' ,'off' ,false); // BlogPeople FoldNavigation('link3' ,'off' ,false); // Birthday Blog
の false を true にしてやってください。
以上です。
それではどうぞよろしくお願い致します。
お返事ありがとうございます。
さっそく、上のように修正したところ
きちんと表示されました。
どうもありがとうございました。