TAテーマ001 複数画像などの配置

TAテーマ001 複数画像などの配置

テーマ001情報
TAテーマ001 複数画像などの配置

以前、TAテーマ001を使用すると4種類のHTMLのタグだけでほとんどのコンテンツが表現できることのご紹介をしました。

ワードプレステーマ 覚えるHTMLは4種類

今回は少しステップアップしたテクニックのご紹介をします。

ホームページ制作していると横にコンテンツ(画像や文章)を並べたい場合が出てきます。

全てのコンテンツを縦に並べても良いのですが(初心者にはこちらがおすすすめです)、画像の説明を行いたい場合などは左右に並べた方がしっくりきます。

次の例をご覧ください。


左コンテンツタイトル

top_catch1

左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明左コンテンツの説明

右コンテンツタイトル

top_catch2

右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明右コンテンツの説明


二つのコンテンツ(タイトル、画像、説明)を横に並べた例です。よく見かけると思います。

これをHTMLとCSSを使って1から記述すると結構面倒です。

しかし、TAテーマ001のオリジナルタグ(ショートコード)を使用すると簡単に実現できます。

haichi1

先ず配列グループ全体を[配列(始)]と[配列(終)]で挟みます。

こうすることで左右の高さの大きい方にボックスの高さを合わせます。

次に左寄せショートコードと右寄せショートコードでそれぞれのコンテンツを挟むだけです。

左右寄せショートコード内のw=49は幅のサイズをフレーム(例の場合はメインフレーム)49%にするという意味です。

左右寄せショートコードは更に細かい設定が可能です。

詳しくはこちらをご覧ください。

コンテンツ(画像や文章など)の構成は自由ですから様々な組み合わせで見栄えの良いデザインが実現できます。

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

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

 

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

«
»
  • LINEで送る


ta_thm001_downloadta_designing