TAテーマ001 アコーディオン展開

TAテーマ001 アコーディオン展開

テーマ001情報
TAテーマ001 アコーディオン展開

 

今回は少し高度なテクニックを紹介します。

クリックするとコンテンツ(画像や文章)がアコーディオンの様に伸びて表示される演出をご覧になったことがあると思います。

例えば次の様な感じです。下の”アコーディオンの歴史”をクリックしてください。

 


 

このような演出はJavaScriptなどを使用して行うのですが、一般的には面倒な作業です。

しかし、TAテーマ001を使用するといとも簡単にできてしまいます。

先ほどのアコーディオン展開のHTML記述をみてみます。(WordPress標準編集のテキストモード)

accordion1

TAテーマ001オリジナルのタグ(ショートコードと言います)でアコーディオン展開のタイトルとコンテンツをそれぞれ挟み込むだけです。

[アコーディオン題目 id=abc]と[アコーディオン内容 id=abc]の中にid=abcとあるのは題目と内容を関連付けるための記号です。

このidさえ一致していたら離れた場所にあってもアコーディオン展開します。(同じページ内)

※ TAテーマ001オリジナルのタグ(ショートコード)はビジュアルエディターの中でも使用できますが、WordPressのビジュアルエディターは使いにくい(思い通りに配置できない)場合が多いためテキストモード(HTML)で編集を行うことをおすすめします。

※ Version2.07から日本語ショートコードの使用は非推奨になりました。現在の取り扱い説明には英数字のショートコードが紹介されていますのでそちらをご使用ください。(日本語ショートコードも有効なのでこれまでのコンテンツを書き直す必要はありません)

 

お役に立てれば幸いです。

«
»
  • LINEで送る


ta_thm001_downloadta_designing