Sorairo

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

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

advertisement

参考にした記事

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

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

実装方法

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

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

最後に

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

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

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

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

advertisement

related posts

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

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

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

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

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

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

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

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

今日からまた、WordPress始めます。

心機一転、新たにブログを書き始めます。iPhoneを購入して一変した私の人生を記録していければと思っています。

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

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

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

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

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

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

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

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

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

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