Silver Ring

欲しかったものはいつだってすぐそばにあった。

えっと、タイトルは特に意味がありません。いい加減タイトルをつけるのに使う労力を惜しみだしました。

ここのところ、試験勉強の合間を縫ってブログのデザインを少しずつ変更してきました。大きく目立つのはブログタイトル部分と右のメニュー目次の部分に画像を使ったことです。ちょっとまぁ全体の色のバランスを考える必要もあるかもしれないと思ってはいるんですが、だんだん自分の目が慣れてきたので、このままでもいいかな、と思い始めています。ユーザビリティを低下させてしまうかもしれませんしね。(使いドコロを間違えてる)

もう一箇所、目立たない部分ですが、変更を加えました。お気付きなったでしょうか? 右の「Index」という部分です。これは実は、僕がずっと実現したかった部分だったんですが、思わぬ経緯で想像していた100倍くらい簡単に実現できてしまいました。少し拍子抜けです(^-^;)

実現したかった機能というのは、浮かばれない君のタマシイのmyhurtさんが作成したbenriシリーズテンプレートの記事ナビゲーションとほぼ同様です。これは本当に画期的で、現在表示しているページにある記事のタイトルを一覧で表示できるものです。カテゴリー別、月別のときに切り替わるのがミソです。うちのような長文ブログだと先が見られないというケースが多く、どこまで記事が続くのかも分からず、余計なスクロールとページめくりが増えるのではないかと思っていました。というか管理者の僕が見るのに耐え難い苦労をしていました。(^^ゞ

そんな悩みを抱えていながらも、テンプレートをパクるいじるのに挫折し、新しい変数用意してくれないかな、便利なプラグイン公開されないかなとFC2&人任せにしてここまで来ました。(書く必要があるのか)

そして先日、ブログのデザインを変えたついでにいよいよ共有プラグインを導入しようかと考えていたんです。大学のパソコンで、どんなプラグインが公開されてるんだろー、プラグインって導入していいことあるのかなー、とパラパラ見ていたんですが………そこで発見してしまったのです!FCafeのdanielさんが製作された共有プラグイン「INDEX」を!


モード切替で現在表示中のページの目次とアンカーが表示され、個別記事表示時にはコメント、トラックバックへのアンカーが表示されるという便利機能付き。なぜこれがダウンロード数1位じゃないのか納得いかないくらい素敵なプラグインだと思います(;_;)

ただ、うちはメニューを定義リストで作っているので、ul要素とli要素で構成されるものが多いプラグインに対応させるためには、それに対応したテンプレートにしなければいけないわけです。そこを1からパクる作るのはどうも大変(しかも試験中)。しかし諦めきれずによくソースを見ていたんですが、「これってちょっといじればそのままHTMLに埋め込めるんだ!」ということに気付いたんですね。

気付くのがものすごく遅かったんですが、なにもプラグインを使うためにはそれに対応させなくても必要な部分を抜き出してテンプレートに合わせて変えていけばたいていのものは実現できるんですね。テンプレ製作&配布者でないかぎりそんなに頭を悩ます必要はなかったということに気付きました^^;

それで、ソースをちょっと変えてみたのが以下のものです。

<dt>Index</dt>
<!--not_permanent_area--> 
<!--topentry--><dd>
<a href="#entry<%topentry_no>" title="<%topentry_month>/<%topentry_day> [<%topentry_category>]">
<%topentry_title></a>
</dd><!--/topentry-->
<!--/not_permanent_area-->

<!--comment_area-->
<!--comment--><dd class="comment_link">
<a href="#comment<%comment_no>" title="<%comment_title>">
<%comment_name>: <%comment_title>
</a></dd><!--/comment-->
<!--/comment_area-->

<!--trackback_area-->
<!--trackback--><dd class="trackback_link">
<a href="#trackback<%tb_no>" title="<%tb_blog_name>">
<%tb_title> [by <%tb_blog_name>]
</a></dd><!--/trackback-->
<!--/trackback_area-->

<!--edit_area--><dd> Comment <%eno>編集中</dd><!--/edit_area-->

<!--nextentry--><dd class="side_navi_pre">
<a href="<%nextentry_url>">≪<%nextentry_title></a>
</dd><!--/nextentry-->
<!--nextpage--><dd class="side_navi_pre">
<a href="<%nextpage_url>">≪古い記事</a>
</dd><!--/nextpage-->

<!--prevpage--><dd class="side_navi_nex">
<a href="<%prevpage_url>"> 新しい記事≫</a>
</dd><!--/prevpage-->
<!--preventry--><dd class="side_navi_nex">
<a href="<%preventry_url>"><%preventry_title>≫</a>
</dd><!--/preventry-->
ポイントは<!--topentry-->のあとの<a href="#entry<%topentry_no>">ですね。(title省略)これに合わせて見出しの部分にid属性を与えればOK。プラグインの説明では#eになっていますが、見出しの部分と整合していれば問題ないです。
<h3 id="entry<%topentry_no>" class="entry_title">
<a href="<%topentry_link>"><%topentry_title></a>
</h3>

以下が大きく手を加えた部分です。title属性などは考慮の余地があるんですが、それはまぁ置いておきます。

  1. リスト要素を定義リスト要素に書き換え。
  2. Comment、Trackbackの項目名、日付などを省く。
  3. ページ遷移のナビゲーション(「古い記事」など)の追加。

2番目に関して。うちはもともとCommentとTrackbackを色分けしていたので、それに合わせれば分かりやすいかな、と思い切って説明を減らしました。class指定をそろえてCSSで色分けしているだけですが、ちょっと独特な変更点だと思います。

3番目に関して。コメントなどがついていない個別記事表示時に表示項目がなくなって寂しくなるのが一つ。また、今まで設置していたページナビゲーションをそのまま応用して設置できるのではないかと思ったのが一つです。今のところclassはとりあえず指定しているだけで、side_navi_nexにtext-align:rightを指定するのにしか使っていません(^^ゞ

何かの参考になればいいかなぁと思います。設置した右のIndexメニューの使い方も兼ねての説明でした。

久しぶりのブログデザインのネタで、なんだかむやみに長い記事になってしまいました…。しかも自分のところでしか適用できないソースを晒し、なんともいえない脱力感がありますが、とりあえずプラグインの紹介とその「部分導入」の可能性についての記事ということで。(なにを今更…)

FC2の共有プラグインはアイディアの宝庫ですね♪

  1. CSS・HTML
  2. 2006/01/21 Sat 14:54:00
  3. Comment:0
  4. Trackback:0

≪ORICON 24位 -Weekly- & ラジオ・テレビ出演!  『指輪』のPVを観られるチャンスです!≫

Comment

Post a Comment

Trackback

Trackback URL
http://silverring.blog6.fc2.com/tb.php/120-ea5ffb9a
FC2ブログ 紹介予定派遣