アフィリエイトサイト
検索エンジンインデックス
アクセスアップツール
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>の間の任意の場所に
ブラウザで文字を表示させなくするには(ソースを見ないと見えないコメント)
<!--ここに入力した文字はソースを表示しないと見えない-->
スタイルシートを使って変更する場合
特定範囲にスタイルシートを反映させるには
反映させたいところを<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://はつけない)