SU 拡大

デフォルトは(サンプルのテキストが短すぎるので最初戸惑います)

「続きを表示」→「小さく表示」??

これは、どのように使うのか?

本家の説明ページに訪ねてみますと・・・Expand

ここにあるサンプルはこうです。
【su_expand more_text=”Show more” less_text=”Show less” height=”24″ text_color=”#333333″ link_color=”#0088FF” link_align=”left”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra scelerisque urna, non posuere urna fringilla vel. Sed lorem lacus, lobortis a risus sed, gravida sodales mauris.[/su_expand】

デフォルトでは「 more_text=”Show more”」が入力されていませんが「続きを表示」、同じく「 less_text=”Show less” 」が「小さく表示」なのですね。

「テキストブロックを拡大」とは「抜粋を全文表示する」なのでした。ので、デフォルトのサンプルテキストはもう少し長文にすると良いようです。また、「height=”24″」で表示される「一行」のサイズを指定しているのでした。・・・

オプションには「 link_style=”button”」、「more_icon=”icon: search-plus” less_icon=”icon: search-minus”」などありますので、これを活用してみると・・・

またSU メモを入れ子にして・・・height=”44″としますと。


ちなみに、本家には次のような例もありました。

【su_expand more_text=”Reveal coupon code” height=”0″ hide_less=”yes” link_style=”button” link_color=”#4eba00″ more_icon=”icon: tag”] COUPON-CODE [/su_expand】

height=”0″ と指定して抜粋の一行を非表示に・・・ここでは画像も入れてみると