はじめに // 配布テンプレ&利用規約
<< 簡単リンクタグ + main + カスタマイズは贅沢品 >>
よくある質問集
えーコメントをつける方は最低でもよくある質問集はチェックしてください。この記事にコメントつけてるのに、ここに書いてある項目を見ていないとか???ってなってしまいます。 今後はここに書いてあるのに、っていうコメントを頂いた時はコメント数の氾濫を防ぐためにも解答後そのコメントを削除させて頂きます。
ユーザー助け合い掲示板にもあるんですが
目次の意味も兼ねて。随時追加予定。
自分のスキルを上げたい、1から身につけたいって人は
まずcss講座やxhtml講座を見てください。
■基本的なことである色換えや背景、文字装飾などは下のcss。
アイコン追加、不要項目削除などはhtmlと独自タグを見てください。
■具体的カスタマイズ
- ・サイドバーに折畳メニューを導入
- ・簡単リンク
- ・タイトルの左にアイコンを入れる。下線を画像にする
- ・flat系のテンプレの線をもこもこにしたい
- ・flat系のテンプレの幅を変えたい。もこもこ調整。
- ・トップページで中身がもこもこよりはみ出る(flat)
- ・タイトルと日付を横並びに(基本flat)
- ・窓の中に本文を収めたい。
- ・C-MAP アイフレもどきをやりたい。
- ・スクロールバーの変更(不親切ぎみ)
- ・上部メニューを導入
- ・写真の枠線をいじりたい
- ・バナーの枠線を消したい
- ・タイトルを画像にしたい(途中に書いてある)
- ・タイトル画を押してメニューに
- ・メニュー画面を作りたい。(子ユーザー登録)
- ・レイアウトを真ん中寄せしたい。
- ・上部の変なバーと広告その他について
- ・続きを読むを書き換える。
- ・ページ送りを設置したい
- ・新しいメニュー項目を作りたい(フリースペース)
- ・タイトル下にリンク文字列を書く
- ・検索にかかりたくない
- ・ブログのURLを変えたい!(ブログ作り直さなくてok)
- ・ブログをお休みしたい!
- ・コメントを開くともこもこ枠とずれる!
- ・トップにメニューだけ表示させる。
- ・トラブル! .entry_bodyに書いても文字の指定が反映されない
- ・トラブル! 小窓内でマウススクロールが止まる
- ・トラブル! 改行が2回で1回分に
- ・トラブル! 追記折り畳みスクリプトが動かない!
- ・トラブル! html弄ってたら崩壊した。(独自タグ関連)
サイドバーに折畳メニューを導入
これはカスタマイズ用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 | - |
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 |
.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 |
最後の下の方にも書いてあったのですが
「2回クリックするとしまる」ってやつをしたいのですが
どうしても教えていただけませんかね・・。
ワガママすいません。どうしてもムリでしたらOKですので^^
あと、押すと開くやつがなんか・・青い枠で囲まれちゃったんです。
直したいんですけどどうすればいいでしょう?
| 杏 | 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 |
| tk | 2008/08/12 12:25 AM |
ご迷惑かけて申し訳ございませんでした。
| 流榎 | 2008/08/12 7:14 PM |
してみたのですが
どうしても
全体が左にずれてしまうのですが
どうすればよいでしょうか?
あとカレンダーの字の大きさが変わって
しまったのでその直し方をおしえてください。
| 流榎 | 2008/08/16 9:47 PM |
| 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 |
ぱっと見ただけですが、すごくおかしいというものはみつかりません。
ただ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>が1個多いようですね。
| 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 |
<!--
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 |