Freewayは最高だ
とサイトに表示されたとします。サイトの内容は『Freewayは最高だ』であり、文字が赤い、太字はデザインとなります。この『内容』と『デザイン』を分離させてコードを書く事はとても重要な事です。
それは、検索ロボットが収集する情報はサイトの内容であって、文字が赤いや太いなどのデザイン要素は不要だからです。
HTMLの文中に『内容『と『デザイン』が混在してしまうと、そのサイトに何が書いてあるのか検索ロボットが判断しにくくなってしまいます。その結果SEO的に不利になり検索順位が下がる事になります。
それを防ぐ為にはサイトの『デザイン』の部分(以下CSS)を別のファイルに書き出したファイル(スタイルシート)を作成し、HTMLに読み込ませる事が一般的です。
残念ながらFreewayで作成されたHTMLは、HTMLの文中に『内容『と『CSS』が混在してしまいます。従ってSEOを意識するのであれば、前回の投稿で取り上げたように、外部スタイルシートを読み込みHTMLをシンプルにする事は非常に重要な事になります。FreewayでHTMLに少し慣れてきたら、スタイルシートの作成にチャレンジする事をお勧めします。
それでは前回のHTMLとCSSを詳しく見て行きましょう。
まずはHTMLから
<ul class="menu">
<li><A href="#">ホーム</A></li>
<li><A href="#">ご利用ガイド</A></li>
<li><A href="#">お気に入り</A></li>
<li><A href="#">ログアウト</A></li>
<li><A href="#">ユーザー登録</A></li>
</ul>
(＃はリンク先を任意で指定)ポイントは<ul class="menu">です。これは例えるなら<ul></ul>で囲まれた内容は『山田』さんだよ！とスタイルシートに定義する事です。スタイルシートには、文字が太い、青い、斜体など山田さんに関する情報を記述していきます。
この他に<ul id="menu">という書き方もあります。この場合『山田花子』さんだよ！となります。この２つの違いは、『山田』さんはHTMLの中で何度出てきても構わないが、『山田花子』さんは一度きりしか登場させる事が出来ません。それがclassとidの違いです。
それではCSSを見てみましょう。
ul.menu{
position:absolute;
left:200px;
top:500px;
z-index:38;
background-color:#DEDE48;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', sans-serif;
font-size:10px;
float:left;
padding:0;
margin:0;
}
ul.menu li {
float:left;
list-style:none;
margin-left: 20px;
}
ul.menu a {
text-decoration:none;
color:#f00;
}
ul.menu a:hover {
text-decoration:none;
color:#3F63A4;
}
ul.menu a:active {
text-decoration:none;
color:#3F63A4;
}
CSSが
ul.menu
ul.menu li
ul.menu a
ul.menu a:hover
ul.menu a:active
の５つの項目で構成されています。１つめのul.menuはmenuと定義された『ulアイテム』の位置、大きさ、バックカラー、文字装飾等が記述されています。
次はul class="menu"と定義された中にあるul.menu li <li>リストに対して、リストの並び方、間隔などが指定されています。
最後にul.menu a 、ul.menu a:hover 、ul.menu a:active は、そのリスト上にマウスが乗っている時、いない特、クリックされた時の文字の装飾と色が指定されています。
このスタイルシートの記述を書き換えて、オリジナルのMyリストを作成してみてください。
0 件のコメント:
コメントを投稿