Bonjour!

« 日記 | トップページ | Re:Valid な方法でサブタイトルにスタイルシート? »

2003-12-21

ページ内ナビを作ってみました~

ページ内ナビゲーションを向上させるための一案です。(懲りないですが(^^ゞ)

今回のは割りと簡単にページ内ナビを設置できる方法ではないかと思いますが、「簡単に」という言葉にもいろいろ意味がありまして、「楽」という意味では決してありません(笑)。

<設置方法概要>

ページ内ナビ用のマイリストをリンク型などで新しく作り、一番上に配置する。そのマイリストの項目としてページ内リンクを張っておく。次に、作ったリンク先の数だけさらに新しくマイリストを作成し、メモの表示方法を「テキスト表示」に設定し、それぞれのマイリストの項目のメモ欄にid属性などを使ってアンカーを埋め込む。最後にデザインの「並べ方」を使って目的リンク先の直ぐ上にマイリストたちを配置する。

(設置方法詳細も一応最後に付記しておきました。)

このページ内ナビ、作るのはめちゃくちゃ面倒でしたが、使ってみるとなかなか具合が良いので結構気に入ってます。しかし、いちいちマイリストを作ってしかも並べ直すのが非常に面倒だし、第一見た目が不細工です。最初から、例えば「最新のコメント」のタイトルの頭にid="new-comments"という感じで、カレンダーのように、それぞれのパーツの頭にid属性付きのアンカーが付いていてくれたらこんな苦労はしなくても済んだんですが…(T_T)。各パーツにid属性を振っていただけるよう、ココログスタッフにお願いしたいところです。

# でも、12/15でスタッフの要望受付コメントのコーナーは終わってしまったし、どうすればいいんでしょう…。あ、まだコメントしつづけられているみたいですね。なら私もトラックバックしておきます。ということで宜しくお願いします。_(._.)_

<設置方法詳細>

1. まず、「NAVI(名前は任意。以下同様)」という新しいマイリストを(リスト型で)作ります。
(リストができたら直ぐに公開し、「高度な設定」の「表示順」を「古いものが上」になるように設定しておいた方が後の作業がしやすいかもしれません。)

2. マイリスト「NAVI」に項目を追加します。例えば「最近のコメント」へのページ内リンクを張りたい場合、タイトルを「最近のコメント」、URLを"#new-comments"などとしてください。これを必要な数だけ繰り返します。なお、カレンダーについてはURLを"#calendar"とします。
(※)URLの#の後には「適当で一意になるような名称」をつけます。例えば、comments, trackback, left, center, right, banner, container等は既に使われているので使えません。
(※)自分はバックナンバーへのURLを"#back-numbers"としましたが、"自分のサイトのURL/ウェブログフォルダの名前/archives.html"というURLでもいいでしょう。例えばウチなら http://facet.cocolog-nifty.com/divers/archives.html です。

3. 次に、新たにマイリストを(リスト型で)作成します。リストの名前は例えば"new-comments"にします。リストができたら直ぐに公開しておき、続けて設定タブをクリックして「高度な設定」の「メモの表示」を「テキスト表示」にしておきます。次に管理画面に移り、できたマイリストに新しい項目を追加します。項目のタイトルは「(ページトップに戻る)」(または空欄)などとし、URLは #container (または空欄)などとします。そして、最後にメモ欄に <a name="new-comments" id="new-comments"></a> と書き込みます。
(※)タイトル名は、とりあえずNAVIリストの項目のURL名と揃えておいた方が後の処理がしやすいです。
(※)「ページトップに戻る」ナビをつけるときは、上記のようにURLを #container にすればいいと思いました。
(※)nameとidの両方の属性がある理由はこちら→Another HTML-lint 結果の解説

4. 必要な数だけ3.を繰り返します。(※)ただしカレンダーについては上述の通り不要です。

5. 最後にウェブログのデザインの設定の「並べ方」で、マイリストを適宜配置します。NAVIは一番上、新しく作ったマイリスト(例えばnew-comments)は、該当するリンク先のマイリスト(例えば「最新のコメント」)の直ぐ上に配置します。

以上で一応完成です。後は適宜、名称を変更するなどして調整してください。

ということで、もしかしたら誰かの役に立つかもしれないので書いてみました。文章に関してもご批判いただけたらありがたいです(^^)。

« 日記 | トップページ | Re:Valid な方法でサブタイトルにスタイルシート? »

ウェブログ・ココログ関連」カテゴリの記事

コメント

https://www.goyardbagsoutlet.us.com/
https://www.asicsgel-kayano.us.com/
https://www.airjordan1low.us/
https://www.pandorastores.us.com/
https://www.adidasshoesfactory.us.com/
https://www.monclerjacket.com.co/
https://www.pandoras-outlet.us.com/
https://www.adidass.ca/
https://www.pandorashops.us.com/
https://www.nmd.us.com/
https://www.nikeonline-canada.ca/
https://www.pandora-store.us.com/
https://www.asicssneakers.us.com/
https://www.pandoracharms-bracelets.us/
https://www.sneakersadidas.us.com/
https://www.pandorajewelrysbracelets.us.com/
https://www.nikeshoesnew.us.com/
https://www.monclercoatsjacketsoutlet.us.com/
https://www.pandorasjewelrysite.us.com/
https://www.asicsoutletshoes.us.com/
https://www.pandorasjewellery.us.com/
https://www.pandorasjewelry-officialsite.us.com/
https://www.ferragamosbelts.us.com/
https://www.nikeshoess.ca/
https://www.adidasshoescheap.us.com/
https://www.shoesferragamo.us.com/
https://www.ferragamocom.us/
https://www.pandorasstore.us.com/
https://www.outletstoreonlineshopping.com.co/
https://www.pandorajewelrywebsites.us.com/
https://www.pandorasrings.us.com/
https://www.adidasshoes-canada.ca/
https://www.pandoraoutletscharms.us/
https://www.pandoraringsjewelry.us.com/
https://www.monclercoat.com.co/
https://www.goyardhandbagsoutlet.us.com/
https://www.pandorajewelry-officialsites.us/
https://www.pandoraoutletsonline.us.com/
https://www.nikecom.ca/
https://www.wholesaleairjordanscheap.us/
https://www.pandorabraceletsjewelry.us.com/
https://www.nikesneakersformen.us.com/
https://www.trainersforsale.uk.com/
https://www.adidasofficialwebsite.us.com/
https://www.pandorasjewelrys.us.com/
https://www.nikecanadaonlines.ca/
https://www.pandorasjewelryoff.us.com/
https://www.adidasnewshoes.us.com/
https://www.balenciagasneakerssales.us.com/
https://www.pandorashops.us/
https://www.airjordan1s.us.com/
https://www.pandoraoutletscharms.us.com/
https://www.trainersshop.uk.com/
https://www.balenciagastores.us.com/
https://www.pandorajewelryshop.us.com/
https://www.pandora-jewellery.us.com/
https://www.pandora-outletcharms.us.com/
https://www.cheapjordanshoeswholesale.us/
https://www.nikecanadaonlineshopping.ca/
https://www.pandoraoutletjewelry.us.com/
https://www.diorjordan1.us.com/
https://www.pandorascom.us.com/
https://www.pandora-jewelryoutlets.us.com/
https://www.cheapshoesoutletonlines.us/
https://www.pandorajewelryoff.us.com/
https://www.nikemensshoes.us.com/
https://www.pandoraofficialsites.us.com/
https://www.pandorajewelrysofficialsite.us.com/
https://www.nikesstore.us.com/
https://www.pandorajewelrybracelets.us.com/
https://www.monclersale.com.co/
https://www.asicsrunningshoess.us.com/
https://www.nikesnkrs.ca/
https://www.yeezys350.ca/
https://www.salvatoreferragamos.us.com/
https://www.pandorashop.us.com/
https://www.outletasics.us.com/
https://www.nikeshoes-forwomen.us.com/
https://www.shoesasicsoutlet.us.com/
https://www.adidasstoreoutlets.us.com/
https://www.adidascanadaonline.ca/
https://www.nikesneakersforwomen.us.com/
https://www.adidas-runningshoes.us.com/
https://www.yeezycanadashop.ca/
https://www.balenciagastore.us.com/
https://www.nikeshoes-formen.us.com/
https://www.adidasshoesmen.us.com/
https://www.balenciagasneakersoutlet.us.com/
https://www.jordanones.us/
https://www.nikeoutletstoreonlineshopping.us.com/
https://www.pandoracharmsstore.us.com/
https://www.jordan1low.us.com/
https://www.jewelryspandora.us/
https://www.nike--shoes.ca/
https://www.pandorasofficialsite.us.com/
https://www.nikestorefactorys.us.com/
https://www.monclersjacketsoutlet.us.com/
https://www.nikecanada-shoes.ca/
https://www.nikeairjordan1.us.com/
https://www.ferragamosbelt.us.com/
https://www.pandoras-charms.us.com/
https://www.pandorass.us/
https://www.nikeoutlets.ca/
https://www.nikestoreoutlets.us.com/
https://www.adidassale.us.com/
https://www.airjordans1.us.com/
https://www.monclersaleoutlets.us.com/
https://www.bestbasketballshoes.us/
https://www.nikerunningshoessale.us.com/
https://www.pandorasjewelryofficialsite.us.com/
https://www.pandoracharmss.us.com/
https://www.jordan1high.us/
https://www.nikeoutletstore-onlineshopping.us.com/
https://www.cheapmoncler.com.co/
https://www.pandorabraceletsclearance.us.com/
https://www.yeezycom.us/
https://www.jordanretro1.us.com/
https://www.outletsmonclerjackets.us.com/
https://www.pandoracharms-bracelets.us.com/
https://www.jordan1retro.us.com/
https://www.pandorasbraceletcharms.us.com/
https://www.airjordan1shoes.us.com/
https://www.wholesalejordanshoes.us.org/
https://www.jordan1shoes.us.com/
https://www.nikeshoeswomen.us.com/
https://www.charmspandoras.us/
https://www.balenciagashoesstore.us.com/
https://www.adidasshoeswomen.us.com/
https://www.airmax720.us.com/
https://www.yeezysshoes.ca/
https://www.pandoracharmsjewelrys.us/
https://www.nikescanadaonlineshopping.ca/
https://www.monclersfactory.us.com/
https://www.pandoraoutlet-online.us.com/
https://www.pandorabraceletscharms.us.com/
https://www.asicsshoess.us.com/
https://www.pandorasjewelrycharms.us.com/
https://www.wholesalejordanshoes.us/
https://www.pandorajewelrysblackfriday.us.com/
https://www.airjordan1retro.us.com/
https://www.pumashoess.us.com/
https://www.balenciagashoess.us.com/
https://www.balenciagatriplessneakers.us.com/
https://www.pandorasoutlet.us.com/
https://www.pandora-charmssaleclearance.us/
https://www.newshoes2021.us/

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: ページ内ナビを作ってみました~:

» facet-divers: ページ内ナビを作ってみました〜 [此処録ANNEX : ココログTIPS]
facet-divers: ページ内ナビを作ってみました〜... [続きを読む]

« 日記 | トップページ | Re:Valid な方法でサブタイトルにスタイルシート? »

contact

検索

無料ブログはココログ
2022年6月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

BANNERS