はじめに // 配布テンプレ&利用規約

<< 簡単リンクタグ + main + カスタマイズは贅沢品 >>

よくある質問集

えーコメントをつける方は最低でもよくある質問集はチェックしてください。この記事にコメントつけてるのに、ここに書いてある項目を見ていないとか？？？ってなってしまいます。 今後はここに書いてあるのに、っていうコメントを頂いた時はコメント数の氾濫を防ぐためにも解答後そのコメントを削除させて頂きます。


ユーザー助け合い掲示板にもあるんですが
目次の意味も兼ねて。随時追加予定。
自分のスキルを上げたい、1から身につけたいって人は
まずcss講座やxhtml講座を見てください。


■基本的なことである色換えや背景、文字装飾などは下のcss。
アイコン追加、不要項目削除などはhtmlと独自タグを見てください。


■具体的カスタマイズ

スポンサーサイト

Category:-

一定期間更新がないため広告を表示しています

| | Comment 0 | - |

サイドバーに折畳メニューを導入

Category:カスタマイズ

これはカスタマイズ用flatなど、もともと構造に折畳スクリプトを
使っていないもの向きです。
スクリプト自体は公式テンプレのもの。
html head内に


<script type="text/javascript" language="JavaScript"><!--
function GetMenu(tName) {
var i;
var TagName = document.getElementsByTagName("div");
var GetMenu = document.getElementById(tName).style;
if (document.getElementById(tName) == ''){ return; }
if (TagName == ''){ return; }
for(i=0; i<TagName.length; i++){
if (TagName[i].className == 'getlist' || TagName[i].className == 'getlist_view') { TagName[i].style.display = "none"; }
}
if (GetMenu.display == 'none') GetMenu.display = "block"; else GetMenu.display = "none";
}
// --></script>

を挿入。
クリックする部分をhtmlで


<div class="linktitle">
<a href="javascript:GetMenu('open1');">
タイトル</a></div>

のようにaタグを書き加える。


折りたたまれる部分は


<div class="getlist" id='open1'>
<div class="linktext">
中身
</div>
</div>

このようにclass="getlist"とid指定のdivで囲む。
この時class="getlist"は固定。
idのopen1はクリックする部分のタイトルの
GetMenu('open1')
ここのopen1と同じになるようにしてください。
2個目のセットを作りたかったらopen2にすればいいです。


cssの最後にでも


.getlist {
display:none;
}

と書き込む。これでできあがりです。
動作としては複数ある場合別のを開けば開いてあったのは閉じます。
で同じのを2回クリックしても閉じない。
本当は開いても別のが閉じなくて、2回クリックすれば閉じるって
スクリプトもあるんですが、それここで公開すると
色々ばれるので。すいません。
結構上級かも？

| 18:25 | Comment 33 | - |

スポンサーサイト

Category:-

| 18:25 | Comment 0 | - |

Comment

はじめまして
質問なんですか
記事の投稿した時間がかかれている背景を他の画像に変えたいのですが
わかりません。
教えていただけませんか？

| 理奈 | 2008/04/23 8:19 PM |

記事の投降した時間に背景なんかありましたっけ。
実際のブログURLを出してくださらないと分かりません。
それがいやな時にはcss講座を参照してご自分で調整ください。

| tk | 2008/04/23 8:23 PM |

早速返事ありがとうございます!
記事の一番上にある2008.04.22 Tuesdayのところの背景です!

| 理奈 | 2008/04/23 8:39 PM |

cssの

.entry_date {
font-family: "Verdana";
font-size: 10px;
font-weight: bolder;
color: #828282;
margin: 10px 0px 10px 0px;
padding-bottom: 3px;
border-bottom: 0px dotted #FFFFFF;
background-image: url('http://report-21.img.jugem.jp/20060812_125208.gif');
}

の
background-image: url('http://report-21.img.jugem.jp/20060812_125208.gif');
が犯人です。削除してください。

| tk | 2008/04/23 8:45 PM |

おお!ありがとうございます♪
そこに背景をつけたいのですが
教えていただけませんか？

| 理奈 | 2008/04/23 8:54 PM |

あ、すみません
考えてみればわかりました!
ありがとうございました^^

