カスタマイズ方法を説明する前に
今回私のcatシリーズ4作
skyblue_cat
orange_cat
skyblue_cat_regular
orange_cat_regular
に加え
最初の2作
welcome_dog
monotone_dog
をDLして下さった皆様にここでお礼申し上げたいと思います
本当にありがとうございました！
特に
AcCoさんにご指摘いただいた後
regularサイズバージョンを提供させていただき
その後の皆さんのコメントにさらに心打たれておりました
catシリーズ4作、そして
最初の2作についてもとても感激するお言葉をいただいて
本当になんと言っていいかわからないくらいです
感激です！！
テンプレートを作る喜びを今ひたすらに味わっております
本当にありがとうございます！！
さて、今回この4つのcatテンプレートの内
regularサイズの2つのテンプレートのカスタマイズ方法をご紹介しようと思います
この件に関しては
avionさんからの質問を受けてこの記事を書いています
avionさんご指摘ありがとうございますｖ
実は
regularサイズの2つには
左側メニューの
「CATEGORIES」や「MONTHLY」などのメニュータイトルに
リンクが貼られたままになっています
あれは
skyblue_catと
orange_catのメニュー折り畳み機能の名残で
HTMLファイルの方に残したままUPしてあるのです
そのままですと
折り畳み機能は動作しません
HTMLファイルのJavaScriptの部分を
コメントタグをはずしてもらえると動きます
さらにもうちょっと作業が必要なので
（すいません、まだありました(;;・∀・;;)）
その作業も書き加えます！
以下はその方法です
HTMLファイルを見ると</head>タグのすぐ上あたりに
以下のような部分があるのがわかると思います
そしてこのオレンジで表示したコメントタグを
/*リストアイテムを表示する*/
function showListItems(listNameNo) {
/*
// リストアイテムを表示する。
var listName = arrayListItemName[listNameNo];
if(listName != shownListItemName) {
if(document.getElementById(listName) != null) {
hideAllListItems(listName);
document.getElementById(listName).style.display = "block";
for(var i = 0; i < arrayBoolean.length; i++) {
arrayBoolean[i] = "false";
}
arrayBoolean[listNameNo] = "true";
}
// 前回クリックしたのと同じリストアイテムを選択されたら表示・非表示を判断する。
} else {
if(document.getElementById(listName) != null) {
hideAllListItems(listName);
if(arrayBoolean[listNameNo] == "true") {
document.getElementById(listName).style.display = "none";
for(var i = 0; i < arrayBoolean.length; i++) {
arrayBoolean[i] = "false";
}
arrayBoolean[listNameNo] = "false";
} else {
document.getElementById(listName).style.display = "block";
for(var i = 0; i < arrayBoolean.length; i++) {
arrayBoolean[i] = "false";
}
arrayBoolean[listNameNo] = "true"
}
}
}
// 変数に現在表示状態になっているリスト名を保存する。
shownListItemName = listName;
*/
}
↓このように取り外してもらうだけです
これで折り畳み機能が復活します
/*リストアイテムを表示する*/
function showListItems(listNameNo) {
// リストアイテムを表示する。
var listName = arrayListItemName[listNameNo];
if(listName != shownListItemName) {
if(document.getElementById(listName) != null) {
hideAllListItems(listName);
document.getElementById(listName).style.display = "block";
for(var i = 0; i < arrayBoolean.length; i++) {
arrayBoolean[i] = "false";
}
arrayBoolean[listNameNo] = "true";
}
// 前回クリックしたのと同じリストアイテムを選択されたら表示・非表示を判断する。
} else {
if(document.getElementById(listName) != null) {
hideAllListItems(listName);
if(arrayBoolean[listNameNo] == "true") {
document.getElementById(listName).style.display = "none";
for(var i = 0; i < arrayBoolean.length; i++) {
arrayBoolean[i] = "false";
}
arrayBoolean[listNameNo] = "false";
} else {
document.getElementById(listName).style.display = "block";
for(var i = 0; i < arrayBoolean.length; i++) {
arrayBoolean[i] = "false";
}
arrayBoolean[listNameNo] = "true"
}
}
}
// 変数に現在表示状態になっているリスト名を保存する。
shownListItemName = listName;
}
そしてさらに
ちょっと上に戻ってもらうと
今度は↓のような部分があるはずです
*どのリストアイテムが表示状態になっているかを保持する変数*/
var shownListItemName = "appendix_items";
var arrayListItemName = new Array("monthly-archives_list_items", "categories_list_items", "recent-entries_list_items", "recent-comments_list_items", "recent-trackbacks_list_items", "links_list_items", "appendix_items");
var arrayBoolean = new Array("true", "true", "true", "true", "true", "false", "true");
オレンジ色で表示されている部分を
↓のように修正してください
var arrayBoolean = new Array("false", "false", "false", "false", "false", "false", "true");
ここまででJavaScriptを動作させる準備が整いました
次はHTMLタグ部分の修正です
<h2 class="monthly-archives"><a href="#" onclick="showListItems(0);" class="showListItemAnchor">MONTHLY</a></h2>
<div id="monthly-archives_list_items" style="display:block;"> -----��
<ul class="monthly-archives">
<!--archive-->
<li><a href="<%archive_link>" title="「<%archive_year>年<%archive_month>月」の記事一覧"><%archive_year>-<%archive_month> : <%archive_count></a></li>
<!--/archive-->
</ul>
</div>
----- 途中省略しています -----
<h2 class="categories-archives"><a href="#" onclick="showListItems(1);" class="showListItemAnchor">CATEGORIES</a></h2>
<div id="categories_list_items" style="display:block;"> -----��
----- 途中省略しています -----
<h2 class="recent-entries"><a href="#" onclick="showListItems(2);" class="showListItemAnchor">RECENT ENTRIES</a></h2>
<div id="recent-entries_list_items" style="display:block;"> -----��
----- 途中省略しています -----
<h2 class="recent-comments"><a href="#" onclick="showListItems(3);" class="showListItemAnchor">RECENT COMMENTS</a></h2>
<div id="recent-comments_list_items" style="display:block;"> -----��
----- 途中省略しています -----
<h2 class="recent-trackbacks"><a href="#" onclick="showListItems(4);" class="showListItemAnchor">RECENT TRACKBACKS</a></h2>
<div id="recent-trackbacks_list_items" style="display:block;"> -----��
----- 途中省略しています -----
<h2 class="links"><a href="#" onclick="showListItems(5);" class="showListItemAnchor">LINKS</a></h2>
<div id="links_list_items" style="display:block;"> -----��
----- 途中省略しています -----
<h2 class="appendix"><a href="#" onclick="showListItems(6);" class="showListItemAnchor">APPENDIX</a></h2>
<div id="appendix_items" style="display:block;"> -----��
----- 途中省略しています -----
<div id="hidden_author_name_and_appendix" style="display:none;"> -----��
となっている部分を
以下のように修正してください
��display:none;
��display:none;
��display:none;
��display:none;
��display:none;
��display:none;
��display:block;
��display:none;
以上でHTMLファイルの修正は全て終了です！
他に何かあったらいつでもコメントして下さい
よろしくお願いします！
（ちょっとしたつぶやき）
（catシリーズのcss設定で
修正したい部分があるのです
時々左のメニューがずれて表示されたとかしてませんか？
今週末あたりゆっくり眺めてみます
修正したらまたUPしますｖ）
詳しい説明ありがとうございました。
やはり、折り畳み用のリンクだったのですね。
テンプレのhtmlを見ながら、これは何かあるぞ〜？と悩んでいたのがすっきりです。
regularバージョンで、折り畳み出来たらいいなと思っていたので、
すごく嬉しいです。
ところで、メニューですが、うちはずれていないと思うのですが、
もし、修正されるなら、そちらに差し替えます。
では、またお邪魔いたします。