エレベータ・ナビ - ポエツ | poets

Logs

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このブログのトップページを、記事タイトル一覧だけにしてかなり経ちます。このスタイルでは本文を開くのに1クリックが必要になるので、私も記事本文が見えていた方がいいだろうと思っていました。タイトルだけだと、書き出しや写真などで閲覧者の目を引いて読ませる…という記事作成テクニックも使えない。使えないんだけど、こんなブログじゃその必要がないよねーと思ってから、トップページはタイトル一覧にしてます。なので、どちらがいいかはコンテンツ次第でしょう。

世にあるブログの大半は、高層ビルのように記事が積み重なっていく形式です。この形式の欠点は長い記事を書くと、初期画面で2つ目以降の記事が見えなくなってしまう点で、追記を使ったり、折りたたみにしたり、という工夫がよく見られます。
いちいち個別リンクを開かなくても、ズラっと(ダラっと)記事を流し読みできるのは、それはそれで利点です。だからこそナビゲーションを工夫すればいいと思うんです。
「page top↑」のアンカーで冒頭に戻れるようにする、というのはブログよりも以前、「HTML文書の作り方・ホームページ入門」のころにもありました。これはブラウザのショートカットでもできます。ブログだと特に不便に感じるのは、たとえば3番目の記事を下まで読んで、その記事の始めに戻ろうとしても、ページ全体の始めに戻ってしまいます。
そこで1記事ごとに上下できるようなアンカーを設定します。

[テンプレート構造図]


<h1>ブログタイトル</h1>
<!--topentry-->
<div class="記事ブロック">
 <h2>記事タイトル</h2>

 ~記事本文~

 <ul><li>フッタ</li>…<li>page top↑</li></ul>

</div>
<!--/topentry-->


テンプレートは概ね上記のような構造になっていると思います。各記事を包括しているブロック(もしくは記事タイトル、この図では h2)に id を設定します。
<div id="entry<%topentry_no>">
次に記事ブロックの最後、フッタがあればその並びにアンカーを追加します。
<li id="bottom<%topentry_no>"><a href="#entry<%topentry_no>">▲</a></li>

フッタリストがなければ<p>で追加してもいいです。ここにも id を付けてあるので、
<a href="#bottom<%topentry_no>">▼</a>
とすることで、各記事の末尾へジャンプできます。各ブロックが離れていなかったり、ブロック間に何も挟まってなければ、〈次の記事〉の頭出し機能の役割を果たします。
これだけでも使い勝手がかなり向上するし、比較的簡単な改造で済みますが、今回はもひとつ手間をかけてみます。


「エレベータ型ナビ&インジケータ」とでも言うか、各記事からページ内の記事へジャンプし、かつその位置を示すもの…って分かりにくいですよね。
[動作サンプル]

上の[テンプレート構造図]で、各記事ブロックが<div id="entry<%topentry_no>">になっているとして説明します。
1)head内に次のスクリプトを追加。
<script type="text/JavaScript"><!--
enavi='<!--topentry--><a href="#entry<%topentry_no>" class="floor<%topentry_no>">■</a><!--/topentry-->'
//--></script>

2)設置する場所に以下を追加(フッタリスト内に追加するのを例にします)
<li><script type="text/JavaScript"><!--document.write(enavi);//--></script></li>

3)〈現在位置〉を示すために、head内に次のstyleを追加。
<style type="text/css">
<!--.indicater<!--topentry-->,#entry<%topentry_no> .floor<%topentry_no><!--/topentry-->{color:#7AE645;}-->
</style>

これでエレベータのボタンのような移動ナビゲーションが各記事に設置されます。実用性はもちろん、視覚的にもおもしろくないでしょうか。
以下のように title属性で記事タイトルを補ったり、■を記事ナンバーにしたりアレンジもできます。
enavi='<!--topentry--><a href="#entry<%topentry_no>" class="floor<%topentry_no>" title="<%topentry_title>"><%topentry_no></a>/<!--/topentry-->'

comment


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

しまった

月間エントリの多いところでやると、アーカイブモードでとんでもないことに…

Re: エレベータ・ナビ

飛び先なのになんで active color が?? とか思ってしまいました。
3) の仕組みを読んで 「成る程」 と。 
「現在位置表示」。  いいですね。

Re:

フッタにあるよりは、記事冒頭にあった方がインジケータとしては便利かと思いました。
Ash 系列のリビジョンにもちょっと刺激を受けました。

ブログの9割以上は典型的な縦長のスタイルだと思います。
http://d.hatena.ne.jp/finalvent/20061016/1160964740
「脱ブログ的な構造・レイアウト」を考えることで機能向上を図ってきましたが、
フツーの典型的なレイアウトに、ナビゲーションを工夫するだけでどれだけ使い勝手が変るか、
…というのもおもしろいテーマです。

trackback

用FC2,寫部落格日誌也都簡單阿!

検索語抽出

ポップアップ・コメント

poets designed

Ajax検索
AD

台湾留学 完全サポート

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。