【プラグインなし】WordPressで折りたたみ【アコーディオンリスト】を設置する方法を解説!

Technology
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「アコーディオンリストの設置方法」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・WordPress初心者の方
・クリックすると開く、アコーディオンリストを設置したい方
・HTMLを勉強中の方

こんな感じのものを設置します!

▼ クリックまたはタップして答えを見る!
おさかな
おさかな

今回はWordPressを使って、アコーディオンリストを設置していくよ!

ナビまる
ナビまる

わーい!(いつもと立場が逆転している…💦)

おさかな
おさかな

(えっへん!おさかなも成長したのだ☆)

【WordPress】プラグイン【codoc】で有料記事を販売してみよう!
みなさんこんにちは!おさかなです!今回は「【codoc】の有料記事販売」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・WordPressサイトで有料記事を販売したい方・有料コンテンツを販...

ソースコードの準備!

<!-- 表示部分 -->
<span onclick="obj=document.getElementById('open').style; obj.display=
(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ここに表示させたい文章を入力!</a>
</span>
<ul>
<!-- 折り畳まれる部分 -->
<span id="open" style="display: none; clear: both;">
<p>ここに展開後に表示される文章を入力!</p>
</span>
</ul>

今回は「onclick」を使って、クリックした時にid「open」を取得するといった感じのコードを作成しました。
後ほど使うので、テキスト部分を編集して、コピーしておきましょう!(よいしょ!)

【WordPress】サイトのセキュリティ診断!「URL」を入力するだけで簡単にチェックする方法!
みなさんこんにちは!おさかなです!今回は「【WordPress】サイトのセキュリティ診断!「URL」を入力するだけで簡単にチェックする方法!」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者...

WordPressに設置しよう!

それではWordPressに設置する方法を解説していきます!
まずは「ダッシュボード」>「投稿」>「新規追加」へ移動します。

ブロックエディタの場合

編集画面が開いたら、「プラスマークをクリックします!(ぽちっと!)

※まだクラシックエディタを使っている方は、ブロックエディタへ移行することをオススメします!
↓詳しくはこちら↓

【WordPress】ブロックエディタへ切り替えてみよう!
みなさんこんにちは!おさかなです!今回は「ブロックエディタ」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・まだクラシックエディタを利用している方・サポート期限が気になる方・ブロックエディ...

検索ボックス内に、「html」と入力して「カスタムHTML」という項目をクリックします!

すると、コードを入力するブロックが表示されると思います!(コンニチワ!)

ブロックの中に、先ほどコピーしておいたコードを貼り付けます!

プレビュー」に切り替えてみると…?こんな感じで、無事にアコーディオンリストが動作しているのが確認できます。(やった~!)

クラシックエディタの場合

まだブロックエディタへの移行が済んでおらず、クラシックエディタを使用されている方は「テキスト」タブをクリックして、コードを貼り付ければOKです!

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

【無料】アフィリエイトOKの「ブログ」サービス【Seesaa】を使ってみよう!
みなさんこんにちは!おさかなです!今回は「Seesaa」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・副業でブログを始めたい方・ブログでアフィリエイトを行いたい方・個人でブログを運営する...

ここまで読んでくださり、ありがとうございました!

おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。引っ越し以外の理由で3回も転校したのに、結局中卒。
現在はマイペースに「プログラム」書いたり、「作曲」したり「文章」書いたり色々してます。
SAOのユウキが好きです!

おさかなをフォローする

この記事は役に立ちましたか?

タイトルとURLをコピーしました