TAテーマ001取扱い説明(汎用ショートコード)

TAテーマ001取扱い説明(汎用ショートコード)

『TAテーマ001』の汎用ショートコード設定の説明です。

 

簡易最新投稿ダイジェスト

簡易最新投稿ダイジェスト(ショートコード作成)

short_simple1
short_simple2

簡易最新投稿ダイジェスト(ショートコード作成)に関する設定です。項目を入力して”汎用ショートコード『簡易最新投稿ダイジェスト』設定更新”をクリックすると設定が確定します。

簡易最新投稿ダイジェストはショートコードを使ってサイトのあらゆるところに簡易最新投稿ダイジェストを表示できる機能です。

表示させる場所によってショートコードが異なりますのでご注意ください。右図はトップページの説明エリアにショートコードを貼り付けた例です。

short_simple3
short_simple4

① 簡易最新投稿ダイジェストタイトル:チェックを入れるとタイトルが表示されます。

② 簡易最新投稿ダイジェストタイトルの要素名、③ 簡易最新投稿ダイジェストタイトル名

④ 非対象カテゴリー選択(簡易最新投稿表示を行わないカテゴリー)

⑤ 表示数(全数表示は-1を設定してください)、⑥ 記事行間(縦方向)の余白

⑦ 記事境界線の太さ、⑧ 記事境界線の色、⑨ 記事境界線の種類

⑩ 記事タイトルの色、⑪ HOVER時の記事タイトルの色、⑫ 記事タイトルの下線、⑬ 記事タイトルのサイズ、⑭ 記事タイトルの太さ

⑮ 日時文字の色、⑯ 日時文字の太さ、⑰ 日時文字エリアの幅(文字サイズ換算の8.5em程度が標準です)、⑱ 日時文字の時計マーク

⑲ 新規投稿マーク、⑳ 新規投稿の日数定義(投稿日から何日間マークを表示するか)

㉑ 新規投稿マーク画像

㉒ 新規投稿マーク画像の代替テキスト(画像がある場合は無効)

㉓ 代替テキストの色、㉔ 代替テキストの太さ、㉕ 代替テキストの背景色、㉖ 代替テキスト背景の角の丸み(丸み無しは0)

㉗ 新規投稿マーク画像(代替テキスト)と記事タイトルの間隔

TA汎用メニュー

TA汎用メニュー#1

short_hanyo1
short_hanyo2

5系統あるTA汎用メニューの中からTA汎用メニュー#1に関する設定を説明します。(他の系統も同じです)

項目を入力して”汎用ショートコード『TA汎用メニュー』設定更新”をクリックすると設定が確定します。

TA汎用メニュー#1はショートコードを使ってサイトのあらゆるところに汎用メニューを表示できる機能です。

TA汎用メニュー#1を使用するためにはWordPressのメニュー設定画面で任意に作成したメニューをTA汎用メニュー#1に関連付けする必要があります。(上右図)

下左図はサイドバーのフリーエリアにショートコードを貼り付けた例です。

short_hanyo3
short_hanyo4

① TA汎用メニュー#1ショートコード ※ TA汎用メニューの階層数は1段です。

② メニューテキストサイズ、③ メニューテキストの太さ

④ メニューテキストの色、⑤ メニューテキストのマウスオーバー時の色、⑥ メニューテキストの下線

⑦ メニューテキスト前の挿入コンテンツ、⑧ 挿入コンテンツとメニューテキストとの余白

⑨ 挿入コンテンツの左右のびしろ、⑩ 挿入コンテンツの縮尺

⑪ メニュー間の余白(上下の合計値)、⑫ メニュー境界線の太さ、⑬ メニュー境界線の色、⑭ メニュー境界線の種類

1系統のTA汎用メニューは10項目のメニューを表示できます。ここでは1段目の項目の説明を行います。(他の項目も同じです)

⑮ 挿入コンテンツ、⑯ 挿入コンテンツの色、⑰ 挿入コンテンツの背景色、⑱ 挿入コンテンツの太さ、⑲ WordPressダッシュアイコンを使用

画像と説明付きメニュー

画像と説明付きメニューA

short_imgexp1
short_imgexp2

2系統ある画像と説明付きメニューの中から画像と説明付きメニューAに関する設定を説明します。(B系統も同じです)

項目を入力して”汎用ショートコード『画像と説明付きメニュー』設定更新”をクリックすると設定が確定します。

画像と説明付きメニューAはショートコードを使ってトップページに画像と説明付きメニューを表示できる機能です。画像は各コンテンツのアイキャッチ画像または任意の画像を表示できます。

人気コンテンツの紹介や日替わりメニューの紹介などが容易に実現できます。

画像と説明付きメニューAを使用するためにはWordPressのメニュー設定画面で任意に作成したメニューを画像と説明付きメニューAに関連付けする必要があります。

