TAテーマ001 汎用背景装飾ショートコード

TAテーマ001 汎用背景装飾ショートコード

テーマ001情報
TAテーマ001 汎用背景装飾ショートコード

 

WordPressの固定ページや投稿記事の編集画面はビジュアルエディターでもテキスト(HTML)エディターでも時間をかけて行えばプロ並みのデザイン制作が可能です。

時間をかければ・・・

TAテーマ001はホームページをコツコツと(時間をかけて)自作される方のためのテーマです。

しかし、いつでも時間があるわけではありません。

一気にある程度の見栄えを実現しなければならない場合もあります。

今回はそんな時に重宝する汎用の背景装飾ショートコードをご紹介したいと思います。

例えば次のようなコンテンツを制作したとします。

 

genbg1

 

一生懸命に京都の参照コンテンツを作ったとします。

これだけだと見栄えが悪いので周りを囲ったりいろいろな装飾をしたいけどCSSで装飾は面倒だし・・・

次の画像をご覧ください。

genbg2

上の例は先ほど制作したコンテンツをTAテーマ001の汎用背景装飾ショートコードで挟んだだけで実現された装飾です。(下図のHTML編集画面をご覧ください)

genbg5

また、TAテーマ001の汎用背景装飾ショートコードは更に高度なテクニックも使えます。

下図はコンテンツを左に寄せて右側に本文を回り込ませた例です。

genbg3

こちらの例は先ほど制作したコンテンツをTAテーマ001の別の汎用背景装飾ショートコード(id=3)で挟んだだけで実現された装飾です。(下図のHTML編集画面をご覧ください)

genbg6

TAテーマ001の汎用背景装飾ショートコードは最大5つのパターンを設定できます。

下図は一つの汎用背景装飾ショートコード設定の例です。

genbg7

汎用背景装飾ショートコードには制作者が使用する基本的な背景装飾がほぼ全て用意されています。(スキルの高い方はフリーCSSを使って微調整を加えることもできます)

コンテンツ表示のフレームが可変(レスポンシブ)に設定されている場合、汎用背景装飾ショートコードは完全に独立した枠ですから、ブラウザの幅に対応してサイズを枠内で自動調整します。(下図をご覧ください)

genbg4

TAテーマ001の汎用背景装飾ショートコードを使って簡単に見栄えのするコンテンツ装飾を実現させて、あなたのホームページを更に成長させてください。

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

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

 

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

«
»
  • LINEで送る


ta_thm001_downloadta_designing