スポンサーリンク

WordPressブログで長い項目を折りたたみしておく方法

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

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

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

 

スポンサーリンク

HTMLを使って書く方法

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 Shortcodes Plugin — Shortcodes Ultimate
ビジュアルコンポーネントの包括的コレクション

 

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

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

 

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

このように挿入されますね。

 

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

スポイラーのタイトル
非表示のコンテンツ
スポイラーのタイトル
非表示のコンテンツ
スポイラーのタイトル
非表示のコンテンツ

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

まとめとして

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

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

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

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

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

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

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

Wordpress
スポンサーリンク
akをフォローする
スポンサーリンク
AK-UP まいせん(毎日の処方箋)