mysticdiary

更新はLittleDreamでしています。右のバナーからどうぞ

なんとなく秋っぽく・・・

相変わらず暑いですなあ~。
もうバテバテの感じですが、テンプレートだけでもすこし秋っぽい感じが出せたら
なあ~と思って作ってみました。

purplestarsample.jpg

ちょいと影絵風?
背景の雲は左から右へ動きます。
ちょいと秋の夜長に夜空を眺めている気分になれるでしょうか?
早く涼しくなればいいですね~。
上のナビゲーションはいつもの項目とあとはドロップダウン式の
ナビゲーションつけました。
これは編集するのにちょっと手間がかかるから、少し上級者向けということに
なってしまうかなあ?

これもちょっと調整して今週中に共有申請しようと思ってます。

●ドロップダウンナビゲーションの編集

ついに・・といいますか、ドロップダウンナビゲーションを入れてみました。
これは編集するには、構造をよく理解してないと、なかなか大変だと
思いますので、わかりにくいかとは思いますが説明してみます。
まず、ナビゲーション全体のHTMLは以下のようになってます。


<div id="topnavi">

<ul id="nav">
<li class="allpost"><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/purplestarallpost.png" /></a></li>
<li class="twitter"><a href="http://twitter.com/" onfocus="this.blur();" class="nonborder"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/purplestartwitter.png" /></a></li>
<li class="rss"><a href="<%url>?xml" onfocus="this.blur();" class="nonborder"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/purplestarrss.png" /></a></li>
<li class="mail"><a href="mailto:?subject=問い合わせ&body=ご記入ください" onfocus="this.blur();" class="nonborder"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/purplestarcontact.png" /></a></li>
<li class="admin"><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/purplestaradmin.png" /></a></li>

<!-- ここからリンク編集してください -->

<!-- 3階層の入れ子リンクここから-->
<li class="link"><a href="#" onfocus="this.blur();" class="nonborder">Link</a>
<ul><div class="ulue"></div>
<li><a href="#">第1階層1行目</a></li>
<li><a href="#">第1階層2行目</a>
<ul><div class="ulue"></div>
<li><a href="#">第2階層1行目</a>
<ul><div class="ulue"></div>
<li><a href="#">第3階層1行目</a></li><!---->
<li><a href="#">第3階層2行目</a></li><!---->
<li><a href="#">第3階層3行目</a></li><!---->
<li><a href="#">第3階層4行目</a></li><!---->
<div class="ulshita"></div></ul>
</li><!---->
<li><a href="#">第2階層2行目</a></li><!---->
<li><a href="#">第2階層3行目</a>
<ul><div class="ulue"></div>
<li><a href="#">第3階層1行目</a></li><!---->
<li><a href="#">第3階層2行目</a></li><!---->
<li><a href="#">第3階層3行目</a></li><!---->
<li><a href="#">第3階層4行目</a></li><!---->
<div class="ulshita"></div></ul>
</li><!---->
<div class="ulshita"></div></ul>
</li><!---->
<li><a href="#">第1階層3行目</a></li><!---->
<div class="ulshita"></div></ul>
</li><!---->
<!-- 3階層の入れ子リンクここまで-->

<!-- 2階層の入れ子リンクここから-->
<li class="link"><a href="#" onfocus="this.blur();" class="nonborder">Link</a>
<ul><div class="ulue"></div>
<li><a href="#">第1階層1行目</a>
<ul><div class="ulue"></div>
<li><a href="#">第2階層1行目</a></li><!---->
<li><a href="#">第2階層2行目</a></li><!---->
<li><a href="#">第2階層3行目</a></li><!---->
<li><a href="#">第2階層4行目</a></li><!---->
<div class="ulshita"></div></ul>
</li><!---->
<li><a href="#">第1階層2行目</a></li><!---->
<li><a href="#">第1階層3行目</a></li><!---->
<li><a href="#">第1階層4行目</a></li><!---->
<div class="ulshita"></div></ul>
</li><!---->
<!-- 2階層の入れ子リンクここまで-->

<!-- 1階層の入れ子リンクここから-->
<li class="link"><a href="#" onfocus="this.blur();" class="nonborder">Link</a>
<ul><div class="ulue"></div>
<li><a href="#">第1階層1行目</a></li><!---->
<li><a href="#">第1階層2行目</a></li><!---->
<li><a href="#">第1階層3行目</a></li><!---->
<li><a href="#">第1階層4行目</a></li><!---->
<div class="ulshita"></div></ul>
</li><!---->
<!-- 1階層の入れ子リンクここまで-->

<li class="link"><a href="#" onfocus="this.blur();" class="nonborder">Link</a></li>
<li class="link2"><a href="#" onfocus="this.blur();" class="nonborder">Link</a></li>
</ul>

<!-- リンク編集ここまで -->


</div><!--topnavi-->


<!-- ここからリンク編集してください -->

という記述から上はいつもの通りのナビゲーションなので、リンク先などを
ご自分で指定してください。
問題はあとのドロップダウンの部分ですね。
これはあくまでサンプルとしてHTMLを書いてるので、
各自リンクを入れたい数だけ、HTMLを書き換える必要があります。

HTMLをみるとわかると思うのですが、
ナビゲーションをブラウザで見た時の左から4、5、6番目のリンク表示に
3階層、2階層、1階層というサンプルのHTMLを入れてあります。
実際使用するのは1階層か2階層ぐらいまでかなあと思うのですが、一応。

