HTMLProject2でのマークアップ（30代サラリーマンのためのMovableTypeで簡単！ホームページ管理）

Home＞簡単HTML入門＞HTMLProject2でのマークアップ

HTMLProject2でのマークアップ

４．マクロを使ったマークアップ

次に、HTML Project2でのマークアップの手順を説明します。

４－１．まずは、文章を書きましょう。

例として下記のような文を書いてみます。

内容は私の好みですんでご容赦くださいネ（笑）

ダウンタウンについて

Ａ．メンバー
浜田雅功、松本人志

Ｂ．結成
１９８３年

Ｃ．主な出演番組

夢で逢えたら
ガキの使いやあらへんで！
ごっつええ感じ
HEY!HEY!HEY!
ダウンタウンDX
などなど多数

Ｄ．コメント
浜ちゃんこと浜田雅功の強烈なツッコミと、松ちゃんこと松本人志の宇宙的ボケでお笑い界のリードし続ける漫才コンビ。個人的には、松ちゃんはビートたけし以来の天才だと思ってます。
学生の頃みてた、「夢で逢えたら」「ガキの使い」の面白さは忘れられん！

４－２．マクロを使ったマークアップ１

次にマクロを使ったマークアップをしましょう。

まずは、「見出し」をマークアップします。

見出しのマークアップはh1～h6タグを使います。

(1)１行目”ダウンタウンについて”の先頭と末尾以外のどこかにカーソルを移動します。

(2)「マクロツールバー」から『h1』をクリック。

以上の操作をすると

<h1>ダウンタウンについて</h1>

とマークアップされます。

もしくは、

(1)１行目”ダウンタウンについて”の先頭と末尾以外のどこかにカーソルを移動します。

(2)（アプリケーションキー）または＜Shtft+F10＞を押してポップアップメニューを開きます。

(3)ポップアップメニューの『マクロの実行』－『h1』を選択し＜Enter＞キーを押します。

※＜アプリケーション＞キーを押した後、＜↑＞、＜→＞の順でキーを押すとマクロのメニューが開きます。あとは＜↓＞キーで実行したいマクロを選択してください。

と操作してもＯＫです。

同様にh2タグで”Ａ．メンバー”、”Ｂ．結成”、”Ｃ．主な出演番組”、”Ｄ．コメント”をマークアップします。

マークアップすると下記のような形になります。

<h2>Ａ．メンバー</h2>

同様に文章部分をpタグでマークアップします。

<p>浜田雅功、松本人志</p>

４－３．マクロを使ったマークアップ２

次はリストのマークアップです。

”Ｃ．主な出演番組”の各番組名をolタグでマークアップしましょう。

(1)olタグでマークアップしたい部分の上下に空白行をいれておきます。

(2)各番組名のところにカーソルを移動します。

(3)マクロツールバーから『ol』をクリックします。

(4)ダイアログボックスが開きますので、【ＯＫ】ボタンをおして閉じます。

この操作で下記のようにマークアップされると思います。

<ol>
<li>夢で逢えたら</li>
<li>ガキの使いやあらへんで！</li>
<li>ごっつええ感じ</li>
<li>HEY!HEY!HEY!</li>
<li>ダウンタウンDX</li>
<li>などなど多数</li>
</ol>

olタグだけでなく、liタグのマークアップもしてくれるんです！

もちろん、マクロツールバーからじゃなくて、ポップアップメニューから『ol』マクロを実行してもＯＫです。

以上のようにマークアップすると、下記のような形になります。

<h1>ダウンタウンについて</h1>

<h2>Ａ．メンバー</h2>
<p>浜田雅功、松本人志</p>

<h2>Ｂ．結成</h2>
<p>１９８３年</p>

<h2>Ｃ．主な出演番組</h2>

<ol>
<li>夢で逢えたら</li>
<li>ガキの使いやあらへんで！</li>
<li>ごっつええ感じ</li>
<li>HEY!HEY!HEY!</li>
<li>ダウンタウンDX</li>
<li>などなど多数</li>
</ol>

<h2>Ｄ．コメント</h2>
<p>浜ちゃんこと浜田雅功の強烈なツッコミと、松ちゃんこと松本人志の宇宙的ボケでお笑い界のリードし続ける漫才コンビ。個人的には、松ちゃんはビートたけし以来の天才だと思ってます。</p>
<p>学生の頃みてた、「夢で逢えたら」「ガキの使い」の面白さは忘れられん！</p>