TOP > CATEGORY - HTML講座

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

使いたいツール名や、HTML挿入箇所がわからないときに役立つツール

HTML講座に入れていいか、カテゴリーを迷ったのですが、まぁいいか(笑)

このところ、コメント欄に「このタグを入れたいんだけど、HTMLのどこに入れていいかわからない」
「アドセンスをヘッダー下に入れたいんだけど、タグの挿入箇所がわからない」
といった質問をいただきます。
そういうときに役立つのが、「FireBug」です。

firebug

続きを読む

スポンサーサイト
RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

Fc2ブログでグローバルメニューを表示させる HTML初心者講座3

HTML初心者講座と書いておきながら、今日はちょっと難しいかもしれません。

質問をいただいたので、記事にしてみようと思います。

だら奥のカテゴリー一覧というのは、サイトマップでからしか見ることができません。
以前は、カテゴリー一覧があったのですが、すべてサイドバーに記載させると、
1P当たりの発リンクが異常に多くなるんです。

また、「これぞ!」とイチオシ部分もぼやけちゃうんで、いっそのこと、本当に読んでもらいたい記事を
サイドバーに掲載して、カテゴリーとして見てほしいものはグローバルメニューにまとめてしまえ!
と思ったわけです。

私のトップのグローバルメニュー↓これですね。
グローバルメニュー

一応、タグを記載します。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ3</a></li>
</ul>
<!--▲ メニューバー ▲-->


そして、スタイルシートに下記のタグを追加します。

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* 1つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */


このタグを、ヘッダー直下とか、ブログタイトル直下に記載すればOKです。
ブログタイトル直下、ヘッダー直下はテンプレによって箇所が変わるため
「ココデスヨ」というレクチャーはできませんが、質問コメントをいただければお答できると思います。

えー、さて。追記です。

FC2ブログはファイルアップロードでHTMLファイルが利用できる


上記のグローバルメニューの中から
「SEOの秘訣」と、「ブログで副収入」をクリックしていただけるとわかると思うのですが
ブログと違う表示でページが表示されます。
これは、別に他のレンタルサーバーで借りて作成したのではなく
ブログのファイルのアップロードを利用して、HTMLファイルをアップロードするとできちゃうものなんです。

SEOの秘訣もブログライターのまとめも読んでもらいたい部分はたくさんあるんですが
やっぱりきちんとまとめてみたほうがユーザビリティにも優れるんじゃないか、
と思って作成しました。

このHTMLファイル。URLが
http://blog-imgs-30-origin.fc2.com/g/e/k/gekiyasuotoku/seotop.html
とブログの画像ファイルURLになるので、SEO的にどうなのかしら
と思っていたのですが、安心ござれ!
きちんと検索エンジンで拾ってもらえるんですよ。

さらに、このHTMLファイル、ちゃんとした普通のサイトを作れます。
スタイルシートもアップできますし、HTMLの中にブログとは別に
メタタグ指定もできるので、やってみたい!という方は、コメントくださいね。

こういうブログのまとめ方もありますよ、という程度ですが、
だら奥を開設して、1年でページランクも3になり、ブログライター比較というカテゴリーページもページランクが1ですが、つくようになったのは、こういうチマチマっとした作業も影響しているのかな、
という気がしています。

RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

見出しタグh1、h2、h3 HTML講座 その3

ものすごく基本的な部分ですが、一番抜けてはいけないタグですね。

このhなんたらというタグは一般的に「見出しタグ」といわれますが、
1,2,3と数字が小さいほど重要度を示します。
ブログの場合にはテンプレートによって、この見出しタグの設定がまちまちです。

スタイルシートで設定すればできますので、チャレンジしてみようって方はやってみてもいいと思います。
スタイルシートがわからないという方は、前回も書いたように
自分のブログを表記して、ソースを表示させて、どの部分がh1、h2、h3と指定されているか
見て確認してみるのもいいと思います。


h1タグとは


h1がサイトやブログのタイトルになっていることが多いのは、一番重要だからです。
そしてh1は一度しか使ってはいけません。

そんなに何十個も重要なことは、普通はないですよね(笑)

そして、重要ですから、ソースの上部にある、というわけです。
HTMLでサイトを作るときも同様です。

私の場合には記事ごとに、このh1が変わるというか記事タイトルがh1になる指定にしています。

やり方は⇒「記事タイトルをタイトルにするには」をお読みください

また、この記事タイトルをh1指定してあげることはSEOでも非常に重要です。
⇒「記事タイトルとSEO


h2を指定する


h2は多くのFC2ブログのテンプレートは、ブログの説明文になっていることが多いようです。
このブログはそうではないようだったので、自分で言葉を入れてます。
「アフィリエイト・ブログライターで初心者でも稼ぐ方法を掲載。ブログライター比較一覧・アフィリエイトASP比較一覧・クリック型報酬一覧掲載!09年は95万稼ぎました!」
の部分がそうです。

本当はこんなに長くないほうがいいんですけど、まぁ、いいかな、、、と^^;

h3を指定する


h3に至っては、本当にテンプレートによって違いますね。
たとえば、カレンダー部分がh3になっていたり、
プラグインタイトルがh3になっていたり。

カレンダーがh3になっているのはもったいないなぁって思います。
プラグインタイトルも同様。
「メニュー」とか「オススメ」とか、そういう言葉を重要視するよりも
きちんとSEOを意識したキーワード部分を見出しタグには使いたいですよね。

私は、このh1とは、とかh2を指定するとかの記事の中のタイトル部分を
見出しタグh3を使っています。

これはスタイルシートがわからないとできませんが、
やりたい!という方はやってみてください。
このh3の中は、かなりキーワードを意識して私は書いています。
検索エンジンにひっかかるようにキーワードを重視して、作ってます。

