Sorairo

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

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

advertisement

参考にした記事

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

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

実装方法

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

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

最後に

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

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

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

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

advertisement

related posts

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

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

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

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

ブログのカテゴリーを見直してみました

新しいテーマに変更しましたので、ついでにカテゴリーも見直してみました。

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

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

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

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

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

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

WordPressにプラグインなしで色々と実装する方法

プラグインは便利ですけど重たくなる場合があるためできるだけそれに頼らずテーマ作成を行いました。

初めての有料テーマ「ALBATROS」を購入しました!

初めて有料のWordPressテーマを購入しました。有料なだけあってデザインもいいし機能満載でブログ執筆意欲を掻き立てられます。

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

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

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

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