TAテーマ001 覚えるHTMLは4種類

TAテーマ001 覚えるHTMLは4種類

テーマ001情報
TAテーマ001 覚えるHTMLは4種類

 

今回はTAテーマ001を利用した場合、4種類のHTMLのタグを覚えるだけでほとんどのコンテンツは表現できることのご紹介です。

覚えるHTMLタグは次の4種類。

① <h番号></h番号>(番号:2~6)

② <p></p>

③ <img src=”画像の存在するURL” />

④ <a href=”リンク先URL”></a>

それぞれのタグの説明をします。

① <h番号></h番号>(番号:2~6)

これはヘッドライン(見出し、タイトル)と呼ばれるタグです。h2からh6まで定義されています。

厳密なルールでは無いのですが、数字が小さいほど大きな(上位の)見出しにすることが多いです。

使い方は非常に簡単で、タイトルにしたい文章(テキスト)をタグで挟むだけです。こんな感じです → <h2>大見出し</h2>

② <p></p>

p(paragraph)タグは一般的な文章段落を表記するために定義されています。

文章の段落ですから改行されます。また、pタグには前後の要素との余白などが設定されています。

使い方は、段落(簡単に言うとまとめたい部分です)にしたい文章(テキスト)をタグで挟むだけです。こんな感じです → <p>文・・・章。</p>

③ <img src=”画像の存在するURL” />

これは画像を挿入するタグです。このタグは直接記入するよりもWordPressの標準編集画面にある「メディアを追加」を使用したほうが便利です。

これは挿入するだけなので何かを挟むことはできません。(当たり前ですね)

④ <a href=”リンク先URL”></a>

これはアンカータグと呼ばれるものです。要はリンクを張るための物です。最もHTMLらしい機能ですね。

このタグは直接記入するよりもWordPressの標準編集画面にあるlinkボタンを使用したほうが便利です。

 

4htmls_1

ほとんどのコンテンツが左図の様な構成の組み合わせで実現できます。

画像を左右に寄せたり、文字が画像に回り込んだり・・・様々なテクニックがありますが、最初は画像は中心にドンッと配置する構成からマスターするべきです。

つまり、全ての要素(タイトル、文章、画像など)が独立していて互いに入り込まない(干渉しない)構成です。

縦にドンッドンッドンッドンッという感じです。

これでも立派なコンテンツに制作ができますからご期待ください。

 

さて、これらを踏まえて実際にコンテンツを制作して行きましょう。もちろんWordPressの編集画面はテキスト(HTML記述)を選択します。

4htmls_2
4htmls_3

左図はTAテーマ001を使って制作したコンテンツ例です。

タイトルにはh2を使用しています。h2にclass=”title”が付随していますがこれはある特定の装飾されたh2という意味です。ある特定を指す記号が”title”だとお考えください。

サブタイトルにはh3を使用しています。h2やh3はTAテーマ001の設定にて定義します。設定の詳細はこちらをご覧ください。

通常の文章は段落(まとまり)毎にpタグで挟みます。

リンクを張りたい場合は<a href=”移動させたいURL”>と</a>で文章を挟みます。リンクは手入力しなくてもWordPress標準編集画面のlinkボタンを使用するとより簡単にできます。

画像は<img src=”画像の存在するURL” />を挿入します。WordPress標準編集画面の『メディアを追加』を使用すると便利です。

箇条書きはh2~h5ヘッドライン、もしくは修飾1~修飾4を使用して実現します。

修飾画像はh2~h5や修飾1~修飾4の設定で指定します。設定の詳細はこちらをご覧ください。

※ スペースを空けたい場合には<p>全角スペース</p>を使用すると段落設定が使用できます。

※ h2~h5や修飾1~修飾4にリンクを張りたい場合はh2~h6の内部の文章に張ります。→ <h2 class=”title”><a href=”#”>リンクを張りたいタイトル</a></h2> これはh2などの設定の中にリンクが張られた場合の文字色などの情報があるためです。

 

たった4種類のHTMLタグでここまでのコンテンツ制作が可能です。

しかし逆に言うと、たった4種類のHTMLタグですがこれだけ覚えることがあります。

HTMLの一番面倒なところ(今回で言えばh2~h5ヘッドラインや修飾1~修飾4のデザイン設定)はTAテーマ001に任せて、みなさんは縦にドンッドンッドンッドンッと要素を並べて行くことに慣れていただけたらと思います。

コンテンツ制作の8割はこのテクニックだけでOKです。

この段階をマスターしてから次(複数画像配置、文章の画像の回り込み、背景色、要素のアコーディオン展開・・・)へとステップアップしましょう。

今後は折を見てTAテーマ001を使用したステップアップのテクニックを紹介していきたいと思います。

 

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

«
»
  • LINEで送る


ta_thm001_downloadta_designing