にほんブログ村 ブログブログ ブログ初心者へ にほんブログ村 その他日記ブログ つれづれへ にほんブログ村 小遣いブログ ポイントサイトへ
  にほんブログ村に登録しています!(^-^ )

2008年04月02日

ポイントサイト記事の改訂終了

やっと、ポイントサイトについての記事の改訂が終わりました。

記事の見直しと、サイト改変などによる評価の変化だけならここまで長くかからなかったのですが、以前書いた「ブログ記事貼り付けの恐怖」によって、記事のソースがメタメタになっていたのを直すのに、時間がかかってしまいました。

でもやっと、2ヶ月をかけて終了しました。

興味がある方は、「ポイントサイト目次」などから見に行ってみてくださいね。

ポイントサイトの改編があちこちでされたので(大きなものから小さいものまで)、それに伴って評価も変わっています。

私たちのサイト「リトルドリーム」の方でも「オススメポイントサイト一覧」ページを更新しました。

私の、現在のそれぞれのサイトに対する大まかな評価と順位が載っています。
こちらも、興味がある方は右のバナーからどうぞ。「リンク部屋」にありますので。


ポイントサイトは、今のところ22個までの評価を載せていますが、それ以降もいくつか登録しています。

評価を下せるくらいの期間、観察した結果を、また記事にしていきたいと思います。

では、今日はこの辺で。

・・・そういえば今日(もう昨日ですね)はエイプリルフールでしたね。
何にも嘘つきませんでした。う〜ん、もったいない(^_^;)

(2008年4月2日 水沢藍)
posted by 水沢藍 at 00:17 | Comment(0) | TrackBack(0) | 日記

2008年04月06日

Webページのソースの採点

78.Webページのソースの採点

2007年11月、サイト開設から3ヶ月くらい経った頃の体験談です。

私は、とある調べもののため、例によってネットをグルグル回っておりました。

・・・と、そこで、
「Another HTML-lint」というサイトを、見つけました。

そこの、このページ。
Another HTML-lint gateway

ここで、WebページのHTMLソースをチェックしてくれるのです。


ページ作りは、ほとんど全てをホームページビルダーに任せているので、タグとか色々まだよくわかっていません。

どんなソースがよくて、どんなソースが悪いのか、わかるかもしれない。

そんな軽い気持ちで、私たちのサイト「Little Dream」のトップページのアドレスを入力してみました。

結果は・・・・・

マイナス28点。

・・・・・・・・・・え?(゜Д゜|||)

もちろん、100点満点です。
マイナスって。

あまりのことにボーゼンとした私。


何が悪いのか、ちゃんと一行一行解説してくれているので、慌てて確かめました。

HTMLタグに、LANG属性を指定していないということが悪かった。
メタタグの位置が悪かった。
画像にALT属性を指定していないということが悪かった。
エトセトラ。エトセトラ・・・。

・・・・半分以上、意味がわかりません(゜ロ゜)

ただ、わかったことは
トップページのソースが
相当間違ってる

ということ。

それから・・・・・・

解説を見ながら、
わからないことを一つ一つ調べ、
一つ一つ直していく・・・・

という、途方もない長い長い旅が、これから始まるということだけでした・・・・・・(T_T)
posted by 水沢藍 at 23:36 | Comment(0) | TrackBack(0) | ネット体験談

2008年04月08日

LANG属性とは

79.LANG属性とは

2007年12月、サイト開設から4ヶ月くらい経った頃の体験談です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>


これは私たちのサイト「リトルドリーム」のトップページのソースの、最初の部分です。

<HEAD>の上に、<HTML>というタグがあります。

「Another HTML-lint」によると、
<HTML>には、LANG属性を使ってその文書の言語を明示しておくことが薦められている、とのこと。

LANG属性というのは、そのHTMLで使われている言語を指定するためのものらしいです。

日本語のサイトならば、
<HTML lang="ja">
もしくは
<HTML lang="ja-JP">
と記述するのがいい、ということのようです。

jaというのが日本語を表しているんですね。

でも、ビルダー10ライトでページを作っていると、LANG属性は記述されません。

ということは、つまり・・・
あとで自分で<HTML>タグにlang="ja"をプラスして、<HTML lang="ja">にするのが必要になるわけですね・・・(=_=;)・・・。

うーむ、HTMLというのは、いろいろ複雑です・・・。
そして、やっぱりめんどくさい。

これから作るページはもちろん、これまで作ってきたたっくさんのページも全て、LANG属性が入っていません。

まずは、そのページたちにこれを挿入するところから始めなければなりません(>_<。)

次回は、メタタグの位置についてです。
〜後日談〜

こういう、決まった場所に決まった文字を追加挿入したい場合には、『一括置換ソフト』を使うと便利です。
『一括置換ソフト』はそれ以外にも、その名の通り一括である文字を別の文字に置き換えることができるソフトです。
このソフトを使って、<HTML>を<HTML lang="ja">に置き換えるよう設定すれば、手間要らずで作業が完了します。