やり方は
⇒「ブログを作成したらまずやる10項目」をご覧ください。
RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

ソース表記の順番 HTML講座その2

検索エンジンはソースを上から見ていく、と前回書いたのですが、
意味わからないーという方もいるかな?

まずは、ツールバーで表示→ソースの表示を自分のサイトを表示させてみます。
だら奥でもいいです。

私のブログは
タイトル
サイドバー

エントリー(記事)




この形です。

ソースを見ていくと、タイトル→グローバルメニュー(ブログタイトル下のメニューの表のようなもの)→
サイドバー→エントリー(TOPページだと、TOPページの内容)

という順にHTMLが並んでいきます。

TOPページの場合には、TOPページの内容を大切にしているので、本当は
タイトル→グローバルメニュー→TOPページ→サイドバー

というように読んでもらいたいんですが、各エントリーページは上記のままがいいわけです。
なぜかというと、サイドバーにキーワードが集中しているから、です。

以前、サイドバーにカテゴリー分けしたメニューがすべて表記されるような形にしていたのですが
これだと、メニューがやたらめったら長くなる!
さらにキーワードがやたらと多くなって分散されてしまう!ということから
大まかなメニューはグローバルメニューに移動させ、ソース及びサイトの上部に表記させるようにし
サイドバーのメニューは、その中でも厳選し、キーワードとして拾ってもらいたいものを
掲載しました。

で、この2カラムを右サイドバーにしようかなとも考えたのですが
ほとんど、検索エンジンから訪問される場合、検索エンジンではトップページが掲載されるのではなく
各エントリーが掲載されることがほとんど。
ということは記事ページから入ってくる人が多いわけですね。

そして、検索エンジンは上からソースを読む、
各エントリーページからの訪問が多いということは検索エンジンにも有効なのかな
ということで、このまま利用しています。

トップページだけ右サイドバー2カラムって方法もできますが
ソースが増えるんでやめました^^;

このソースの表記方法は、左サイドバー2カラムだから
タイトル部分(ヘッダーと呼ばれます)→サイドバー→エントリー
と読まれるわけではなく、スタイルシートやHTMLの記述方法によって変わってきます。

SEOに強い!といわれるテンプレートを見かけたら、まずソースを見てみてください。

h1、h2が上部にないテンプレはNGです。
RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /

初心者さんのためのHTML講座(1) すぐわかる!HTML

アフィリエイトを始めようと、ほとんどの方はブログを選ぶと思います。

その理由の一つに「HTML」や「CSS」がわからない、ということが挙げられると思うんですね。

私のところにも
「パン屑リストをどこに入れればいいかわかりません」
「ウェブマスターツールのタグはどこに入れるんでしょうか?」
といった質問や、

「タイトルと紹介文の下にアドセンスコードを入れるにはどこに?」

といった質問がきます。

なので、まず、HTML初心者の方に一番にやっていただきたいことは
自分のブログを作ったら、まず自分のブログをみる。
開いたら、ツールバーで表示→ソースの表示
を見ていただきたいんです。

これを開くと、やたらめったらわけのわからない英字だらけのものが出てくると思いますが
それを上から見ていくと、あなたのブログのタイトルや、紹介文が出てきます。

そしてメニューやカテゴリーや記事が表示されていくはずです。
HTMLというのは、サイトを作るための命令文といえばいいんでしょうか・・・。

表示すると画像や文字がきちんと出ますが、HTML構文はそのものを構築させるためのものなのです。
スタイルシート(CSS)は、このブログを装飾するためのものです。


さて。上部を見ていくと、あなたのサイトのタイトルや、紹介文が表示されていると思います。
<HEAD>というのがありますよね。
この<HEAD>から</HAED>
この中には、検索エンジンが訪れたときに、読み取る重要なものが含まれています。

検索エンジンはHTML(ソース)を読む、といわれており、上から読んでいく、とも言われています。

ですから、meta keywords、meta description、titleは必ずこの
<HEAD>の中に入れておきましょう。
/はすべてに共通しますが、タグの終了を意味します。

FC2ブログでは、titleはもともとテンプレートにきちんと組み込まれていますが
descriptionは含まれていないものもあります。

これは「サイトを説明します」という意味で、すべてのページがすべて同じ紹介文章だと
グーグルのウェブマスターツールでは「重複してるよ」
といわれてしまうことがあるので、重複しないように、各記事文頭100文字程度が
ここに入るように設定するとよいでしょう。

→参考記事「ブログを作成したらまずやる10項目

HTMLはわからない!と投げ出してしまう前に
まず、自分のブログのソースを見てみましょう!
すると「あぁ、こういうことなのか」ということがなんとなくでもつかめるはずです。

私もそこから始めましたし、HTMLもCSSも独学でなんとかやってきていますから
誰でも「探究心」があればできます。

ブログでもある程度のHTMLの知識は必要ですし、覚えていけば
どんどんいろんなことができるようになりますから、まずはソースを見てみてくださいね。

RSS twitter livedoorクリップ Buzzurl Google Bookmarks delicious Yahoo!ブックマークに登録 はてなブックマーク はてなブックマーク
タグ /
 | BLOG TOP | 

私も利用中!

ブックマーク

Yahoo!ブックマークに登録

検索フォーム

執筆しました!

GoogleAdSense グーグルアドセンスで<本気で稼ぐ>コレだけ!技 (得するコレだけ!技)

新品価格
¥1,974から
(2011/2/10 22:55時点)

私が執筆させていただきました!

ブログ情報


最新コメント

リンク

特集記事

最新記事

必見記事

アフィリエイト初心者講座

お小遣いサイトの作り方

お役立ちツール

つぃぃと

ケアプロスト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。