WordPressブログで長い項目を折りたたみしておく方法(アコーディオン)

一人事務所を大阪で営む税理士のブログ | Wordpressブログで長い項目を折りたたみしておく方法(アコーディオン)

WordPressでブログを書いていて長くなったときに、折りたたみをすることができます。

短くできると、読み手はシンプルに画面を見られるので便利です。

方法は二つ。HTMLを使う方法とプラグインを使う方法。
両方ともご紹介いたします。

もくじ

HTMLを使って書く方法

WordPressにて、テキスト表示を選びます。

一人事務所を大阪で営む税理士のブログ | Wordpressブログで長い項目を折りたたみしておく方法(アコーディオン)

テキスト部分に下記のソースをコピペしましょう。

ポイントとして、タイトル部分を「<summary>タイトル</summary>」のように囲います。

その下から</details>までは、折畳みたい内容です。
<p>でもhタグも仕様できます。

<details>     <summary>折りたたみたいもののタイトル</summary>     <p>折りたたみの中身1</p>     <p>折りたたみの中身2</p>     <p>折りたたみの中身3</p> </details> 

実際にコードを入れてみると、こんな感じでうまくいっています。

折畳みたいもののタイトル

折りたたみの中身1

折りたたみの中身2

折りたたみの中身3

プラグインを使う方法

プラグインを使うと規定のもので用意できます。

「Shortcodes Ultimate」を使うと、ひな形を入れ込めます。

使う場合は、以下からダウンロードして有効しましょう。

WordPress.org 日本語
一人事務所を大阪で営む税理士のブログ | Wordpressブログで長い項目を折りたたみしておく方法(アコーディオン)
WP Shortcodes Plugin — Shortcodes Ultimate ビジュアルコンポーネントの包括的コレクション

インストールしたら編集画面に出てくる「ショートコードを挿入」をクリックしましょう。

一人事務所を大阪で営む税理士のブログ | Wordpressブログで長い項目を折りたたみしておく方法(アコーディオン)

「アコーディオン」を選びます。

一人事務所を大阪で営む税理士のブログ | Wordpressブログで長い項目を折りたたみしておく方法(アコーディオン)

とりあえず、これで「ショートコードを挿入」をしてみます。

一人事務所を大阪で営む税理士のブログ | Wordpressブログで長い項目を折りたたみしておく方法(アコーディオン)

このように挿入されますね。
一人事務所を大阪で営む税理士のブログ | Wordpressブログで長い項目を折りたたみしておく方法(アコーディオン)

あとは必要なところの内容を編集して作り込み可能です。

[su_accordion][su_spoiler title=”スポイラーのタイトル” open=”no” style=”default” icon=”plus” anchor=”” class=””]非表示のコンテンツ[/su_spoiler] [su_spoiler title=”スポイラーのタイトル” open=”no” style=”default” icon=”plus” anchor=”” class=””]非表示のコンテンツ[/su_spoiler] [su_spoiler title=”スポイラーのタイトル” open=”no” style=”default” icon=”plus” anchor=”” class=””]非表示のコンテンツ[/su_spoiler][/su_accordion]

ちなみに、” open=”yes”にしておくと最初から開いておくことができます。

まとめとして

一人事務所を大阪で営む税理士のブログ | Wordpressブログで長い項目を折りたたみしておく方法(アコーディオン)

「細かく書いて誤解の内容にしたい」というのと「シンプルに書きたい」というバランスを取るために、折りたたみは便利です。

書く側は長く滞在してもらいたいですが、読む側はさっさと必要な情報を取りたいはず。

長くなったなぁというときに、上手に使えると便利ですよ。

【編集後記】
個別コンサルティングとWEBセミナーを受講しました。
ホスト側ではないの楽ではありますが、それでもぶっ通しは体力使いますね。

【運動記録】
ジョギング○ ストレッチ○ 筋トレ○ サプリ○

【一日一新】
とあるセミナー
個別コンサルティング

【子育て日記】
早起きして二人でお散歩です。
早起きしている子ども好きの犬とも遊べて楽しそうでした。

もくじ