コンテンツの折りたたみ機能で記事をコンパクトに見せる『Show-Hide/Collapse-Expand』

数千字~1万字超えの長文コンテンツの場合、読み込みに時間がかかったり、長文とわかった途端、離脱されたり、デメリットも多いです。

山盛りコンテンツにおすすめしたいのが、プラグイン『Show-Hide/Collapse-Expand
https://ja.wordpress.org/plugins/show-hidecollapse-expand/

このプラグインは、ショートコードで括った部分をコンパクトに折りたたみ、クリックすれば開いて見せるものです。

こんなケースにおすすめ。

・ アーカイブリストやサイトマップ
・ お知らせ(サイドバーのトピック)
・ FAQ
・ 1万字超えの長文
・ 未成年や特定の訪問者に対するコンテンツ制御(エロ、グロ、ネタバレ)
・ 多数の画像や動画埋め込み(画面スペースを占拠するもの)
・ まんがのコマ送り(オチだけ隠す)

使い方

使い方はいたって簡単。

インストールして、設定画面でエフェクトを指定するだけです。

Show-Hide/Collapse-Expand

まず Enable jQuery UI effects にチェックを入れて、折りたたみ機能を有効化します。

Effect for displaying hidden content で、効果の見せ方を指定します。

Blind ・・ 通常の折りたたみ。コンテンツで括った部分が非表示になります。

Fold ・・ こちらも通常の折りたたみと変わりないです。私が試したところ、Blindと大きな違いは認められませんでした。
 
Highlight ・・ コンテンツを開く時、一瞬、ハイライトカラーが表示されます。でも、驚くような効果はないです。

Slide ・・ コンテンツが横からスライドして現れます。これも感銘を受けるほどではないです。

私の試した感じでは、無難にBlindを使うのが一番かと。

次に『Help』を参照し、ショートコードのパラメントを指定します。

リンクの部分は、カラフルなアイコン、もしくは リンク文字を選べます。

Show-Hide/Collapse-Expand

使用例。

[bg_collapse view="button-orange" color="#72777c" icon="arrow" expand_text="作品について" collapse_text="Show Less" ]
『少年探偵団』(しょうねんたんていだん)とは、江戸川乱歩の明智小五郎シリーズに登場する探偵団。 または、それらを主人公とした江戸川乱歩の小説。子供のみで構成されており、小林芳雄(小林少年)を団長として、名探偵明智小五郎を補佐する。
-Wikiより-
[/bg_collapse]

折りたたみ。
Show-Hide/Collapse-Expand

オープン。
Show-Hide/Collapse-Expand

テキストリンク

[bg_collapse view="link"  icon="arrow" expand_text="作品について" collapse_text="折りたたむ"]

折りたたみ。
Show-Hide/Collapse-Expand

オープン。
Show-Hide/Collapse-Expand

パラメントの種類

リンクの見せ方。ボタンの色、リンク文字列(インラインも可能)、リスト。
view=”button-orange | button-red | button-blue | button-green | link | link-inline | link-list”

アイコンの種類。矢印、ズーム、目玉。
icon=”arrow | zoom | eye ”

展開するリンクの文字列
expand_text=”any text value ”

折りたたむリンクの文字列
collapse_text=”any text value ”

リンクのスタイル。
inline_css=”(例)font-size: 21px; font-weight: normal; ”

Js機能のカスタマイズ
onclick=”(例)alert(‘Hello World!’); ”

このプラグインはショートコードで機能するので、ウィジェットにも利用可能です。

コンテンツの折りたたみは、画像、動画埋め込みにも対応しています。

ショートコード in ショートコード でも機能するので、他のリスティング・プラグインや、ギャラリー・プラグインとも併用することができます。

コンテンツの折りたたみに関しては、Collapse-O-Maticが有名ですが、こちらは設定が分かりにくいので(効果を有効にしたいdivやspanの設定が必要)、簡単設定ですぐに使い始めたい方には、Show-Hide/Collapse-Expand がおすすめです。

↓ 面倒くさい
Collapse-O-Matic

今はスマホで閲覧する人が大半なので、折りたたみ機能を上手に取り入れたら、滞在時間の延長や広告の視認率も上がると思います。

ページ分割も有効ですが、クリックして次のページに進むのがストレスに感じる人も少なくないので、分割よりは、折りたたみ→展開 で、一つの画面で全て見せた方がいいかもしれませんね。

興味のある方はぜひお試し下さい。

QUOTE CARD

  • どんな高邁な理想も、言葉だけでは人は動かせない。 身をもって示して初めて、理想が理想としての意味をもつ。 その後、彼は死ぬまで父を忘れず、その生き様を指針にするわけだが、愛とは何かと問われたら、慈しむだけが全てではない。身をもって生き様を示す勇気も至上のものだろう。 誰でも犠牲は怖い。  自分だけ馬鹿正直をして、損したくない気持ちは皆同じだ。  だが、その結果、一番側で見ている子供はどうなるか、いわずもがなだろう。  言行の伴わない親を持つほど不幸なことはない。  たとえ現世で馬鹿正直と言われても、本物の勇気、本物の優しさ、本物の気高さを間近に見ることができた子供は幸いである。 どんな高邁な理想も、言葉だけでは人は動かせない。 身をもって示して初めて、理想が理想としての意味をもつ。...
  • 「創造的」というのは詩を書いたり、絵を描いたり、という意味ではありません。無の平原から意味のある何かを立ち上げることです。 より良く生きる為に、日々、考えること、実行すること、その全てが『創造』です。 どんなに小さくても、昨日よりは今日、今日よりは明日、少しずつでも歩みを進め、善きものを積み上げることを「創造的な生き方」と言います。 「創造的」というのは詩を書いたり、絵を描いたり、という意味ではありません。無の平原から意味のある何かを立ち上げることです。 より良く生きる為に、日々、考えること、実行すること、その全てが『創造』です。...
Morgenrood 曙光

Kindle Unlimited

宇宙文明の根幹を成すレアメタルをめぐる企業の攻防と人間の生き様を描いた本格的な海洋ロマン。専門用語は使わず、予備知識のない人でも分かりやすい内容に仕上がっています。無料PDFも配布中。Kindle Unlimited 読み放題の分冊もリリース。

この記事を書いた人

石田 朋子

文芸愛好家&サブカルチャー・ファン。主に70年代~90年代の作品に思い入れがあります。寺山修司の名言『詩を作るより、田を作れ(揶揄)』をモットーに、好きな作品を次代に伝えることを目標にしています。海外在住につき、現代日本とは相容れない所がありますがご容赦ください。
※ 現在、制作巣ごもり中につき、ほとんど更新していません。