2018/07/15 改訂版 「『あなたの悩み、分かるわ』詐欺に気を付けろ」「周りの人をカウンセラーにしない」「人生なんて相談しても仕方がないことが多い」

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

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

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

山盛りコンテンツにおすすめしたいのが、プラグイン『Show-Hide/Collapse-Expand
//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

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

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

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

Tags: ,

最終更新日: 2018年2月12日 初回公開日:2018.01.30

海洋小説『曙光』MORGENROOD

CTA-IMAGE
海洋科学、鉱業、建築などをモチーフにした新感覚の人間ドラマ。『生の哲学』をテーマに人生、恋愛、仕事について描く長編小説です。Kindle Unlimitedなら読み放題。