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

<< html絶対やっちゃいけないこと! + main + カスタマイズ用1カラム完成 >>

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

メニューをつける。

まずhtmlのhead内にある
<script type="text/javascript" src="./template/js/cookie.js"></script>
の下に


<script type="text/javascript">
//<![CDATA[
//メニューのスイッチ
function menuSwich(id){
var menu = document.getElementById(id);
var dsp;
if(!menu)return;
hideAll();
if(menu.style.display=="none"){
dsp = "block";
}else{
dsp = "none";
}
menu.style.display=dsp;
}
//メニューをすべて消す。
function hideAll(){
var i;
var tagname ="div";
var classname = "list";
var tags = document.getElementsByTagName(tagname);
if(!tags)return;
for(i=0;i<tags.length;i++){
if(tags[i].className==classname){
tags[i].style.display = "none";
}
}
}
//]]>
</script>

をコピーペーストしてください。
これは公式ぷちオレンジのいらないところを削ったやつです。


次に空っぽのcss欄に


#menu{
margin:1em 0 1em 0;
font-size:12px;
width: 100%;
}

.menuitem {
margin-right:1em;
float:left; /*rightにすると右からメニューが並びます*/
}

.clear {
clear:both;
}

.list {
font-family: "Verdana", "MS ゴシック", "Osaka";
display: none;
overflow: auto;
width: 100%;
height: 200px;
font-size:12px;
}

.close {
font-size:11px;
text-align:right;
}


てコピーペーストしてください。
これで下準備は完了です。


次にhtmlの
<!-- END title -->
の下に
(この上に書くとタイトル画が二つに増えたりします。謎sg)


<div id="menu">

<br class="clear" />
</div>


と書いてください。これがメニューの土台になります。
次は二つに分岐しますね。


1.違うページにリンクしたい場合。
プロフィールページに跳ぶ時などは
<div id="menu">と<br class="clear" /></div>の間に


<div class="menuitem">
<a href="跳びたいURL">リンク名</a>
</div>

とかいてください。
これで完了です。


2.カテゴリーやリンクリストなどを開きたい時。
<div id="menu">と<br class="clear" /></div>の間に


<div class="menuitem">
<a href="javascript:menuSwich('category');">リンク名</a></div>

と書いてください。
このcategoryはかぶらなくて、分かりやすい名前を自分でつけてください。


次に
<br class="clear" /></div>の後ろに


<!-- BEGIN category -->
<div class="list" id='category'>
<div class="close"><a href="javascript:hideAll()" title="メニューを閉じる">close</a></div>
{category_list}
</div>
<!-- END category -->


と書いてください。


BEGINとENDの次の項目名と独自タグは表示させたい項目名に
JUGEM独自タグ表をみながら書き換えてください。
2行目のid=' 'はさっき自分でつけた
分かりやすい名前を書いてください。
複数項目を作る場合はかぶっちゃだめですよ。
これでmenuSwich('category')を押すと
id='category'がひらくようになりました。


メニューを複数作りたい場合は、
項目名は
<div id="menu">と<br class="clear" /></div>の間で
前の<div class="menuitem"></div>セットの後ろに!
(他の項目の<div class="menuitem">と</div>の中に書いて
 絡ませないように注意してください)
押すと表示されるものは内容をその後ろに
どんどんいれていけばokです。


ちなみにサンプルページのhtmlは



<!-- END title -->
<div id="menu">

<div class="menuitem">
<a href="http://nous.jugem.jp/">top</a>
</div>

<div class="menuitem">
<a href="javascript:menuSwich('category');">categories</a>

</div>

<div class="menuitem">
<a href="javascript:menuSwich('link');">link</a>

</div>

<br class="clear" />
</div>

<!-- BEGIN category -->
<div class="list" id='category'>
<div class="close"><a href="javascript:hideAll()" title="メニューを閉じる">close</a></div>
{category_list}
</div>
<!-- END category -->

