よく使うHTMLタグとスタイルシート

検索エンジン登録

HTMLを使って変更する場合

文字を太くする

太くしたい文字
<b>太くしたい文字</b>

文字を強調(キーワードを強調したい場合など)

強調したい文字
<strong>強調したい文字</strong>

文字に下線をつける

下線をつけたい文字
<u>下線をつけたい文字</u>

文字を斜体にする

斜体にしたい文字
<i>斜体にしたい文字</i>

文字を斜体にして強調する

強調したい文字
<em>強調したい文字</em>

文字のサイズと色を指定する

<font size="サイズ">大きさを変えたい文字</font>
<font color="#カラーコード">色を変えたい文字</font>

両方指定
<font size="サイズ" color="#カラーコード">変えたい文字</font>

よく使うカラーコード

■赤#ff0000 ■青#0000ff ■黄#ffff00 ■緑#009966 ■黒#000000 □白#ffffff ■紺#000099 ■水色#00ffff
■灰色#cccccc ■薄水色#ccffff ■クリーム色#ffffcc

画像を入れる

<img src="http://画像のURL" align="画像の位置" alt="画像の説明" width="画像の幅" height="画像の高さ" border="0" />

画像の枠線の太さを指定する

border="枠線の太さ"


border="1"

枠線をつけたくない場合は
border="0"

画像を右にするには

align="right"
左にするには align="left"

画像の周りにスペースを作るには

hspace="スペースの幅"


hspace="10"

地図など画像の任意の位置にリンクを挿入する方法

ここの説明がわかりやすい

リンクを作る

同じウィンドウで開くリンク
<a href="リンクURL">リンク先</a>

新しいウィンドウで開くリンク
<a href="リンクURL" target="_blank">リンク先</a>

発リンクにしないタグ

(リンク先を検索エンジンのクローラーがクロールしない)
rel="nofollow"
<a rel="nofollow" href="リンクURL" target="_blank">リンク先</a>

お気に入りに追加

←こんなやつ

<input type="button" value="お気に入りに追加" onclick="javascript:window.external.addfavorite('ここにページのURL','ページの名前')">

ブログ用
<input type="button" value="お気に入りに追加" onclick="javascript:window.external.addfavorite('<% blog.page_url %>','<% blog.title %>')">

もとのページへもどる

ブラウザの戻ると同じ働きのもの。こんなやつ→  

<head>と</head>の間に以下を挿入

<script language="JavaScript">
<!--
function pageBack(){
history.back();
}
// -->
</script>

そして<body>と</body>の間の任意の場所に

<input type="button" value="戻る" onclick="pageBack()">

ブラウザで文字を表示させなくするには(ソースを見ないと見えないコメント)


<!--ここに入力した文字はソースを表示しないと見えない-->

スタイルシートを使って変更する場合

特定範囲にスタイルシートを反映させるには

反映させたいところを<div id=指定したい場所>と</div> または<div class=指定したい場所>と</div>で囲い、
スタイルシートでそこに反映される部分を変更または追加する

※div idとdiv classの違い
 div idというのは1ページに一箇所のときに使う
 div classというのは複数個所に使用する場合に使う
 div idを使った場合はスタイルシートは「#」で指定
 div classを使った場合はスタイルシートは「.」で指定

例としてフッターの文字の色と大きさを指定する場合のHTMLソースは

<div id="footer">
フッターに表示される文字
</div>

となり、それに対するスタイルシートのところは

#footer{
ここの部分で指定する
}

たとえば文字を10ピクセルにして色を紺にするなら

#footer{
color:#000099;
font-size:10px;
}

リンクの色を水色にしてリンクの下線を消すなら

#footer a {
color:#00ffff;
text-decoration:none;
}

リンクの色

a:link { color: #0000ff; }    例:青)通常のリンクの色
a:visited { color: #00ffff; }   例:水色)読み込み済みのリンクの色
a:active { color: #ff0000; }  例:赤)クリックされたときのリンクの色
a:hover { color: #ffff00; }   例:黄)マウスが上に乗ったときのリンクの色

リンクの下線を消す

text-decoration:none;

文字を太くする

font-weight: bold;

文字のサイズを指定

font-size: 文字サイズpx;


font-size: 14px;

文字の色を指定する


color: #カラーコード;
color: #000000;

行間の指定

line-height: 高さ%;


line-height: 150%;

文字の位置を変える

text-align: 位置;


text-align: center;
真ん中寄せがcenter 左はleft 右はright

文中の文字のサイズと色をスタイルシートを使って指定する

記事で変えたい文字を指定する
※mojiは自分が覚えやすいものに変えたほうが便利。
<span class="moji">変えたい文字</span>

スタイルシートでその文字のスタイルを指定する
.moji {
font-size: 大きさpt;
font-weight: 太くする;
color: #カラーコード;
}

.moji {
font-size: 24pt;
font-weight: bold;
color: #000000;
}

枠線を作るスタイルシート用タグ

border:線の太さpx solid #カラーコード;


border:1px solid #000000;

下だけつけるには
border-bottom:1px solid #000000;
上はtop 左left 右right

スペースを作るmarginとpadding

margin: サイズの数値px;      上下左右=サイズの数値px
margin: 5px 10px;           上下=5px、左右=10px
margin: 10px 5px 15px;       上=10px、左右=5px、下=15px
margin: 15px 20px 10px 15px;  上=15px、右=20px、下=10px、左=15px

マージンmarginは枠外側の余白
パディングpaddingは内側の余白

背景色

background-color: #カラーコード;

画像を入れる

background-image: url(画像のURL);

背景画像の並べかた

background-repeat: 並べ方;


background-repeat: repeat-y;

repeat(既定値:敷き詰める)
repeat-x(横方向のみ並べる)
repeat-y(縦方向のみ並べる)
no-repeat(ひとつだけ表示する)

ブログで使うタグ

ブログタイトル

<% blog.title %>
ブログTOPページへのリンク
<a href="<% blog.page_url %>"><% blog.title %></a>

カテゴリ名

<% category.name %>
カテゴリページへのリンク
<a href="<% article_category.page_url %>"><% article_category.name %></a>

記事タイトル

<% article.subject %>
記事ページへのリンク
<a href="<% article.page_url %>"><% article.subject %></a>

記事コンテンツ外に記事タイトルを入れる時

(たとえばh1タグやdescriptionなどに入れる時)
<% extra_title %>

記事がかかれたときだけ表示する
<% if:extra_title %><% extra_title %><% /if %>

アドセンス用

アドセンス広告のテキストマッチ精度をあげるには

セクションターゲットを使って認識させたいところを囲う

★アドセンスの有効テキスト範囲に指定
<!-- google_ad_section_start -->
テキストマッチさせたい文章
<!-- google_ad_section_end -->

★アドセンスの有効テキスト範囲外に指定
<!-- google_ad_section_start(weight=ignore) -->
テキストマッチさせたくない文章
<!-- google_ad_section_end -->

Yahoo!やGoogleでサイトのインデックスや被リンクを調べるには

被リンク数を探すには

(Yahoo!などの検索窓にURLを打ち込む際に前に以下のものをつける)

link:http://

インデックス数を調べる

site:
(http://はつけない)