みなさんこんにちは!おさかなです!
今回は「アコーディオンリストの設置方法」について、書いていこうと思います!
それでは、レッツゴー!!!!!
想定読者
・WordPress初心者の方
・クリックすると開く、アコーディオンリストを設置したい方
・HTMLを勉強中の方
・WordPress初心者の方
・クリックすると開く、アコーディオンリストを設置したい方
・HTMLを勉強中の方
こんな感じのものを設置します!
▼ クリックまたはタップして答えを見る!![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
今回はWordPressを使って、アコーディオンリストを設置していくよ!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
ナビまる
わーい!(いつもと立場が逆転している…💦)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
(えっへん!おさかなも成長したのだ☆)
![](https://osakanav.com/wp-content/uploads/2021/03/codoc-paid-160x90.jpg)
【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」を取得するといった感じのコードを作成しました。
後ほど使うので、テキスト部分を編集して、コピーしておきましょう!(よいしょ!)
![](https://osakanav.com/wp-content/uploads/2021/01/wpsec-top-160x90.jpg)
【WordPress】サイトのセキュリティ診断!「URL」を入力するだけで簡単にチェックする方法!
みなさんこんにちは!おさかなです!今回は「【WordPress】サイトのセキュリティ診断!「URL」を入力するだけで簡単にチェックする方法!」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者...
WordPressに設置しよう!
それではWordPressに設置する方法を解説していきます!
まずは「ダッシュボード」>「投稿」>「新規追加」へ移動します。
![](https://osakanav.com/wp-content/uploads/2021/03/wp-sinkituika.png)
ブロックエディタの場合
編集画面が開いたら、「+」プラスマークをクリックします!(ぽちっと!)
![](https://osakanav.com/wp-content/uploads/2021/03/Inkedwp-block-new_LI-1024x554.jpg)
※まだクラシックエディタを使っている方は、ブロックエディタへ移行することをオススメします!
↓詳しくはこちら↓
![](https://osakanav.com/wp-content/uploads/2021/01/wp-block-top-160x90.jpg)
【WordPress】ブロックエディタへ切り替えてみよう!
みなさんこんにちは!おさかなです!今回は「ブロックエディタ」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・まだクラシックエディタを利用している方・サポート期限が気になる方・ブロックエディ...
検索ボックス内に、「html」と入力して「カスタムHTML」という項目をクリックします!
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedwp-c-html_LI-1024x554.jpg)
すると、コードを入力するブロックが表示されると思います!(コンニチワ!)
![](https://osakanav.com/wp-content/uploads/2021/04/wp-html-code-1024x554.png)
ブロックの中に、先ほどコピーしておいたコードを貼り付けます!
![](https://osakanav.com/wp-content/uploads/2021/04/wp-html-edit-1024x554.png)
「プレビュー」に切り替えてみると…?こんな感じで、無事にアコーディオンリストが動作しているのが確認できます。(やった~!)
![](https://osakanav.com/wp-content/uploads/2021/04/wp-edit-html.gif)
![](https://osakanav.com/wp-content/uploads/2021/03/seesaa-top-160x90.jpg)
【無料】アフィリエイトOKの「ブログ」サービス【Seesaa】を使ってみよう!
みなさんこんにちは!おさかなです!今回は「Seesaa」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・副業でブログを始めたい方・ブログでアフィリエイトを行いたい方・個人でブログを運営する...
クラシックエディタの場合
まだブロックエディタへの移行が済んでおらず、クラシックエディタを使用されている方は「テキスト」タブをクリックして、コードを貼り付ければOKです!
![](https://osakanav.com/wp-content/uploads/2020/04/Inkedwp6_LI.jpg)
↓ちなみに、同じページに「複数のリスト」を設置したい方は、こちらの記事もご参考にしてください!(おー!)
![](https://osakanav.com/wp-content/uploads/2021/12/ac-list-hukusuu-top-160x90.png)
【アコーディオンリスト】を同じページに「複数」設置する方法とは?
みなさんこんにちは!おさかなです!今回は「【アコーディオンリスト】を同じページに「複数」設置する方法とは?」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・アコーディオンリストを設置したい...
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!