この当時はそういうソフトの存在を知らなかったため、全部手動で挿入していました。
もっと早くに知っていれば、楽だったのに・・・( ̄ー ̄°)
posted by 水沢藍 at 23:21 | Comment(0) | TrackBack(0) | ネット体験談

2008年04月09日

メタタグの位置

80.メタタグの位置

2007年12月、サイト開設から4ヶ月くらい経った頃の体験談です。

以前書いた記事(ネット体験談63「メタタグの重要性」)で、

メタタグというのは
検索ロボットにそのページを読み込ませる
そのページが呼び出されるためのキーワードを設定する
検索結果に出るそのページの紹介文を設定する
などの役割があり、
検索エンジンにきちんと巡回してもらうための
<META name="ROBOTS" content="ALL">
というメタタグや、
そのページをどんなキーワードで表示させるかを設定する
<META name="keywords" content="キーワード">
というメタタグを入れることにより、
ページを効率よく検索エンジンに巡回してもらえたり、キーワード設定によっては上位表示もありえるらしいということを書きました。

なるほどと思い、私たちは早速実行しましたよ。

これまで作ってきたページの一つ一つに、上記の二つのメタタグを足していきました。
全てのページにメタタグが入り、これから作るページにももちろん入れることにし、満足しました。

が。

それはただの自己満足でした。

確かに、上記のタグは、
入れたからと言って検索結果の上位表示が約束されるものでもなければ、入れなかったからと言って絶対上位表示されないというわけでもないタグらしいのですが、
それでも全く意味のないタグというわけではないでしょう。

しかし、
私は多大なる誤解の元にそれを使い、
そのメタタグをゴミゴミダメタグにしてしまい、
それだけではなくソースもダメにしていたのです。

その誤解とは、
メタタグの位置
にありました。

これが変更前の私たちのサイト「リトルドリーム」のトップページの<HEAD>〜</HEAD>内のソースです。

<HEAD>
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.2.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>リトルドリーム―ネチケット・ネット用語・本・ゲームの感想サイト―</TITLE>
</HEAD>

これに、この二つのメタタグをプラスしようと思いました。
<META name="ROBOTS" content="ALL">
<META name="keywords" content="キーワード">


できたソースがこれ。

<HEAD>
<META name="ROBOTS" content="ALL">
<META name="keywords" content="キーワード">

<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.2.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>リトルドリーム―ネチケット・ネット用語・本・ゲームの感想サイト―</TITLE>
</HEAD>


しかし、今回
「Another HTML-lint」でページを見てみたら。

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="〜">でCHARSETが指定されるより前に非ASCII文字が含まれています。

・・・という警告文が。

細かい説明はよくわかりませんでしたが、
『CHARSETで文字コードが指定されて初めて、そのリソースがどの文字コードで書かれているかわかるのです。<TITLE>で日本語を使っている場合は<META>よりも後ろに持って行ってください。』
という一文は、理解できました。

要するに、
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="〜">
の前には、
日本語を入れちゃダメ
ってことね!

・・・・・・・・・(・_・ )

<HEAD>
<META name="ROBOTS" content="ALL">
<META name="keywords" content="キーワード(もちろん日本語)">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.2.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>リトルドリーム―ネチケット・ネット用語・本・ゲームの感想サイト―</TITLE>
</HEAD>

・・・しっかり入っとる!!Σ( ̄ロ ̄lll)

なんてことでしょう。
そんな落とし穴があったとは!!

慌てて、キーワードのメタタグを、そのメタタグより下に入れたところ・・・

<HEAD>
<META name="ROBOTS" content="ALL">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.2.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="keywords" content="キーワード(もちろん日本語)">
<TITLE>リトルドリーム―ネチケット・ネット用語・本・ゲームの感想サイト―</TITLE>
</HEAD>

その警告文は出ませんでしたヽ(*^▽^*)/


メタタグの位置が、そんなに重要なものだとは全く知りませんでした。
私は、良かれと思ってメタタグを入れて、メタタグの効果もなさないばかりか、ソースもダメにしていたのですね。

気づいてよかったです。
これまでの全てのページを、ここも直さないといけないけどね・・・( ̄_ ̄|||)


しかし、まだまだ直しは続きます。
次回はALT属性についてです。
posted by 水沢藍 at 23:08 | Comment(0) | TrackBack(0) | ネット体験談

2008年04月13日

ALT属性の重要性

81.ALT属性の重要性

2007年12月、サイト開設から4ヶ月くらい経った頃の体験談です。

引き続き、ページのソースの間違いを直す作業を進めていきます。

ALT(オルト)属性。

・・・って何。

調べてみると、
「代替テキスト」とも言い、
画像などにつける説明文・・・という感じです。

画像にポインタを合わせると、表示される文字がそれです。

例えば、バナーを例に考えてみます。