| 理奈 | 2008/04/23 8:57 PM |

こんにちは、初めまして（ _ _）

早速質問なのですが、
フリースペースに

<div class="linktitle">
<a href="javascript:GetMenu('open1');">
タイトル</a></div>

の部分を置いて
アーカイブやコメント等を折りたたみで表示したいのですが
どのようにすればよろしいのでしょうか

| みい | 2008/05/06 12:25 PM |

フリースペース内では独自タグは使えないので
不可能です。

| tk | 2008/05/06 12:55 PM |

ご解答ありがとうございます

フリースペース内では独自タグは使えないんですね；

| みい | 2008/05/06 1:04 PM |

初めまして。

最後の下の方にも書いてあったのですが
「２回クリックするとしまる」ってやつをしたいのですが
どうしても教えていただけませんかね・・。
ワガママすいません。どうしてもムリでしたらＯＫですので＾＾


あと、押すと開くやつがなんか・・青い枠で囲まれちゃったんです。
直したいんですけどどうすればいいでしょう？

| 杏 | 2008/06/08 9:23 AM |

すいません。自分で調べる前に聞いちゃいました。

青い枠は解決しました！すいませんでした＞＜

| 杏 | 2008/06/08 9:25 AM |

申し訳ありませんが、このブログではそのスクリプトは公開しておりません。

http://nz.jugemers.net/log/eid23.html
で別のスクリプトを公開してくださってますので、
そちらをご参考になさってください。

| tk | 2008/06/08 9:54 AM |

こんにちわ。
質問なのですが，
RECENT COMMENTSの
⇒をiconにしたいのですが
どうやればいいですか？

| 流榎 | 2008/08/11 11:57 PM |

これはそれなりに独自タグの書き換えが必要になります。

http://nous.jugem.jp/?eid=37

が参考エントリとなっているので、これを見て書き換えてください。

| tk | 2008/08/12 12:25 AM |

結局RECENT COMMENTSを消しました。
ご迷惑かけて申し訳ございませんでした。

| 流榎 | 2008/08/12 7:14 PM |

サイドバーに折畳メニューを導入を
してみたのですが
どうしても
全体が左にずれてしまうのですが
どうすればよいでしょうか？
あとカレンダーの字の大きさが変わって
しまったのでその直し方をおしえてください。

| 流榎 | 2008/08/16 9:47 PM |

とりあえず正しいURLをおしえてください。

| tk | 2008/08/16 10:07 PM |

あ,すいません。
これです。

| 流榎 | 2008/08/16 10:37 PM |

えーと。。
このエントリには

html head内に

にってかいてありますよね。
これhtmlの<head>から</head>の間のことです。
一番上にいれたりしちゃ絶対だめです。
</head>の上にでも移動させてください。

カレンダーはcssの
.cell内にでも
font-size: 10px;

ってかいてみてください。

| tk | 2008/08/16 11:11 PM |

そうなんですか＾＾；
ありがとうございます。
やってみます！

| 流榎 | 2008/08/16 11:32 PM |

できました★
ありがとうございます。

あのー
更新してもずっと開いていることはできますか？
開かなくても最初から開いてるみたいな感じで。
閉じてると音楽ながれないんですよね....

| 流榎 | 2008/08/16 11:41 PM |

？？？
それだったら最初から折りたたみにしなければよかったと思うんですが。。。
折り畳みとはそういうものです。
長くなったメニューをクリックしなければ見えないようにしてスッキリさせる為のものです。

ただ何か張りたかっただけならフリースペースに書き込むだけで
htmlの書き換えなどは必要なかったのですが。

| tk | 2008/08/16 11:45 PM |

そうか....
フリースペースのことわすれてました＾＾；

| 流榎 | 2008/08/17 11:15 AM |

カテゴリーを折り畳みにしたいのですが、うまくいきません。

元のHtmlが↓これです。
<!-- BEGIN category -->
<div class="link">
<div class="linktitle" id="categoryname">　*CATEGORIES*</div>
<div class="linktext">{category_list}</div>
</div>
<!-- END category -->




