携帯アドセンス~タグでサイトの見栄えをUP

携帯・モバイルアドセンスのはじめ方は携帯サイトへのアドセンスのはり方、タグの貼り付ける場所や文字化けなどの対策、初心者でもかんたんにはじめられるケータイアドセンスを解説！

携帯サイトの作り方～タグで装飾

ケータイサイトは画面も小さいしなんとなくどれも同じに見えますが、ほんの少し手を加えるだけでグンと見た目がよくなります。たとえば文字の色を変えてみたり、画像を少し入れたり、横に流れる文字を入れたり背景色を変更するだけでもだいぶ違います。

ここでは、XHTMLで書こうで書いたXHTMLタグを装飾して見た目をよくします！

bodyタグを装飾する

1,まずはbodyのタグを少しいじって見ましょう。

Crescent Eve(クレセントイヴ)を開いてください。現在のbodyは何も書かれていませんね。下記のタグを見てみてください。

bgcolor="#ffffff"

ｂｇcolorはバックグラウンドカラーといって、背景色のこと、背景色は文字が読みにくくならないように薄い色や白、もしくは黒を選びましょう。

text="#cc0099"

これはテキストの色。<ｐ>タグで囲った色がtextで指定された色になります。携帯でもPCでも<body>タグの中に入っている文字は特別<ｐ>タグで囲われていなくても表示されます。その文字色もtextで指定された色になります。

link="#ff0066"

link（リンク）を貼ったタグ<a href=""></a>で囲まれたタグはこの色で表示されます。

vlink="#ff6699"

visited　link(ヴィジテッドリンク)の略、1度クリックしたリンクの文字色はこの色になります。

そんな感じで早速Crescent Eve(クレセントイヴ)で編集しましょう。indexファイルを開いて<body>の部分を先ほどのタグと変更してください。（文字色は好きに変えてもOKです。文字色のコードはこのサイトを参考にしてみてください。http://masaboo.cside.com/color.html）

そうするとこんな感じになると思います。

テキストにリンクを貼る

リンクの貼り方は簡単です。

<a href="表示させたいファイル名">表示させたいページタイトル</a>

このタグは携帯サイトでもHTMLサイトでも嫌というほど書くので覚えましょう。
そして折角なのでこのサイトを私の愛用している美容液のサイトにします！ルブランシーっていう楽天で超人気の美容液！ついでなので携帯サイトつくっちゃいます。リンク先タイトルはこんな感じで。

<a href="leblanc01.html">美容液ルブランシーとは</a><br />
<a href="leblanc02.html">ルブランシーの使い心地</a><br />
<a href="leblanc03.html">ルブランシー効果</a><br />
<a href="leblanc04.html">ルブランシー平子理沙</a><br />
<a href="leblanc05.html">リピート買いする理由</a><br />

ファイル名は小文字英数字だったらなんでもOK！でもあまり長すぎるファイル名はNG！多分日本語ファイル名とかほとんど携帯SEO対策にはなりません。簡単で後で混乱しないようなファイル名をつけましょう。

<br />で改行するのを忘れずに。携帯サイトは横幅が240ｐｘが今のところ標準なので文字数が長いと折り返されます。

ではこのタグを小見出しの下に入れてみましょう！そして見出しの間のサイトタイトルなども変更していきます。これは適当に自分の作りたいサイトを考えてご自身でソースの間の文字を消して上書きしてくださいね。間違って＜や”などを消さないように！

文章を書き換えてリンクを入れたらファイルを上書き保存（ファイル→上書き保存）してブラウザでプレビューしてみてください。するとこんな感じになっています。

だいぶ携帯サイトッぽくなってきましたね。次は文字の場所を変えたり動かしたりしてみましょう！

水平線を入れる

水平線を入れるのは<hr />タグです。<hr />タグは<br />タグと同じで閉じタグが必要ないタグなので記述は/を入れます。

文字の位置を変える

文字の位置は中央揃え（センタリング）、右揃え、左揃えとあります。それぞれalign（アライン）で指定しそろえたい範囲を囲います。

<div align="center">中央揃えにしたい文字</div>
<div align="right">右揃えにしたい文字</div>
<div align="left">左揃えにしたい文字</div>

文字の大きさを変える

文字のサイズを変えるには直接文字に対してサイズ変更の命令をするタグを入れる方法とスタイルシートをつかって変える方法があります。

直接文字サイズを変えるタグは<font>タグで変えます。

<font size ="1">一番小さい文字になります</div>
<font size="10px">10pxになります</div>

文字のサイズの単位はそのまま数字を入れる場合は1が一番小さく数が大きくなるほど文字サイズは大きくなります。ｐｘ（ピクセル）で指定すると10pxが小さい文字サイズ12ｐｘが普段文字のサイズ指定をしないときのサイズだと思ってください。

あまり文字を小さくしすぎると文字がつぶれて読めなくなります。

スタイルシートで変える場合は<head>タグの間に装飾を指定するスタイルをあらかじめ入れておく必要があります。携帯サイトはパソコンと違って外部のCSSファイルを読み込むことはできないので、同じ文字装飾を使いたい場合はすべてのファイルにスタイルシートを書く必要があります。

下記はスタイルシートの例です。

スタイル名は.(ドット)で始まる小文字英数字なら何でもOKです。わかりやすい名前をつけるといいでしょう。.style1はフォントサイズのみ指定したもの、.style2はフォントサイズと色を指定したものです。実際にこの指定をタグに入れるときの例は下記の通りです。

<h2 class="style2">お肌の乾燥が改善！モチモチ肌に！</h2>

<div class="style1">ルブランシーの購入はこちら</div>

class指定をしてあげれば<p>タグや他の見出しタグにも同じようにスタイルが適用できます。

こんな感じでいろいろなタグの装飾をしてあげるとこんな感じになります。

このサイトのソースは下記の通りです。実際にご自分のテキストエディタなどにコピーペーストして使ってみてください。

携帯アドセンスをはじめよう！: 携帯アドセンス基礎知識; 携帯コンテンツを用意しよう; 携帯アドセンスコードとは; 携帯アドセンスコードの取得; 携帯アドセンスを入れてみよう

携帯アドセンスの審査: アドセンスのアカウントとは; モバイルアドセンスの審査は簡単？; アカウント停止･削除とは？; アドセンスの規約を守ろう; プライバシーポリシーページは必須

携帯サイトの作り方: 用意するもの; XHTMLで書こう; タグの装飾; 画像の挿入; 携帯サイト用無料素材

携帯サイトSEO対策: 検索エンジン登録の効率化; 検索エンジン登録先リスト; ヤフーモバイルカテゴリに登録; ヤフーモバイルカテゴリ登録手順; GoogleのSEO対策; キーワードの選び方; 内的SEO対策済み無料テンプレート