Wordpress

目次を開閉可能なアコーディオン型の項目にする方法【WordPress】【AFFINGER5】【jQuery】

  1. HOME >
  2. Wordpress >

目次を開閉可能なアコーディオン型の項目にする方法【WordPress】【AFFINGER5】【jQuery】

目次を開閉可能なアコーディオン型の項目にする方法

アコーディオン型の項目にする

  • 縦に長くなる目次を表示・非表示と切り替えられるようにしたい。
  • スマホで見やすいように、縦長になった塊を折りたためるアコーディオンにしたい。

ココがポイント

結論:

  1. Webフォントを適用する空箱を、jQueryで挿入する
  2. CSSで表示もしくは非表示にする新しいクラスを作成しておく
  3. jQueryの「on click」イベントで目的の場所がクリックされたら、処理が行われる関数を定義
  4. 関数の中に先ほどつくったクラスを追加する処理を書く

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、Webページを作成していると、箇条書きが縦長になり全体的に見にくくなっているそのように感じたことはございませんか?

私も、目次を追加しましたが、画面で見てみると、縦に長い目次になり、それだけでサイドバーを埋め尽くしている状態になっていました。

そこで、jQueryを利用していろいろ試行錯誤した中で収納できるメニューWordPressでも実装することができたので、今回ご紹介させていただきます。

自動生成される項目は意図しないパーツなどが、すでに適用されていて、思うようにWebフォントを追加できない場合がございますので、これからご紹介する「新しく空の要素を追加する」方法も試してみて下さい。

 

1.自動生成する目次を作る

自身のWebページをよりわかりやすくしてくれる目次を自動生成できれば、作業の時間短縮につながります。そんな方に便利なプラグイン「Table of Contents Plus」があります。是非インストールしてみてください。

もっと詳しく

 

2.アコーディオン型の目次にする

2.Step1_自身のWebページにある目次のidとclass属性値を確認

Webページ上で「右クリック」して「検証(I)」を選択してソース画面をひらきます。もしくは「F12」キーを押し「Elements」にタブを変更してソース画面をひらきます。

アコーディオン型にしたい要素のid名もしくはclass名を確認。(id名を使用する方が安全ではあります。)

もっと詳しく

 

2.Step2_コードをコピペ

/* 目次体裁 */
#toc-widget-3 .toc_widget_list {
  display: none;/*リストを非表示*/
  border: 1px solid #163999;
  background-color: #fff;
  padding: 0.5em;
}
#toc-widget-3 .toc_widget_list li{
  margin: 5px;
  font-size: 0.95em;
}
#toc-widget-3 .toc_widget_list li ul li{
  margin-left: 1em;/*小項目を1字下げ*/
}
/* toggleClass用 */
.addAfter::after{
  font-family: 'FontAwesome';
  content: '¥f101';/*最初のWebフォント*/
}
.changeAfter::after{
  font-family: 'FontAwesome';
  content: '¥f103';/*クリックしたときのWebフォント*/
}
#toc-widget-3 .menu_underh2{
  cursor: pointer;/*ポインタを指に変える*/
}
#toc-widget-3 .toc_widget_list.open{
  display: block;/*openクラスが追加されると表示する*/
}

CSSに上記を追加してください。

 

jQuery(document).ready(function($){
  $(window).on('load', function() {
    $('#toc-widget-3 .menu_underh2'/*目次の見出しセレクタ*/).append('<div class="addAfter" style="float: right; position: relative;  right: 5%;"></div>');/*空の要素を追加_rightの値を触れば右からの位置を調整可能*/
  });
  /* 目次の開閉 */
  $('#toc-widget-3 .menu_underh2'/*目次の見出しセレクタ*/).on('click', function(){
    $(this).next().toggleClass('open');/*openクラスを追加削除する*/
    $(this).children('div').toggleClass('addAfter');
    $(this).children('div').toggleClass('changeAfter');
  });
});

JavaScriptに上記を追加してください。

後は、それぞれのセレクタを、自身のWebページに対応するように変更して下さい。
「#toc-widget-3」から始まる部分が、変更をするセレクタになります。

 

3.簡単なコードで目次をアコーディオン型にする

Webフォントを使用せずに「+」「ー」の切り替えで開閉を表現する方法です。
CSSとJavaScriptが簡単なので、ページ読み込みが軽くなります。

 

4.Webフォントを使用したアコーディオン型にする

参考

CSSの擬似要素(::before、::after)が使用できる要素であれば、こちらの方法でもWebフォントを使用したアコーディオン型にできます。
アコーディオン型にしたい要素が、すでに擬似要素を使用していると、Webフォントを追加できないので、そのときは今回の方法を試してみて下さい。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.