THORのアコーディオンを最初から開く方法とクリック可能に見せるCSS

※当サイトにはプロモーションが含まれています。

クライアント

THORのアコーディオンメニューを最初から、アコーディオンが開いているようにしてくれ！

にゃテック

おけまるだにゃ。

ワードプレステーマ「THE THOR（ザ・トール）」には、内容を折りたたんで表示することで、ページの視認性や可読性を高めるアコーディオンボックス機能が搭載されています。

THOR｜アコーディオンボックス機能

しかし、THOR（トール）の設定からは、このアコーディオンボックスを最初から開いた状態にすることができません。

そこで本記事では、THOR（トール）のアコーディオンボックスを初期表示で開く方法や、アコーディオンであることが読者に分かりやすくなるカスタマイズ方法について解説します。

この記事の目次

THORのアコーディオンボックスの問題点
THORのアコーディオンボックスのカスタマイズ方法

THORのアコーディオンボックスの問題点

THOR（トール）のアコーディオンボックスには、次の３つの問題点があると感じています。

THORのアコーディオン機能の問題点

初期状態でアコーディオンを開いておく設定が用意されていない
アコーディオンにマウスを乗せても、カーソルが矢印のままでクリック可能だと分かりにくい
クリックすることで開閉できることが、見た目だけでは伝わりにくい

にゃのらいと

この３点について、改善していくにゃ。

なお、本記事ではクラシックエディタを使用して解説しています。

ブロックエディタをご利用の場合は、操作方法を適宜読み替えてください。

THORのアコーディオンボックスのカスタマイズ方法

THORのアコーディオンボックスのカスタマイズ方法についてです。

初期状態でアコーディオンを開く方法

THORのアコーディオンボックスを初期状態で開くようにするには、HTMLに新しいクラスを付与し、そのクラスをもとにJavaScriptで表示状態を制御します。

THORのアコーディオンボックスのHTMLは次の通りです。

<dl class="accordionBox">
<dt class="current">タイトルタイトル</dt>
<dd style="display: block;">文章文章文章文章文章文章文章</dd>
</dl>

<dl>タグに、クラス.openedを付与するようにします。

つまり、次のように記述します。

<dl class="accordionBox opened">
<dt class="current">タイトルタイトル</dt>
<dd style="display: block;">文章文章文章文章文章文章文章</dd>
</dl>

実際に記述すると次のようになります。

THOR｜クラシックエディタ

続いて、以下のJavaScriptを</body>タグの直前に記載します。

JavaScript

jQuery(function($){
$('.accordionBox').each(function(){
const $box = $(this);
const $dt = $box.children('dt');
const $dd = $box.children('dd');

if ($box.hasClass('opened')) {
$dt.addClass('current');
$dd.show();
return;
}

if ($dt.hasClass('current') || $dd.is(':visible')) {
$dd.show();
} else {
$dd.hide();
}
});

$('.accordionBox > dt')
.off('click')
.on('click', function(){
$(this).toggleClass('current');
$(this).next('dd').stop(true, true).slideToggle(200);
});
});

このJavaScriptは、THORの次の場所に記載します。

管理画面左メニューの

カスタマイズ > 基本設定（THE） > 高度な設定

にある「</body>直上の自由入力エリア」に記述してください。

なお、記載する際は<script></script>タグで必ず囲むように注意してください。

なお、クラス.openedを付与しなければ、アコーディオンボックスは閉じたままで使用できます。

アコーディオンのカーソルを変更する方法

アコーディオンにマウスオーバーした際、カーソルを矢印から手の形（ポインター）に変更するためのCSSです。

/* アコーディオン カーソル変更 */
.content .accordionBox dt{
cursor: pointer;
}

これを反映させると、次のように表示されるようになります。

THORアコーディオンボックス｜マウスオーバー

にゃのらいと

追加CSSに記述するにゃ。

アコーディオンの上に文章を表示させる方法

アコーディオンの上に文章を表示させるとは、次のような短文（＼クリックで開閉！／）を表示させます。

THOR｜アコーディオンの上に文章を表示

これを反映させるには、<dl>タグに、クラス.opened-textを付与します。

つまり、次のように記述します。

<dl class="accordionBox opened-text">
<dt class="current">タイトルタイトル</dt>
<dd style="display: block;">文章文章文章文章文章文章文章</dd>
</dl>

クラス.opened-textのデザインをCSSで追加する必要があります。

CSS

/* アコーディオンの上に文章表示 */
.content .accordionBox.opened-text::before{
content: "＼クリックで開閉！／";
display: block;
margin: 0 0 6px;
font-size: 0.95em;
line-height: 1.2;
text-align: center;
}

表示させる文章を変更したい場合は、次の箇所を修正してください。

content: "（文章を変更する箇所です）";

こちらも、追加CSSに記述してください。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

	Windows	Mac
Google Chrome	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Microsoft Edge	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Mozilla Firefox	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Safari(Mac)	‐	【Command＋Option＋R】