2016.05.21
1370文字 / 読了時間:1.7分程度
web/design/css/php/js..

自動作成の目次はあると便利ってことで、最初はWordPressプラグイン「Table of Contents Plus」を使っていたけれど。

page topと重なるとか、プラグインをできる限り減らしたいという方針にあわない(外部プラグインを使うとたまに更新でデザインからやり直すはめになったり面倒)ところは気になっていたり。

てことで、見出し以外もhomeとかfooterへも飛べると便利かなってことで、同梱で作りなおしてみることに。

TOC(jQuery plugin)?

TOC(table of contents)のjQueryプラグイン、ライセンス(MIT)含めて良さそうなの見つけたので、これを同梱で使ってみることに。

TOC
http://projects.jga.me/toc/

TOC is a jQuery plugin that will automatically generate a table of contents for your page. You can see an example of it on the left side of the page.

日本語の使い方の説明はここがわかりやすかった。WordPress用の説明もあったし。

TOC(jQuery plugin)の特徴?

このプラグインのいいところは、現在いる見出しがどこかも区別してくれるところかな。

長くて見出しが多かったり、似たような見出し(数字だけとか)が続いている場合には、便利だと思ったり。

逆に階層を反映する機能はこれにはない(WordPressプラグイン「Table of Contents Plus」にはあった)けれど(ある?)、個人的にはサイドの狭い場所に表示するから階層も表示に反映するとごちゃごちゃするから別にいらないかなという印象なので、なくていいかなという感じ。

一つあんまりありがたくないのは、見出しに飛ぶと「#toc1」みたいなのがアドレスに出る。
ここごちゃごちゃするの好きじゃないけれど、ただまあそんなに実害はないからまあ妥協できるところかな。

WordPressテンプレートにTOC機能を追加する

てことで、最近使っているテンプレートに(M,Mb,Nの3つ)、この機能を追加してみたり。

「footer.php」にこの機能関連は書き込んだので、いじるとしたらここ。

右側にマウスオーバー(hover)すると、「#toc_container」部分が表示されるという仕様。

このコンテナの中に「#toc」をいれたので、見出し以外にもコンテナの中に「page top」「footer」「home」とかへのリンクもまとめていれたので、メニュー代わりにもなってすっきりしたかなとか。

ただし、現状はスマホ用のデザインは作っていないので、「display:none」にしてあるけれど。

これはWordPressの分岐を使って、スマホ用はアコーディオンのアイコンを出すようにそのうちやってみようかなという気分。

あとランダムリンクもつけてみたり。

backもあると便利かもしれないけれどそろそろ鬱陶しいような気もしたり。

戻るはブラウザのショートカット(alt ←)使えばいいからいいか。

まとめ

とりあえず、デザイン含めて当面はこんなでいいかな。

おわり。









Comment



CAPTCHA




Memo.Medamayaki

三国志他歴史、小説、ゲーム等に関するメモ用ブログ。

TEMPLATE:Ateh's theme

×

Status


苗字:
名前:
性別:
年齢:
通り名:
出身:
誕生月:
誕生日:
職業:
種族:
武器:
属性:
髪色:
目色:
口癖:

Setting

苗字:
名前:
性別:
年齢:
通り名:
出身地:
誕生月:
誕生日:
職業:
種族:
武器:
属性:
髪色:
目色:
口癖:





× 
×

Recent Posts

×

Custom Menu