<!-- BEGIN link -->
<div class="list" id='link'>
<div class="close"><a href="javascript:hideAll()" title="メニューを閉じる">close</a></div>
{link_list}
</div>
<!-- END link -->

てなってます。


小鳥の記録帳はもともとarchiveがはいってるので
上にarchiveをいれて二つにすると
バグっちゃうので気をつけてください


またこれは小鳥の記録帳だけじゃなくて
他のテンプレでも使えますので
頑張って応用してみて下さい



| 18:35 | Comment 4 | - |

スポンサーサイト

| 18:35 | Comment 0 | - |

Comment

23で小鳥の記録帳でお尋ねした者です*
無事解決して良かったです♪゜
ありがとうございます!!!

しかし、クリックするとcommentにいってしまうんです:;
何故でしょうかね・・?

| しゃーぷ | 2007/05/31 4:55 PM |

こんにちは!またお邪魔しちゃいました*
今回の講座は、小鳥の日記帳ですか!
このテンプレートは今人気なんですね?
私はまだ使用した事がないので今度使用してみたいです♪
tkさんって、専門的に勉強してる方ですか?
23でよく見かける度に毎回尊敬しまくりですv

では、失礼します。

| ユウ | 2007/05/31 5:17 PM |

>しゃーぷ様

あああ、入れ違いになってしまってたのですか。
今コチラに気づきました。すいません。
JUGEMの独自リストタグにも汎用がきくように
若干込み入った組み方をしてあって
設置が面倒くさくてお手数かけました;;
何とかなってよかったです♪

>ユウ様

こんにちは♪
小鳥の日記帳はなんだか名前をよく見るので
ちょっと書いてみました。
テンプレの出来のうんぬんについていうのは
営業妨害になりそうなのでアレですが。
cssがなくて全部htmlに書かれているので
カスタマイズしにくい部類に入ると思います。

html や cssは好きで割りと勉強してますが
まだまだ素人ですorz
今ちょっとカスタマイズしやすい1カラムテンプレを
ためしに作ってたりします♪

| tk | 2007/05/31 5:35 PM |

http://www.kd10-shoes.us.com/ nike kd 8
http://www.nikeairvapormaxflyknit.us.com/ nike flyknit
http://www.yeezyboost350shoes.us.com/ yeezy
http://www.birkenstocksandalssale.us.com/ birkenstock shoes
http://www.kyrie-4.us.com/ kyrie 2 shoes
http://www.longchampbag.us.com/ longchamp bag
http://www.lebron15-shoes.us.com/ lebron shoes
http://www.salomonspeedcross3.us.com/ salomon
http://www.pumafentyrihannashoes.us.com/ puma slides
http://www.pandorajewelryrings.us.com/ pandora jewelry
http://www.louboutinredbottoms.us.com/ red bottoms
http://www.jordans11shoes.us.com/ jordan 11 space jam
http://www.curry4-shoes.us.com/ curry 1
http://www.fitflopsshoes.us.com/ fitflop sandals
http://www.katespadepurses.us.com/ kate spade handbags
http://www.adidasnmdrunnerr1.us.com/ yeezy shoes
http://www.pandora-jewelrysale.us.com/ pandora bracelet
http://www.hermesbirkin-handbags.us.com/ hermes purse
http://www.jordan11spacejams.us.com/ jordan space jams
http://www.adidas-ultraboost.us.com/ ultra boost uncaged
http://www.pandorajewelryscharms.us.com/ pandora jewelry official site
http://www.adidasyeezy-350.us.com/ adidas boost
http://www.airmax90shoes.us.com/ nike air max 90
http://www.nikeairmax-90.us.com/ nike air max 2017
http://www.fitflops-sale.us.com/ fitflop sandals
ドリフトliuyuzhen

| pandora jewelry | 2018/05/15 5:10 AM |

Submit Comment