↓変更してこうなりました。
<!-- BEGIN category -->
<div class="link">
<div class="linktitle" id="categoryname">
<a href="javascript:GetMenu('open1');">　*CATEGORIES*</a></div></div>
<div class="getlist" id='open1'>
<div class="linktext">
<div class="linktext">{category_list}</div>
</div></div></div>
<!-- END category -->


どこがおかしいのでしょうか？

| 神無月 | 2008/09/05 8:49 PM |

肝心のjavascriptがhtmlに入っていないようですが、カスタマイズ中のページを見せていただけますか？
ぱっと見ただけですが、すごくおかしいというものはみつかりません。

ただid="categoryname"は確か別のjavascript用の指定だったと記憶しておりますし、これとかちあっているのかもしれません。
このエントリの説明に書いてあることは
javascript・cssともカスタマイズ済みなのですよね？
そのページを見せてください。

| tk | 2008/09/05 8:56 PM |

カスタマイズした状態にしています。

| 神無月 | 2008/09/06 3:11 PM |

やっぱりツリー化？スクリプトがよくないような気がします。
バックアップをとった上、ツリー化スクリプトの方を削除し

<!-- BEGIN category -->
<div class="link">
<div class="linktitle" id="categoryname">
<a href="javascript:GetMenu('open1');">　*CATEGORIES*</a></div></div>
<div class="getlist" id='open1'>
<div class="linktext">
<div class="linktext">{category_list}</div>
</div></div></div>
<!-- END category -->


を
<!-- BEGIN category -->
<div class="link">
<div class="linktitle" id="categoryname">
<a href="javascript:GetMenu('open1');">　*CATEGORIES*</a></div></div>
<div class="getlist" id='open1'>
<div class="linktext">{category_list}</div>
</div>
<!-- END category -->

にしてみてください。
なんかもともと</div>が１個多いようですね。

| tk | 2008/09/06 3:18 PM |

ツリー化スクリプト

<script type="text/javascript" language="JavaScript"><!--
function GetMenu(tName) {
var i;
var TagName = document.getElementsByTagName("div");
var GetMenu = document.getElementById(tName).style;
if (document.getElementById(tName) == ''){ return; }
if (TagName == ''){ return; }
for(i=0; i<TagName.length; i++){
if (TagName[i].className == 'getlist' || TagName[i].className == 'getlist_view') { TagName[i].style.display = "none"; }
}
if (GetMenu.display == 'none') GetMenu.display = "block"; else GetMenu.display = "none";
}
// --></script>

を削除して

<!-- BEGIN category -->
<div class="link">
<div class="linktitle" id="categoryname">
<a href="javascript:GetMenu('open1');">　*CATEGORIES*</a></div></div>
<div class="getlist" id='open1'>
<div class="linktext">{category_list}</div>
</div>
<!-- END category -->

に変更してみましたが、やっぱり上手くいきません

| 神無月 | 2008/09/06 5:28 PM |

ツリー化スクリプトじゃなくて折り畳みスクリプトの方削除しちゃってますよ。

ツリー化スクリプトってご自身で入れたものじゃなくて、ひょっとして初めから入ってたものなんですか？
htmlの最後の方にあるやつです。
折り畳みスクリプトは私がこのエントリに書いて入れてくださいって言っている方ですね。

| tk | 2008/09/06 6:03 PM |

どれなのかが分からない。はじめから入っているので。

var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '├'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '└ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />¥n'; /* 各枝の末尾 */
gTreeOption['top'] = '<br />¥n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
// -->

</script>

| 神無月 | 2008/09/06 6:55 PM |

<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/¥((¥d¥d¥/¥d¥d)¥)/);
this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/¥[(.+)¥](.+)/) ) {
this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new

| tk | 2008/09/06 8:24 PM |

あー途中で切れちゃってる。
基本的に<script type="text/javascript">から始まって</script>までです。
そのテンプレ配布している人は、折り畳みがもともと入ってるテンプレも配布しているみたいなので
あまり知識がなくて自信がないなら、そっちのテンプレに変えるって手段もありますよ。

| tk | 2008/09/06 8:36 PM |

別のテンプレに変えることにしました。
お手数おかけしました。

| 神無月 | 2008/09/07 6:33 PM |

Submit Comment