上右図はトップページフリーエリアにショートコードを貼り付けた例です。

short_imgexp3
short_imgexp4

① メニューAの項目数、② メニューA項目間の余白

③ メニューA表示ショートコード(ショートコードをTA説明エリア、TAトップFAに張り付けることができます)

④ メニュー項目のタイトル要素名、⑤ タイトルのセンタリング、⑥ タイトルの上余白(padding)、⑦ タイトルの下余白(padding)

⑧ タイトル・画像・説明文の位置

⑨ 説明文の色、⑩ 説明文のサイズ、⑪ 説明文の太さ、⑫ 説明文のセンタリング

⑬ 説明文の上余白(padding)、⑭ 説明文の下余白(padding)

⑮ メニュー項目境界線、⑯ メニュー項目境界線の太さ、⑰ メニュー項目境界線の色

⑱ メニュー項目境界線の種類、⑲ メニュー項目境界とコンテンツの余白(コンテンツと境界線の距離)

1系統の画像と説明付きメニューは4項目のコンテンツを表示できます。ここでは1番目の項目の説明を行います。(他の項目も同じです)

⑳ メニュー項目#1タイトル、㉑ メニュー項目#1アイキャッチ画像

㉒ メニュー項目#1画像

㉓ メニュー項目#1説明、㉔ メニュー項目#1説明文

TA汎用背景装飾

TA汎用背景装飾#1

genbg1
genbg2
genbg3

5系統あるTA汎用背景装飾の中からTA汎用背景装飾#1に関する設定を説明します。(他の系統も同じです)

項目を入力して”汎用ショートコード『TA汎用背景装飾』設定更新”をクリックすると設定が確定します。

① 背景装飾#1の開始ショートコード、② 背景装飾#1の終了ショートコード

③ 装飾域(枠):使用フレームの幅(100%)に対する比率です。

④ 装飾域(枠)の位置:装飾域(枠)使用フレーム内での位置を指定します。

⑤ 装飾域(枠)内コンテンツの位置:装飾域(枠)内コンテンツの位置をしています。コンテンツ内の位置指定に影響を与えない場合は”設定なし”を選択します。

⑥ 左右寄せ時の端からの距離(装飾域(枠)の位置が左右寄せの場合に有効です)

⑦ 装飾域(枠)の上側余白、⑧ 装飾域(枠)の下側余白

⑨ 下コンテンツの回り込み(装飾域(枠)の位置が左右寄せ時のみ):有効の場合、装飾域(枠)の直下に記述されているコンテンツが余白に回り込みます。

⑩ 回り込みコンテンツとの余白:装飾域(枠)が左寄せの場合は右側と下側に、装飾域(枠)が右寄せの場合は左側と下側に余白を付けます。

⑪ 装飾域(枠)境界線、⑫ 装飾域(枠)境界線の太さ(非表示は0)

⑬ 装飾域(枠)境界線の色、⑭ 装飾域(枠)内の背景色

○ 装飾域(枠)境界の丸み(丸みを付けない場合は0を入力):⑮ 左上、⑯ 右上、⑰ 右下、⑱ 左下

⑲ 装飾域(枠)境界線の種類

○ 装飾域(枠)境界と内部コンテンツの余白:⑳ 上、㉑ 右、㉒ 下、㉓ 左

その他便利ショートコード

コンテンツを自動配列するオリジナルショートコード

ect_short1
ect_short2

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

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

① 先ず、[配列(始)]と[配列(終)]で枠を作ります。この枠が表示するところ(メインとかサイドバーとか)の100%の幅を持つベースになります。左上図の赤枠で示しています。

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

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

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

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

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

ect_short7
ect_short8

① 先ず、[配列(始)]と[配列(終)]で枠を作ります。この枠が表示するところ(メインとかサイドバーとか)の100%の幅を持つベースになります。左上図の赤枠で示しています。

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

③ 画像の下に回り込みをさせたいテキストを書きます。必ず画像を先(上)にしてください。上図の緑枠で示しています。

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

使い方を忘れた場合はTAテーマ001設定欄の上部注釈をクリックすると説明を見ることができます。

※ 日本語のショートコード以外にも英語表記もあります。(注釈を参照してください)

※ WordPressのエディターは編集画面の改行に意味を持たせるため上の例では全て詰めて記述しています。

コンテンツをアコーディオン展開するオリジナルショートコード

ect_short3
ect_short4

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

① 先ず、[アコーディオン題目 id=abc]と[/アコーディオン題目]でクリックさせるコンテンツ(画像やテキスト)を囲みます。このとき必ずidに名前を付けます(英数字)。上図の赤枠で示しています。

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

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

使い方を忘れた場合はTAテーマ001設定欄の上部注釈をクリックすると説明を見ることができます。

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

※ 日本語のショートコード以外にも英語表記もあります。(注釈を参照してください)

  • LINEで送る


ta_thm001_downloadta_designing