感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

目次ジェネレータを作ってみた。

<スポンサーリンク>

ブログの冒頭に目次を貼り付けたいってときに使えるように、目次ジェネレータを作ってみました。
下にあるような目次を作るのに、いちいちHTMLを手打ちするのが面倒くさいというのがきっかけで、
とりあえず目次の内容だけ記述すれば勝手にHTMLを出力してくれるようにしました。

この記事の目次も「目次ジェネレータ」を使って作っています(笑)

URLはコチラ→http://www.netero.co/blogtools/mokuji.html

目次

作ったきっかけ

Googleからのアクセスが一気に減ったので、理由を考えるためにSEOの勉強をしました。

色々と読んでいて勉強になったんですけど、その中で目についたのが、「検索エンジンは箇条書きを好む」という記載でした。
Qiitaの記事などでもたまに見かけるのですが、冒頭に目次を箇条書きにしているものがあって、こういうのをブログに取り入れたいと思ったのがきっかけです。

でも、目次を作るにはいちいちリストをHTMLで書かなければいけなくて、面倒です。
その面倒さが、俺を目次から遠ざける。

そんな面倒さをできるだけ軽減しようと思って作りました。


使い方

こんな画面が出てくると思うんですが、
f:id:sho322:20140718173520j:plain

「目次項目」に見出しにしたい内容を書きます。
それが、目次になり、hタグで囲まれる見出しの名前になります。

見出しにジャンプするときには、a href="xxxx"を指定する必要がありますが、「href="xxxx"」のxxxx
に設定する項目を書くのが、「項目属性」の列です。

行が足りなかったら「行を追加する」ボタンを押してください。

見出しに使うタグや、目次をol(順序あり)にするか、ul(順序なし)にするかはセレクトボックスやラジオボックスで選択することができます。

全て入力が終わったら、「HTMLを作成する」ボタンを押してください。

すると、下の方のテキストエリアに生成されたHTMLが表示されます。


・・・突貫で作ったのでバグがあるかもしれませんが、とりあえず、「作って公開すること」が一歩目かな、と思ってやってみました。
これからも勉強するだけではなく、色々と作って公開していきたいと思います。