構造を理解するには1階層のHTMLをみるのが一番わかりやすいと思います。

<!-- 1階層の入れ子リンクここから-->
<li class="link"><a href="#" onfocus="this.blur();" class="nonborder">Link</a>
<ul><div class="ulue"></div>
<li><a href="#">第1階層1行目</a></li><!---->
<li><a href="#">第1階層2行目</a></li><!---->
<li><a href="#">第1階層3行目</a></li><!---->
<li><a href="#">第1階層4行目</a></li><!---->
<div class="ulshita"></div></ul>
</li><!---->
<!-- 1階層の入れ子リンクここまで-->

Linkという大元のリンク表示があって、

<li class="link"><a href="#" onfocus="this.blur();" class="nonborder">Link</a>

そこにマウスを当てた場合に、

<ul><div class="ulue"></div>
<li><a href="#">第1階層1行目</a></li><!---->
<li><a href="#">第1階層2行目</a></li><!---->
<li><a href="#">第1階層3行目</a></li><!---->
<li><a href="#">第1階層4行目</a></li><!---->
<div class="ulshita"></div></ul>

という中身が出現するという構造になっています。

ドロップダウンの中身は

<li>~</li>

の中に入れ子になっているということです。

通常のナビゲーションのリストを作成する場合は、

<ul>
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a></li><!---->
</ul>

このような形なのですが、リストの中にリストを作るには、

<ul>
<li><a href="#">link</a>ここに第1階層の中身を入れる</li><!---->
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a></li><!---->
</ul>

こういう感じになります。

上から二番目のリストにドロップダウンリストを入れたければ、

<ul>
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a>ここに第1階層の中身を入れる</li><!---->
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a></li><!---->
</ul>

こういう感じになります。
もちろん全部に入れてもいいし、自由です。
第2階層、第3階層と作る場合もやり方は同じです。

以下は中身を入れてみたサンプルです。

第1階層まで

<ul>
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a>
  <ul><div class="ulue"></div>
    <li><a href="#">第1階層1行目</a></li><!---->
    <li><a href="#">第1階層2行目</a></li><!---->
    <li><a href="#">第1階層3行目</a></li><!---->
    <li><a href="#">第1階層4行目</a></li><!---->
  <div class="ulshita"></div></ul>
</li><!---->
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a></li><!---->
</ul>

2行目のリストにドロップダウンリストをつけました。

第2階層まで

<ul>
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a>
  <ul><div class="ulue"></div>
    <li><a href="#">第1階層1行目</a>
      <ul><div class="ulue"></div>
        <li><a href="#">第2階層1行目</a></li><!---->
        <li><a href="#">第2階層2行目</a></li><!---->
        <li><a href="#">第2階層3行目</a></li><!---->
        <li><a href="#">第2階層4行目</a></li><!---->
      <div class="ulshita"></div></ul>
    </li><!---->
    <li><a href="#">第1階層2行目</a></li><!---->
    <li><a href="#">第1階層3行目</a></li><!---->
    <li><a href="#">第1階層4行目</a></li><!---->
  <div class="ulshita"></div></ul>
</li><!---->
<li><a href="#">link</a></li><!---->
<li><a href="#">link</a></li><!---->
</ul>


これは2行目のリストにドロップダウンリストをつけ、
さらにそのドロップダウンリストの1行目に第2階層のリストをつけている
といった感じです。

ちなみに中身の上下に

<div class="ulue"></div>
<div class="ulshita"></div>

とかがついてるのは、背景画像を入れるためなので省略しないでください。

非常~にわかりにくいですが、じっくり考えると理解できると思いますので、
がんばってください(笑)

●ご注意!
firefox等でソースの記述をコピーすると文字化けする可能性がありますので、
HTMLにあらかじめ記述されているソースをコピーして使用してください。

IEで見た場合もなんだかソースの表示がおかしくなるので、実際のHTMLソースを見るように してください。
関連記事
baorin

いつも超ド近眼眼鏡をかけています。ああ、視力が良くなりたい・・・。好物はおすしです。性格はずぼらで人見知りです。こわい人がきらいです。

3 Comments

Me says..."初めまして"
共有テンプレートを拝見して素敵だなと思い伺わせて頂きました。
テンプレート作成に興味がありまして創ってたいと思いましたが
スキルが追いつかずそのままになってしまっているので
とても楽しく拝見致しました。

拙いものではありますが
趣味で画像作成をしておりますので
機会がありましたら遊びにいらして下さい。

また伺わせて頂きます^^
2010.09.02 19:04 | URL | #- [edit]
KOH says..."はじめまして。"
とても素敵なテンプレートですね。制作ありがとうございます。

できれば2カラムのテンプレートを使用したいのですが、
こちらのデザインでの2カラムバージョン制作予定はありませんでしょうか?
2010.09.27 20:55 | URL | #RP77lMrM [edit]
管理人 says..."KOHさんへ"
こんにちは。
お返事遅くなってすみません。
いまのところ、2カラム製作の目処はたっておりません・・。
そのうち時間ができれば作るかも知れません。
よろしくお願いします。
2010.10.02 21:15 | URL | #i4E9Nobc [edit]

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/183-f80893d2
← 関連記事の表示について → テンプレート考