賢威5装飾タグまとめ1

Contents

賢威5装飾タグ(賢威5・賢威6)で使える装飾タグ

MT版の賢威5を使っている人に便利な賢威5装飾タグまとめ

■見出しタグ <h1>~<h6>

h1~h6まであり、見出しタグとして使われています。

一般的な使い方は、
h1タグは、サイトタイトル(ページ中1個)
h2タグは、記事タイトル(ページ中1~2個まで)
h3タグは、記事中の見出しタイトル(特に制限なし)
h4以降は、区切り見出しとして使用します。(特に制限なし)

ですが、

h1は既にブログタイトルに使われているので、記事中で使う場合はh2、h3、h4タグを使いましょう。

見出しタグh1

見出しタグh2

見出しタグh3

見出しタグh4

見出しタグh5
見出しタグh6

タグはこのように書きます

<h1>見出しタグh1</h1>
<h2>見出しタグh2</h2>
<h3>見出しタグh3</h3>
<h4>見出しタグh4</h4>
<h5>見出しタグh5</h5>
<h6>見出しタグh6</h6>

恐れずに、思い切って使ってみるとよいでしょう。

段落タグ<p>

タグはこのように書きます

<p>段</p>
<p>楽</p>
<p>タ</p>
<p>グ</p>

★改行タグ<br />

改行
タグ

改行<br />タグ

強調ダグ(太字)<strong>
強調ダグ(太字)


<strong>強調ダグ(太字)</strong>
★強調ダグ(斜体)<em>
強調ダグ(斜体)
文字を斜体にする

タグはこのように書きます

<em>強調ダグ(斜体)</em>
<em>文字を斜体にする</em>

リストタグ<ul>と<ol>

箇条書きにする場合はリストタグを使用します。
リストタグは、2種類あります。

点を打つ場合
点を打つ場合は、

  • 学習塾
  • 予備校
  • 家庭教師
  • 独学

タグはこのように書きます

<ul>
<li>学習塾</li>
<li>予備校</li>
<li>家庭教師</li>
<li>独学</li>
</ul>

数字を打つ場合は

  1. 英語
  2. 数学ⅠA
  3. 数学ⅡB
  4. 化学
  5. 物理
  6. 地理
  7. 世界史
  8. 日本史
  9. 生物

タグはこのように書きます

<ol>
<li>英語</li>
<li>数学ⅠA</li>
<li>数学ⅡB</li>
<li>化学</li>
<li>物理</li>
<li>地理</li>
<li>世界史</li>
<li>日本史</li>
<li>生物</li>
</ol>

その他の文字タグ

1)打ち消し線

タグはこのように書きます

<del>打ち消し線</del>

2)下線

タグはこのように書きます

<u>下線</u>

3)引用タグ

引用文

タグはこのように書きます

<blockquote>
<p>引用文</p>
</blockquote>

★リンクタグ<a>

リンクを貼るためのタグです。
<a href="URL">文字</a>
SEOブログ

タグはこのように書きます

<a href="http://www.se0.info/">SEOブログ</a>

タグはこのように書きます
SEOブログ

新しいブラウザで開かせる場合は
target="_blankタグを挿入します。

★画像イメージ挿入タグ<img>

画像を表示させるためのタグです。

SEOブログ

イメージ挿入タグ
<img src=="画像のURL" alt="画像の名前" width="画像横サイズ" height="縦サイズ" />

タグはこのように書きます

<img src="http://www.se0.info/wp-content/uploads/2013/02/logo.gif" alt="SEOブログ" width="420" height="60" />

 

賢威5 装飾タグ一覧

賢威スタイルシートの装飾タグ一覧です。

<タグ class="スタイル">~~</タグ>

このようにクラススタイルを加えます。

文字の色を変える

<p class="red">で囲むとこの色になります。</p>

<p class="blue">で囲むとこの色になります。</p>

<p class="green">で囲むとこの色になります。</p>

<p class="yellow">で囲むとこの色になります。</p>

<p class="orange">で囲むとこの色になります。</p>

<p class="pink">で囲むとこの色になります。</p>

<p class="purple">で囲むとこの色になります。</p>

<p class="olive">で囲むとこの色になります。</p>

<p class="lime">で囲むとこの色になります。</p>

<p class="black">で囲むとこの色になります。</p>

<p class="blue">で囲むとこの色になります。</p>

<p class="gray">で囲むとこの色になります。</p>

ハイライト色

<span class="box-yellow">で囲むとこの色になります。</p>

<span class="box-aqua">で囲むとこの色になります。</p>

<span class="box-gray">で囲むとこの色になります。</p>

<span class="box-red">で囲むとこの色になります。</p>

フォントサイズを変える

<p class="small">で囲むとこの文字サイズ</p>

<p class="big">で囲むとこの文字サイズ</p>

<p class="big2">で囲むとこの文字サイズ</p>

<p class="f20em">こんな大きさや</p>

<p class="f24pt">も可能</p>

★文字の表示位置を変える

<p class="al-c">文字の中央寄せ</p>

<p class="al-r">文字の横位置右寄せ</p>

<p class="al-l">横位置左寄せ</p>

おすすめの記事