記事を書く前に覚えたい、よく使うHTMLタグ

賢威以外でもブログやサイトで記事を書いたりカスタムする場合に、
絶対覚えないと行けないのがHTMLタグです。

HTMLタグには様々なものがあり目を背けたくなりますが・・
記事の作成やサイトのカスタマイズ程度なら実際に使うタグはそんなに多く無いです。

基礎だけでも覚えるだけでブログ作成の幅は一気に広がりますよ＾＾

ここでは、これだけは覚えておきたいよく使うHTMLタグと
最後に賢威で使用出来るスタイルシートの一部をご紹介します。

 

よく使うHTMLタグ一覧

■見出しタグ <h○>

h1からh6まであり、見出しタグとして使われています。
↑の「よく使うHTMLタグ一覧」と言うのは見出し3のタグを使用しています。

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

使い方

<h3>よく使うHTMLタグ一覧</h3>

 

■段落タグ<p>と改行タグ<br />

文字を書く上でもっとも重要なタグです。
文字と文字の段落を表します。
段落Pと改行brは、非常に似ていますが、使い方が違います。

Pは、文章が終わり次の行へを意味します。

段落<p>タグ例：

<p>むかしむかしあるところに、おじいさんとおばあさんがいました。</p>

<p>おじいさんは、村へ芝刈りに、おばあさんは山へ選択に行きました。</p>

brは、文字の折り返しを意味しており、
デザイン上２段などにしたい場合に使用します。

改行＜br /＞タグ例：

<p>むかしむかしあるところに、＜br /＞
おじいさんとおばあさんがいました。</p>

<p>おじいさんは、村へ芝刈りに、＜br /＞
おばあさんは山へ選択に行きました。</p>

このように使います。

 

■強調ダグ（太字）<strong> 強調ダグ（斜体）<em>

文字を太文字にしたり、斜体にする場合に使用します。

<em>強調ダグ(斜体)</em>

<strong>強調ダグ(文字の太字)</strong>

 

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

箇条書きにする場合はリストタグを使用します。
リストタグは、一般的に２種類あり使い分け出来ます。

点の場合は、
・桃太郎
・金太郎
・浦島太郎

<ul> 
<li>桃太郎</li> 
<li>金太郎</li>
<li>浦島太郎</li>
</ul>

数字の場合は、
1.桃太郎
2.金太郎
3.浦島太郎

<ol>
<li>桃太郎</li> 
<li>金太郎</li>
<li>浦島太郎</li>
</ol>

このようなソースになります。

■その他の文字タグ

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

２）下線
<u>下線</u>

３）引用タグ
<blockquote> 
<p>引用文を入れます。</p>
</blockquote>

 

■リンクタグ<a>

リンクを作るためのタグです。
<a href="リンクさせたいURL">アンカーテキスト</a>

例：ヤフーへのリンクを作る

<a href="http://www.yahoo.co.jp/">ヤフーへはこちらから</a>

ヤフーへはこちらから

このようになります。

応用として、別窓（ページを新しいブラウザーで開かせる）方法として
target="_blankタグを挿入します。

この場合は、

<a href="http://www.yahoo.co.jp/" target="_blank">ヤフーへはこちらから</a>

これで別窓で開きます。

 

■画像イメージタグ<img>

画像を表示されるためのタグです。
※画像は自前にアップロードが必要です。
画像のアップロードについては、メディア設定でご紹介します。

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

例として、
http://kasegoo.info/wp-content/themes/wpdaidai/images/ws000657.jpg
にアップロードした画像を貼り付ける方法をご紹介します。

その場合はタグ

<img src="http://kasegoo.info/wp-content/themes/wpdaidai/images/ws000657.jpg" alt="プロフィール" width="160" height="159" />

このようになります。

 

■画像とリンクの合わせ技

リンクボタンなどを作る方法をご紹介します。

お問い合わせボタンの画像をクリックすると、
お問い合わせページへ飛ぶようにリンクを張ります。

お問い合わせページ
http://kasegoo.info/kmail/

ボタンの画像は、
http://seo.siyo.org/wp-content/themes/buru3/images/otiawase.png
にアップロードしています。

<a href="http://kasegoo.info/kmail/">
<img src="http://seo.siyo.org/wp-content/themes/buru3/images/otiawase.png" alt="お問い合わせ" width="160" height="50" />

このようになります。

 

賢威ユーザー限定 基本装飾タグ一覧

賢威には、あらかじめスタイルシートが組み込まれており、
文字の装飾を行うことが出来ます。

スタイルシートとは、簡単に言うと装飾を加える特殊タグになります。

例えば<p>タグにスタイルを加える事で、
赤字にしたり、蛍光色にしたり、変化を加える事が出来ます。

使い方は、タグの中にクラス要素を入れて指定すればOKです。

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

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

■文字の色を変える

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

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

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

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

<p class="navy">で囲むとこの色になります。</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="f20em">こんな大きさや</p>

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

 

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

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

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

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

 

画像の中央や右寄せも可能です。

<p class="al-c">

<p class="al-r">

<p class="al-l">

 

賢威のスタイルシートについては、別記事でしっかりご紹介します。
基本的なHTMLタグを覚えておくだけでも、サイト作成の幅は一気に広がりますよ＾＾

⇒賢威 スタイルシートの文字装飾タグ一覧

以上
賢威で記事を書く前に覚えたい、よく使うHTMLタグ
でした。