サイト・ブログのアクセスアップ・SEO対策方法

[divタグでhtmlのデザインを変更]の頁です。ホームページやウェブログをインターネット上で広めるためのアクセスアップ方法とSEO対策。
GoogleやYahoo!JAPAN・MSN等の検索エンジン検索結果の上位表示でサイトの訪問者数を上げていく手法やウェブサービス等を紹介しています。
また被リンク獲得や人気キーワードの活用・HTMLタグ文法の書き方・ブログ運営テクニックや集客支援ツール等も掲載しています。



スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 |
divタグでhtmlのデザインを変更
「divタグ」とは、CSS(スタイルシート)と組み合わせて
デザインのカスタマイズ等の理由で使用する特殊なタグです。

ホームページのテンプレートやプラグインに記入する
htmlソースは基本的に、なるべくシンプルな構成にした方が
GoogleやYahooなどの検索エンジンの評価も上がりやすい点もあります。

そこで背景画像や文字の大きさ、色、空きスペースの広さ等の
ウェブデザインをカスタマイズする「スタイルシート」が大変役立ちます。

「div」のタグは、htmlのbody要素内のコンテンツで
それぞれグループ別にしてデザインを変えていきたい時に、
文法を省略してシンプルにしたい時などに使っていきます。

例として、ブログのサイドバーに使うピクセルの幅やスペースの開き、
文字の大きさやフォントなどを本文のメインバーの領域と少し変えてみたい場合について。

まず、テンプレート上では(当FC2ブログの場合)このようにしてdivタグを作成します。

HTMLソースの<body>~<body>の要素の範囲内に、
<div class="アルファベットで名付けた名称">ブロック化したいコンテンツ</div>

<div class="menu1BlockBase">
<div class="menu1BlockHead"></div>
<div class="menu1BlockBody">
<div class="menuText">
</div></div></div>



そして、head部分に以下のメタタグを適当な配置に追加します。

<meta http-equiv="content-style-type" content="text/css" />

<link href="cssファイルのURL" type="text/css" rel="stylesheet" />


次に、スタイルシート上でdivタグ内のコンテンツのデザインについて
説明するタグの一文を記入します。

.menu1BlockBase {
width : 100%;
}
.menu1BlockHead {
margin: 0px;
padding: 1px 0px 2px 2px;
font-size: 13px;
font-weight: bold;
}
.menu1BlockBody {
margin: 0px;
padding: 2px 0px 0px 0px;
padding-left: 0px;
}
.menuText {
font-size: 13px;
padding: 1px 3px 1px 3px;
color: #333333;
line-height: 130%;
}


これでテンプレートやスタイルシートを更新したら、サイトまたはブログ上で
divタグ内のコンテンツのデザインの部分だけが変更されているか、確認して下さい。

一回だけではなかなかページレイアウトのバランスがとりにくいので、
何度も見直しながらピクセルや文字色の見た目を整えていきます。

テンプレート上で新しくコーナーを作りたい時は、
<div class="">の中に自分でアルファベット名を記入して、
スタイルシートに同じ名前の要素を加えてカスタマイズする事もできます。
CSS スタイルシート | サイトのはじめ方
コメント
コメントを投稿する
URL
コメント*
パスワード

(※:お書き込み頂けたコメント文章は、管理者の承認後に表示されます。)






[サイト・ブログのアクセスアップ・SEO対策方法・トップページへ]


URL:http://whiteway.blog103.fc2.com/blog-entry-16.html
Copyright (C) 2007-2013 サイト・ブログのアクセスアップ・SEO対策方法, All rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。