バナーは小さい画像です。
リンクが張ってあるので、クリックすると、リンク先のサイトに飛びます。
これ、うちのサイトの昔のバナーです。

b1blog.jpg

このバナーを見ても、何のサイトかわかりません。
「ネチケット・ネット用語・本・ゲームの感想サイト」という説明文をつけたいと思います。

でも・・・

普通に文字でリンクを張った場合、
Little Dream
ポイントしてみるとわかると思うのですが、ちゃんと説明文が付いてますよね。

しかし、バナー画像にリンクを張った場合、
b1blog.jpg

ちゃんとリンクにタイトル「リトルドリーム・・・」を付けたにもかかわらず、ポイントしてみるとb1blog.jpgと表示されてしまいます。

b1blogというのは、このバナー画像の名前です。

タグを見てみます。(リンクが張られてしまうので/を一本消してます)
<a href="http:/pinkblue.sakura.ne.jp" mce_href="http:/pinkblue.sakura.ne.jp" target="_blank" title="リトルドリーム−ネチケット・ネット用語・本・ゲームの感想サイト−"><img src="http:/pinkblue.sakura.ne.jp/sblo_files/aiblog/image/b1blog-thumbnail2.jpg" mce_src="http:/pinkblue.sakura.ne.jp/sblo_files/aiblog/image/b1blog-thumbnail2.jpg" border="0" alt="b1blog.jpg" width="150" height="30"></a>

あっ、alt="b1blog.jpg"になってます!!Σ(・ロ・;)

なるほど、バナー画像をポイントしたときに説明文を表示させるためには、ここに説明文を書かなきゃダメだったんですね。

<a href="http:/pinkblue.sakura.ne.jp" mce_href="http:/pinkblue.sakura.ne.jp" target="_blank" title="リトルドリーム−ネチケット・ネット用語・本・ゲームの感想サイト−"><img src="http:/pinkblue.sakura.ne.jp/sblo_files/aiblog/image/b1blog-thumbnail2.jpg" mce_src="http:/pinkblue.sakura.ne.jp/sblo_files/aiblog/image/b1blog-thumbnail2.jpg" border="0" alt="リトルドリーム−ネチケット・ネット用語・本・ゲームの感想サイト−" width="150" height="30"></a>

これでどうかな。

リトルドリーム−ネチケット・ネット用語・本・ゲームの感想サイト−

おっ、上手くいきました!(-^▽^-)

ちなみに、width="150" height="30"は行の幅や高さの指定のようです。

また、ブラウザによってはALT属性が表示されないものもあるらしいので、リンクのタイトルも一応入れておいた方がいいのかもしれません。


それから、ホームページで画像を使うときなどは、ALT属性が指定されていないことがあります。

<IMG src="file:///C:/Documents and Settings/Owner/My Documents/LittleDream/contents/gazo2/pinkheart-mini.gif" width="20" height="17" border="0">

こんな感じ。(太字の部分が画像ファイルの場所と名前)

alt="説明文"を足します。

<IMG src="file:///C:/Documents and Settings/Owner/My Documents/LittleDream/contents/gazo2/pinkheart-mini.gif" width="20" height="17" border="0" alt="説明文">

これでOKです。


ALT属性について、大変わかりやすいサイトがありますので、ご参考にどうぞ。
imgタグにおけるaltの使い方について


また、Another HTML-lintによると、

alt="  "のように、空白を指定することは薦められていないようです。

例えばアイコンならalt="*"とか、
画像自体に意味を持たないものはalt=""にするなどの方法がいいようです。

そもそも、ALT属性というのは、
画像が表示されない、あるいは画像を表示しない設定にしている、そういう人にも、
「そこに何があって、どんな意味を持っているのか」を知らせる、という役目があるそうです。

全ての人が同じように画像を表示できて、それを見られるというわけではない、ということなんですね。

そのため、画像にALT属性をつけるのは、親切のためだけではなく、「しなければいけない」という決まりにもなっているようです。

うちのサイトにはまだ画像はそれほどありませんが、これから急いでALT属性をつけなくちゃなりません!
うおー、やることいっぱいだー!! (>_<;;)


次回は・・・

これまで以上に
私たちを地獄に陥れた、
空白の悲劇についてです・・・・・・。
posted by 水沢藍 at 00:01 | Comment(0) | TrackBack(0) | ネット体験談
  にほんブログ村 ブログブログ ブログ初心者へ にほんブログ村 その他日記ブログ つれづれへ にほんブログ村 小遣いブログ ポイントサイトへ
   ネット体験談 総目次1
   ネット体験談 総目次2
   ネット体験談 総目次3
   カテゴリ別目次
    ・「パソコン関連」
    ・「ネット関連」
    ・「サイト作り関連」
    ・「さくら(ブログ)関連」
   ポイントサイト目次
   日記目次
   好きな曲紹介目次
   それぞれの目次ページに飛べます。他の記事をご覧になりたい時にご活用ください。

トップページへ戻る