Sorairo

jQueryを使って記事中の目次を開閉式にしました。

先日、プラグインなしで記事中に目次を追加する方法をご紹介しましたが、その目次をjQueryを使って開閉式に改造しましたのでその方法と参考にした記事をご紹介します。

advertisement

参考にした記事

ググると色んなやり方が出てくるので迷うんですが、中でも参考になったのは以下の記事です。

2番目の記事で実装されている小さなプラスボタンが良い感じ。
次回はこれの導入にも挑戦したいです。

実装方法

jQueryに以下のコードを追加するだけです。

とても簡単に実装できました。

最後に

いかがでしたでしょうか。
jQueryには色々な書き方があるようなので、この辺もしっかり勉強して自分で制御できるようになりたいですね。

※H30.7.9追記
小さなプラスボタンを付けてみました。
目次は最初が開いている状態なのでボタンは「×」でクリックすると目次が閉じるのでボタンは「+」に変化します。
それと「CONTENTS」はやめて普通に「目次」としました。
完成形は以下の画像のとおりです。

開いている状態
閉じた状態

まぁあんまりこだわるのもどうかと思うのでこの辺にしときます(笑)

advertisement

related posts

WordPressのテーマをLION MEDIAに変更しました。

WordPressのテーマをLION MEDIAに変更しましたのでご紹介します。

WordPressの記事中にプラグインなしで目次を追加しました。

プラグインを使わずに記事中に目次を追加しましたのでご紹介します。

テーマを自作する〜その③〜アイキャッチ画像に関するあれこれの2回目。

WordPressのアイキャッチ画像に使える写真サイトの紹介と、キャプション表記についてのコツについてご紹介します。

WordPressのテーマをカスタマイズするには子テーマを作成すべし!

色んな所で言われていることですが、少しでもカスタマイズするならやっぱり子テーマは作るべきですね、簡単ですし。

jQueryプラグインのLightboxを導入しました。

画像を表示するときにフワッと拡大表示させるjQueryプラグインのLightboxを実装しました。

テーマを自作する〜その②〜アイキャッチ画像に関するあれこれの1回目。

テーマを自作するシリーズの第2回目は、WordPressでアイキャッチ画像を使えるようにするために必要なことについて調べてみました。

テーマを自作する〜その①〜投稿日などの日付表示を英語表記にする方法。

WordPressのテーマを自作するにあたり、色々な壁にぶつかります。その解決法について自分の忘備録も兼ねてシェアしていきたいと思います。

WordPressのオリジナルテーマを自作しました。

テーマを変えたら自分でも作りたくなったので作ってみました。

私のブログ更新作業環境まとめ。

ブログを書く環境って大事ですよね。継続することの難しさはその環境のせいもあるかもしれません。

WordPressの記事中に内部リンクと外部リンクを出力するショートコード

WordPressの内外部リンクについてショートコードを実装してみましたのでご紹介します。