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

コンテンツの折りたたみ機能で記事をコンパクトに見せる『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

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

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

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

Amazon Kindle 電子書籍

sanmarie*comに掲載していた【「親 死んでほしい」「親 殺したい」で検索する人が多いので】の電子書籍です。心理学者・河合隼雄の名著『家族関係を考える』で紹介された『内面的な親殺し』と、父親殺しを描いたギリシャ悲劇『オイディプス』の物語をベースに、なぜ「親 死ね」「親 殺したい」といった感情が芽生えるのか、乗り越えるには何が必要か、分かりやすく解説しています。
作品詳細と冒頭部の無料サンプルはこちら。https://novella.one/oya-book

ライティングカテゴリの最新記事

Top