汎用ショートコード設定(その他)

『TAテーマ001: Version 2.07以降』の汎用ショートコード設定(その他)の説明です。

 

ご覧になりたい項目をクリックしてください

コンテンツの自動配列

アコーディオン展開

汎用ショートコード設定(その他)コンテンツの自動配列
一般的な使用方法

実例

コンテンツを自動配列するオリジナルショートコードは画像やテキストを枠の中で簡単に配置できるショートコードです。

最初に一般的な使用方法の説明をします。

① 先ず、[auto_layout_begin]と[auto_layout_end]で枠を作ります。この枠が表示するところ(メインとかサイドバーとか)の100%の幅を持つベースになります。左上図のピンク色領域です。

② 次に左側に配置したいコンテンツ(画像やテキスト)を[left_content_begin]と[left_content_end]で挟みます。そして左寄せするコンテンツの幅(割合)を[left_content_begin w=60]の様に書きます。これは挟まれているコンテンツの幅を60%にして左に寄せるという意味になります。左上図の緑色領域です。

③ 更に右側に配置したいコンテンツ(画像やテキスト)を[right_content_begin]と[right_content_end]で挟みます。そして右寄せするコンテンツの幅(割合)を[right_content_begin w=38]の様に書きます。これは挟まれているコンテンツの幅を38%にして右に寄せるという意味になります。左上図のオレンジ色領域です。

この配列、左寄、右寄のタグを組み合わせることで複雑な配置が簡単に実現できます。

また、左寄、右寄タグには幅を指定するw以外にも上側余白(t:em単位)、右側余白(r:%単位)、下側余白(b:em単位)、左側余白(l:%単位)、のりしろ(p:ピクセル単位)の指定ができます。のりしろは次のテキストの画像回り込みで再度説明します。

※ 使い方を忘れた場合はTAテーマ001設定欄の便利情報をクリックすると説明を見ることができます。

※ WordPressのエディターは改行等の自動体裁を施すため、例ではショートコード等を全て詰めて記述しています。

テキストの画像回り込み

実例

テキストの画像回り込みの例を紹介します。

① 先ず、[auto_layout_begin]と[auto_layout_end]で枠を作ります。この枠が表示するところ(メインとかサイドバーとか)の100%の幅を持つベースになります。左上図のピンク色領域です。

② 次に右側に配置したい画像を[right_content_begin]と[right_content_end]で挟みます。そして右寄せする画像の幅(割合)と回り込むテキストとののりしろを[right_content_begin w=50 p=10]の様に書きます。これは挟まれている画像の幅を50%にして、画像の左と下に10ピクセルののりしろをつけて右に寄せるという意味になります。左上図の緑色領域です。

③ 画像の下に回り込みをさせたいテキストを書きます。必ず画像を先(上)にしてください。左上図のオレンジ色領域です。

また、画像が左寄せの場合には画像の右と下にのりしろができます。

※ 使い方を忘れた場合はTAテーマ001設定欄の便利情報をクリックすると説明を見ることができます。

※ WordPressのエディターは改行等の自動体裁を施すため、例ではショートコード等を全て詰めて記述しています。

上級者編

WordPress標準のエディターによる自動体裁化

WordPress標準のエディターによる自動体裁化機能を無効にした結果

WordPressのエディターは改行等の自動体裁を施すため、上例ではショートコード等を全て詰めて記述しました。

しかし、HTML記述を綺麗に書きたい人や思った通りにコンテンツを配置したい人には邪魔な場合があります。(自動である程度の体裁を付けてくれるので便利ですが)

そのような不満をお持ちの方はTAテーマ001の便利ツール設定メニューのwpautop関数設定(詳細はこちら)をお試しください。

WordPress標準エディターの自動体裁機能の正体はwpautop関数です。この機能をオフにした場合の例を左下図に示します。

HTML記述に忠実に従った出力が得られます。

汎用ショートコード設定(その他)アコーディオン展開

実例

コンテンツをアコーディオン展開するオリジナルショートコードはあるコンテンツ(画像やテキスト)をクリックすると隠れていたコンテンツ(画像やテキスト)がアコーディオンの様に広がって出てくる(またはその逆)を簡単に実現するショートコードです。

① 先ず、[slide_title_begin id=abc]と[slide_title_end]でクリックさせるコンテンツ(画像やテキスト)を囲みます。このとき必ずidに名前を付けます(英数字)。左上図のピンク色領域です。

② 次にアコーディオン展開をさせたいコンテンツ(画像やテキスト)を[slide_content_begin id=abc]と[slide_content_end]で挟みます。そしてクリックさせるコンテンツに付けたidと同じ名前を付けます。(英数字)左上図の緑色領域です。

これで完成です。クリックすると開いたり閉じたりする有名なアコーディオン展開です。

※ CSSデザインを施したい場合は、タイトルに”#(あなたが付けた名前)_title”が、内容に”#(あなたが付けた名前)_disp”が使用できます。例では”#abc_title”、”#abc_disp”となります。

※ 使い方を忘れた場合はTAテーマ001設定欄の便利情報をクリックすると説明を見ることができます。

※ 例はWordPressのエディターは改行等の自動体裁機能をオフにしています。自動体裁機能をオンのまま使用する場合はエディターにより改行などが施されます。(詳細はこちら

  • LINEで送る


ta_thm001_downloadta_designing