ホームページ作成SEOマニアックス tag:www.seo-maniax.com,2008://1 2008-08-26T07:32:38Z ホームページ作成の基礎知識から、スタイルシートの使い方やレンタルサーバーの設定などを解説します。 Movable Type 4.1 Windows MediaPlayer11　でHTML埋め込みwmvが視聴出来ない現象 tag:www.seo-maniax.com,2008://1.34 2008-08-26T07:23:15Z 2008-08-26T07:32:38Z Windows MediaPlayer11をインストールした環境で、HTMLに埋め込まれたwmv動画が再生されない現象になってしまった。。。ワシだけなのかな（汗） wmvファイル埋め込み（Java Script 編）の手法ではうまく再生できないみたいだ。 チョットMSのページで勉強するようだな。。。 解明できれば良いけど... つうか、今時はFLVが主流なので、Windows MediaPlayer11なんて、どうでも良いかと思う今日この頃。。。]]> FLV動画の埋め込み手順 tag:www.seo-maniax.com,2008://1.33 2008-08-24T15:40:00Z 2008-08-25T01:39:55Z フリーのJW FLV MEDIA PLAYERを利用した、簡単に出来るFLV（フラッシュビデオ）ファイルをHTMLに埋め込む手順。 You Tubeで扱っているのもFLVであり、Windows Media Player がMac用の開発をやめたことも拍車をかけているのかもしれない。 ちなみにMacOS用のWindows Media Playerは、Windows Media Player 9 for Mac OS Xまで。 そんな訳で、私の所でもFLVを扱う事がかなり増えてきています。 FLVをHTMLに埋め込むにはいくつか方法がありますが、ここでは簡単で分かりやすい手順を紹介することにします。]]> JW FLV MEDIA PLAYER 4.1を利用したFLVファイルの埋め込み FLVをHTMLに埋め込むには、FLV Playerが必要になります。 ここではJW FLV MEDIA PLAYER 4.1を利用した説明をします。 FreeのPlayerなので、まずは上記リンクからダウンロードしてください。 jwflvp.jpg ページ上部に左画像のようなDownload Nowと言う所が有りますので、メールアドレスを入力してDownload JW FLV MEDIA PLAYERをクリックするとダウンロードされます。 mediaplayer.zipと言うファイル名でダウンロードされます。 ダウンロードしたmediaplayer.zipを任意の所に解凍してください。 解凍した中身で使用するのは、本説明ではplayer.swfのみです。 これがプレーヤー本体になります。

埋め込みタグ

320x240 pixel/inch のｆｌｖ動画を埋め込む場合のタグの例です。 
<object id="flvplayer" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="320" height="260">
<param name="movie" value="player.swf?file=example.flv&image=example.jpg&fullscreen=true">
<param name="wmode" value="transparent">
<embed name="wiitube_refine" src="player.swf?file=example.flv&image=example.jpg&fullscreen=true" width="320" height="260" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
■1行目のhttp://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0はプラグインの場所とバージョン。 （現在ではAdobeになっていますが、転送されるのでこのままでOK） フラッシュのバージョンは、あえて6,0,29,0にしてあります。 理由は下位互換にするため。 自分が最新バージョンを使っていようと、世の中全てが最新バージョンではありませんので。 ■1行目後半のwidth="320" height="260"は表示させるサイズ height="260"になっているのは、プレーヤー下に表示されるコントロールバーの幅を考慮した数値です。 ■2行目のvalue=""内は、player.swf 、ｆｌｖファイル（example.flvの部分）、最初に表示させる静止画（example.jpgの部分）のobject用パスです。 ■4行目のsrc=""内は、embedタグ用で、player.swf 、ｆｌｖファイル（example.flvの部分）、最初に表示させる静止画（example.jpgの部分）、のパスで、fullscreen=trueはフルスクリーン表示可能の命令です。 2行目と4行目に入れるパス・フルスクリーン可否は、それぞれ&で仕切ります。 （フルスクリーンを許可しない場合は、fullscreen=trueを書かなくて良い） mediaplayer.zipを解凍して出来たplayer.swfとFLVファイル・表示用画像を、タグに記した任意のパスに転送すればOKです。

HTML文法を考慮したFLV動画の埋め込み

上記のタグのようにHTMLに埋め込みすればFLVは正常に表示されますが、文法上embedタグを私用するのはよくありません。 embedタグはMozilla用のタグですので 文法を気にする方は、javascriptとして埋め込むと良いでしょう。 上記の例を.jsファイルとして保存し、HTMLでjsファイルを読み込むと言う方法になります。 
// example.js
document.write('<embed src="player.swf" width="320" height="260" bgcolor="ffffff" allowscriptaccess="always" allowfullscreen="true" flashvars="author=編集者名&file=example.flv&image=example.jpg&title=sample-mov&fullscreen=true" />');
player.swf　JW FLV MEDIA PLAYERのパスとファイル名（ファイル名は【player.swf】で変える必要無し） author=編集者名　は作成した人の名前（自分の名前など） file=example.flv　flvファイルのパスとファイル名 image=example.jpg　表示用静止画のパスとファイル名 title=sample-mov　タイトル fullscreen=true　フルスクリーン可（不可の場合は記述しない） と言う感じです。それぞれ区切りは通常タグと同じように&で区切ります。 ファイル名を任意のファイル名.jsとして任意の所に転送し、HTMLはFLVビデオを表示させたい所に 
<script type="text/javascript" src="example.js"></script>
と記述すればOKです。 例ではexample.jsと言うファイル名にしています。パスはexample.jsを転送したパスになります。 パスやファイル名などの間違いが無ければ下のように表示されます。 プレーヤー下部のコントロールバー右側にあるbig-btn.gifをクリックするとフルスクリーンになります。]]> Safariでのcssレイアウトずれ対処 tag:www.seo-maniax.com,2008://1.31 2008-08-22T08:27:44Z 2008-08-22T08:43:41Z CSS（スタイルシート）を使ったサイトで、Safariで見たときにズレてしまう場合の対処法です。（cssハック） IE7やIE6でのcssを使ったズレの対処法を以前に書いたが、 今回はSafariのズレの対処法。 どうせならMac用Safari・Windows用Safari両方に対応しているものの方が良いですよね？ てな訳で、まぁ、世間で言うCSSハックってヤツですが困っている方は使ってみると良いでしょう。 ]]> Safari用CSSハックの適用 使い方は簡単で、スタイルシートに 
/* safari only \*/
/*\*/ html*
を書けばよいわけです。 例として、#exampleと言うidをSafari用に直したい場合は 
/* safari only \*/
/*\*/ html* #example{
float:right;
width:190px;
height: 30px;
}
見たいな感じで書けばよいわけですな。 これでWindows版、Mac版両方のSafariで対応できちゃいます。]]> Firefox3 公開！IE7より9.3倍早い！！！ tag:www.seo-maniax.com,2008://1.30 2008-06-19T03:10:00Z 2008-06-19T03:12:48Z オープンソースWebブラウザの最新版Firefox 3 が米国時間2008年6月17日にリリース！IEの9.3倍も最速で快適なブラウザ。早速ダウンロードしてテストしましたが、本当に最速です。 米Mozillaが、米国時間2008年6月17日にオープンソースWebブラウザの最新版「Firefox 3」を公開しました！ 史上最速ブラウザとのウワサ。 FireFoxを以前から使用していた著者にとっては嬉しい話である。 実はFirefoxはOperaなんかと比べて若干遅いってのが気になっていましたのでf^^; あっ、もちろんIE7みたいな使えないブラウザは、はなから比較対照外です（笑） ]]> 思った以上に快適なブラウザに変身していました！ Firefox2以前は、YouTubeや、ニコニコ動画などでフリーズするなどの不具合もありましたが、 Firefox3ではこの不具合はおきませんでした（検証済み！） IEなどの使えないブラウザを未だに使用している方々、 Firefox3に乗り換えるべきです。 IEはセキュリティーも甘いので...（笑） ]]> 自宅サーバーでの検索エンジン対策 tag:www.seo-maniax.com,2008://1.29 2008-05-20T03:45:00Z 2008-05-20T03:58:37Z 自宅サーバーでYahooにキャッシュされないとかいう悩みを持っている方はいませんか？（私だけ？）　海外DNSを使用したサーバーは、Yahoo Japanに弱い！ってご存知ですか？　5年間私が実験した結果そう言う結果になったのですが。。。 YahooとGoogleのキャッシュ状況についての話。 サイトの作りやその他色々な要因は有ると思うのだが、一版肝心な所だと思われる事をいくつか取り上げますので、これから自宅サーバーでWebサイトを作ろうと思っている方は参考にしてみてください。 ]]> なぜYahoo対策を必死でやるのか？ 日本国内において一番シェアの多いYahoo。 日本国内でサイト作成する場合、SEO対策として一番重要かつ力を入れているのがこのYahoo対策では無いだろうか？ 業務でホームページを作成している会社や、中でも特にアフリエイターと呼ばれる方々は、このYahoo対策に躍起になって取り掛かっていると思う。 自宅サーバーを作ろうという方でYahooに拘る方は少ないと思うが、HP作成会社やアフリエイターの方々がなぜそこまでYahooに拘るのか？ それは、日本人は検索の仕方が下手だからであると言える。 悪い言い方をすれば、検索が下手な人 ＝ Yahooで検索 ＝ お金を落とす人と言った方が早いだろうか？ こんな言い方をすると語弊を生じるかもしれないが、凡そ当たっていると思う。 それと、日本国内ではYahooを使用して検索する人が全体の約7割近くいると言われているという理由も大きい。 ちなみに日本国外でのYahoo使用率は2割程度だったりする。 そんなわけで、みんな躍起になってYahoo対策をするのである。

自宅サーバーを作るメリット

話は元に戻り自宅サーバーでの話し。 特に非固定IPでダイナミックDNS（DDNS）を使用しているサーバーの場合。 自宅でサーバーを構築している人（私も含め）は、その理由に、 1■スキルアップがしたい 2■ちょっとだけ自慢になる 3■容量を気にせず、HDD容量の許す限り好きなだけ使える 4■色んなモジュールを組み込んで好き勝手に使える 5■余ったマシンとネット環境があればすべて無料で出来る などの理由が主な理由ではないだろうか？ 中でも特に3と5の理由。 OSはLinuxやSolarisなどのサーバーOSが無料で使用でき、Webサーバーアプリケーションも世界で最も多く利用されているApacheが無料で使用できる。 独自ドメインに拘らなければ無料で使用できるダイナミックDNSサービスは日本国内外でもかなりの数がある。 自分の環境と好みで選べばよいのだが、前記したYahoo対策に関して、自宅サーバー構築にはちょっとした落とし穴があるみたいだと言うのがここ4年以上自宅サーバーでWebサイトを構築してきた中でわかって来た事がある。

Yahooでキャッシュされないサイト

私は今現在で、Yahooカテゴリー登録サイトを4つ持っている。 その中の3つが自宅サーバーで運営しているヤフカテ登録サイトである。 しかしだ、自サバで運営している3つのサイトがYahooにキャッシュされないのである。 キャッシュされないと言っても全くではない。トップページと他数ページしかキャッシュされないのだ。 通常のサイトなら、すべてのページがキャッシュされるはずなのだが、どうもおかしい。。。 そう思いここ1年以上掛けて色々と試してみた結果... 海外DNSを使用したサーバーは、Yahoo Japanに弱い！と言うことが解ってきた。 そのほかにも多少の要因はあるのだが、根本はここに有ったと思われる。 実際、Yahooにキャッシュされなかったサイト（ヤフカテ3サイトも）は、すべて海外DDNSのNO-IP.comのDDNSを使用していた。 ちなみに同じサイト構造で、ieserverさんのDDNSを使用してサイトを作ってみた所、こちらのサイトはすべてのページがYahooにもキャッシュされたと言う実験結果になったのである。 ちなみにGoogleやその他のYahoo以外の検索エンジンにはNO-IP.comなどの海外DDNSを使用していても問題なく正常にキャッシュされる。 要するにYahooで強いサイトを作るには、日本国内のDNSサーバーが必須であると言える。 この実験を経て、当方のヤフカテ登録サイトも全て、独自ドメインを取得して日本国内のDNSを使用した所、やっとYahooにもキャッシュされるようになりました。 （ちなみにここのサーバーは自サバじゃ有りません） Yahooにキャッシュされなくて困っている自宅サーバーを構築している方、試す価値は大いに有ると思いますよ！ ドメインを変えたら301リダイレクトで今までのページランクやらドメインエイジなども引き継げますので。 多分この現象は自宅サーバー以外、海外のレンタルサーバーを使用している人などにも同じことが言えると思います。 （海外サバはお金がもったいないので試してませんが...f^^;） ]]> 相互リンクと被リンク tag:www.seo-maniax.com,2008://1.28 2008-05-19T02:30:00Z 2008-05-19T02:30:59Z 相互リンクと被リンクの意味と違いについて簡単に説明します。リンクはSEOでも重要な部分になります。 相互リンクとか被リンクと言うことを耳にすることが有ると思います。 一体それらは何なのか？ また、それらはどんな役割を果たすのか？ メリットは？ それらを簡単に説明します。 ]]> 相互リンク 相互リンクとは、簡単に言うとお互いのサイトでリンクを貼り合う事を言います。 例えば貴方がホームページを作成したばかりで、そのページの存在を数人しか知らない場合、当然他の人にも自分のページを見てもらいたいと思うでしょう。 そう言った場合に、他のホームページ管理者に、自分のサイトにリンクを張ったから、私のところもリンクしてくださいとお願いに行き、お願いに言ったサイトがリンクをしてくれれば双方向で互いのサイトがリンクされたことになります。 これを相互リンクと言います。

被リンク

相互リンクに対して、一方的にリンクをされている場合のことを被リンクと言います。 例えば貴方がとても面白い記事を書いていたり、他の人にとっても有益な情報を掲載していたりすると、こちらから頼んでいなくても貴方のサイトをリンクしてくれる場合があります。 また、検索エンジンは、被リンクが多いサイトを優良なサイトと判断しますので、被リンクの数は多い方が良いと言えます。 しかし、ただ単に多いだけではいけません。 優良なサイトからの被リンク数が多い方が良いのです。 これは相互リンクに関しても言える事です。 優良なサイトの判断基準に、Googleページランクと言うものが有ります。 ページランクが高いホームページからのリンクを貰う事が、SEO的にも有利になります。 ページランクを確認するには、Googleツールバーをインストールすれば確認できます。 IE用とFirefox用が有りますので各ブラウザで使用してください。 Googleツールバーのインストール インストールはGoogleツールバーのダウンロードサイトを開き、 ツールバーをダウンロード と書いてあるバーをクリックし、ダウンロード画面が出たら開くを選択すればインストールが開始されます。 インストール終了後右のような画面が出ますので、ページランクの...のチェックボックスにチェックを入れてOKすれば完了です。 pagelank ページランクを確認したいサイトを開き、URLバーの下に表示されたGoogleツールバー中のPageLankバーを見ると、そのサイトのページランクが表示されるはずです。 ページランクは、0～10のランク表示がされています。 ちなみに当サイトは2008年5月の時点では、作って間もないサイトなのでページランクは1です（苦笑） ]]> metaタグを知ろう！ tag:www.seo-maniax.com,2008://1.27 2008-05-15T02:40:00Z 2008-05-15T02:51:12Z ホームページを作成して間もない頃は、見た目だけにとらわれてしまって、肝心な検索エンジンに対しての対策を全く出来ていなかったりします。ホームページビルダーやGoLiveなどのホームページ作成ソフトに頼りすぎるのは良くありません。中身の手直しも必要になります。 metaタグと言う言葉を耳にすると思います。 では一体metaタグとは何なのでしょう？ その辺りを初心者にも出来るだけ解りやすく説明します。 ]]> metaタグの概要 metaタグとは、html（またはphp）ページをソース表示したときに出てくる、
<head>～</head>
間に記述するタグのことです。 このタグの中身は実際にページに表示されることはありません。 では、なぜこのタグが存在するのか？ それはWebページのお約束事みたいなものです。 しかし実は、ここは検索エンジン対策（SEO対策）に重要な部分だったりします。

metaタグの中身の例

当サイトのmetaタグのはこんな感じになっています。（実際はもっと記述がありますが...） 尚、当サイトは、XHTML1.0 Transitionalで作成していますので、ホームページビルダーなどの場合とは若干異なります。 一般のホームページ作成ソフトの場合、多くはHTML4.01 Transitionalで作成されていると思います。 
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta content="ALL" name="ROBOTS" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="http://www.seo-maniax.com/favicon.ico" />
<title>ホームページ作成SEOマニアックス</title>
<meta name="keywords" content="ホームページ,作成,マニュアル,SEO対策,検索エンジン,サーバー,Apache,swf,wmv,flv,埋め込み,設定,PHP,HTML,CSS,MT" />
<meta name="description" content="ホームページ作成の基礎知識から、スタイルシートの使い方やレンタルサーバーの設定などを解説します。" />
<link rel="start" href="http://www.seo-maniax.com/" title="ホームページ作成SEOマニアックス" />
<link rel="next" href="http://www.seo-maniax.com/archives.php" title="ホームページ作成SEOマニアックスサイトマップ" />
</head>
HTML4.01 Transitionalの場合は、各タグの最後にある /（半角スペースとスラッシュ）を削除すれば使用できます。

meta http-equiv="content-type"

ここに記されているのは、このコンテンツ（ホームページ）がどんな文字セットを使用しているのかの記述です。 これが記述されていないと、ブラウザによってはどんな文字セットを使用しているかを判断できずに文字化けすることが有りますので必ず記述しましょう。 当サイトはutf-8を使用していますので
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
のように記します。 shift_jisを使用している場合は、
<meta http-equiv="content-type" content="text/html;charset=shift_jis" />
となります。 ちなみにこれはXHTML1.0 Transitionalの文法になりますので、HTML4.01 Transitionalの場合はタグの最後にある /（半角スペースとスラッシュ）を削除して、
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
となります。

meta name="robots" content="INDEX,FOLLOW"

この部分は検索エンジンの巡回ロボットに、このページをキャッシュさせるかさせないかの記述です。 ページを検索エンジンにキャッシュさせたい場合は XHTML1.0 Transitionalの場合 <meta content="ALL" name="ROBOTS" /> <meta name="robots" content="INDEX,FOLLOW" /> HTML4.01 Transitionalの場合 <meta content="ALL" name="ROBOTS"> <meta name="robots" content="INDEX,FOLLOW"> ページを検索エンジンにキャッシュさせたくないい場合は XHTML1.0 Transitionalの場合 <meta content="ALL" name="ROBOTS" /> <meta name="robots" content="NOINDEX,NOFOLLOW" /> HTML4.01 Transitionalの場合 <meta content="ALL" name="ROBOTS"> <meta name="robots" content="NOINDEX,NOFOLLOW"> と記します。

meta http-equiv=

この部分は、javascriptや、スタイルシートを使用している場合に記述します。 <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" />

link rel="shortcut icon

この部分は、ショートカットアイコン（favicon.ico）を作成していない場合は記述しなくて良い部分です。 ショートカットアイコンとは、ブラウザのURLバーの先頭や、お気に入りにサイトを追加した時に出来るアイコンの事です。 当サイトをブラウザで表示したときに、IE7以降やその他のブラウザで開くと、URLバーとタブバーにアイコンが表示されていると思います。 必要が無いといえば無いものなのですが、オリジナリティーを出したいのなら作ると良いかもしれません。 ショートカットアイコン（favicon.ico）を作りたいなら、自分で画像を用意すればFavIcon from Picsと言うサイトで無料で作成できます。

titleタグ

最も重要なmetaタグのひとつになります。 要するにここは、ページのタイトル部分になりますので、絶対に入っている必要があります ホームページビルダーやアドビのGoLive（ゴーライブ）などで作成されているページで、このタイトルが書かれていないページをかなり見かけます。 特に酷いのが、アドビのGoLiveで作成されたページで、タイトルがデフォルトのままの<title>Untitled Page</title> となっているページ。 中には<title>Adobe GoLiveへようこそ</title> なんてなっているところも見かけます。 一体誰のページなのでしょう？Adobe GoLiveのページですか？（汗） 折角一生懸命に作ったのに、ページのタイトルがAdobeの宣伝なんてシャレになりません... 知らずに作っているのですから仕方が無いのですが、ゾッとしませんか？ 絶対にtitleはページ毎にちゃんとしたタイトルを入れるように心がけましょう！

meta name="keywords" content=""

ここはページのキーワードを入れる部分になります。 キーワードとは、そのページにとって重要なキーワード、または記載されている内容に沿ったキーワードで、検索エンジンで検索されるであろう単語のことになります。 酷いサイトになると上位表示させたいがために、ページと全く関係の無いキーワードを入れているところもあります。 たとえば、釣りのページなのに上位表示させたいが為に有名芸能人の名前が入っていたり... それではキーワードの意味を全く成しません。 逆に検索エンジンからはスパム行為とみなされてしまいますので、そのような行為は絶対にしないでください。 書式は<meta name="keywords" content="" />の""の中身に、自分の作ったページの内容に合うキーワードを入れていきます。 キーワードは単語で書き、各キーワードを,で区切ります また、キーワードを多く入れ過ぎても意味がありませんので、10個程度にします。

meta name="description" content=""

この部分はページの説明文になります。 metaタグdescription 検索エンジンなどで検索したときに、リンクの下に文章が出てくると思います。 （画像赤枠部分） descriptionタグを使用していない場合は、この部分にページの本文が表示されます。 しかし、検索エンジン対策としてはdescriptionタグにキーワードとなる要素を入れつつ、ページの説明を記述するようにします。 そうすることでライバルサイトよりも上位表示される可能性が高くなります。 上位表示されるには他にも要因がありますが、やらないよりやったほうが良いです。 書式は<meta name="description" content="ページの説明文" /> のようになります。ページの説明文の部分を、ご自分のページの説明文と入れ替えてください

link rel="start"　link rel="next"

出来ればlink rel="start"　タグlink rel="next"　タグは入れた方が好ましいです。 このタグは検索エンジンを、元のページ（link rel="start"）の所在地と、次のページ（link rel="next"）への誘導をスムーズに行うために入れるmetaタグになります。 ブログの場合はこのタグは自動に入るものが多いですが、手打ちページの場合は製作者が自分で考えURLを記述する必要があります。 当サイトで言うと、トップページは<link rel="start" href="http://www.seo-maniax.com/" title="ホームページ作成SEOマニアックス" /> <link rel="next" href="http://www.seo-maniax.com/archives.php" title="ホームページ作成SEOマニアックスサイトマップ" />のようになっています。

その他のmetaタグ

外部スタイルシートを使用している場合は、metaタグにスタイルシートのリンク先を記述する必要があります。 <link rel="stylesheet" href="スタイルシートへのパス" type="text/css" /> また、外部javascriptなどを使用している場合は <script src="javascriptまでのパス" type="text/javascript"></script> .cssや.jsファイルへのパスは、URLでも相対パスでもかまいません。 長く記しましたが、ホームページ作成ソフトで誰にでも簡単にホームページが作れるようになっている中、この部分を全く知らなずにサイトを作っている方が非常に多いです。 ライバルに差をつけたいならここに記したmetaタグをご自分の環境に合わせて書き換え入れることをお勧めします。 ]]> go-pear.phpが実行できない場合 tag:www.seo-maniax.com,2008://1.26 2008-05-07T14:05:00Z 2008-05-07T14:07:18Z コアサーバーにPEARインストールする場合の注意事項です。go-pear.phpのバージョンは1.1.1ですが、そのままではコアサーバーではgo-pear.phpの実行が出来ません。 PEARのインストール（さくらサーバー編）でpearのインストール手順を記しましたが、 一部のサーバーで、go-pear.phpが動きませんでした。 試したのはコアサーバー 原因は簡単な所にありますので、その手順を紹介します。 ]]> コアサーバーでのpearインストール コアサーバーの手順書を見てみたらこんな記事がありました PHPをCGIとして動かす方法について 要するに.htaccessを使用して、.phpをcgiとして動かすって事です。 .htaccessに 
AddHandler application/x-httpd-phpcgi .php
と記して、go-pear.phpを転送したディレクトリに転送してください。 この後の操作は、PEARのインストール（さくらサーバー編）とほぼ同じです。 違うのはGO-Pear Installer画面のConfiguration画面で、 一番上の項目（Installation prefix）と、 11番目の項目11.php.ext path,optical(CLI command tools) 部分に入れるパスが違うことぐらいです。 まぁ、そんなに難しいことではないのですが、私自身がこの部分で躓いたので、メモ書きとして残しておきます（笑） ]]> SEOを考慮したサイトの引越し（301リダイレクト） tag:www.seo-maniax.com,2008://1.25 2008-05-02T06:55:00Z 2008-05-02T06:58:13Z 新しくドメインを取った時など、サイトの引越し時にSEO的に有利な301Redirect（301リダイレクト）を使用する手順です。これを使うことでページランクも一緒に引き継ぐことが出来ます。 新しくドメインを取った時など、サイトの引越し案内をリンクしてもらっている人に出したりしますよね？ それと同じで検索エンジンにも案内を出す必要があります。 案内と言っても、検索エンジンに向けてメールを出したりするわけでは有りません（笑） では、どんな方法があるのか、例を挙げます。 META Refreshタグを使用した自動転送 サイトを引っ越した際、一番簡単なのはMETA Refreshタグを使って、自動的に新しいサイトに転送する方法です。 これはHTMLの間に 
<meta http-equiv="Refresh" content="5;URL=http://example.com/">
のように記す方法です。 content="5は、5秒後に転送の場合です。5と言う数字を好きな秒数に書き換えます。 その後の;URL=http://example.com/"には、転送先のURLを記します。 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>サイトのタイトル</title>
<meta http-equiv="Refresh" content="5;URL=http://example.com/">
</head>
<body>
当サイトはhttp://example.com/に移動しました
5秒後に新しいサイトに自動転送します。
</body>
</html>
こんな感じです。 しかしこのMETA Refreshタグは、検索エンジンに対して良くありません。 要するにSEO的に良くないと言うことです。 何がいけないかというと、古いサイトの情報が全く受け継がれないと言うことです。 ある程度の年数が経ったサイトなら尚の事、ページランクやらドメインエイジやら、その他の情報が全く受け継がれないのです。 古い方のサイトが検索エンジンで上位表示されていたのに、ドメインを新しくしたら上位表示されなくなったなんて事が起こってしまいます。 そこで、301リダイレクトの登場です。

301リダイレクト（301Redirect）

YahooやGoogleなどの検索エンジンでも、サイトの移転時には301Redirectを推奨しています。 ただ、この301Redirectは、使用できるサーバーが限られてしまいます。 Apacheを使用しているサーバーで、尚且つmod_rewriteエンジンが有効になっている必要があります。 多くのインターネットプロバイダの無料でついてくるWebサーバでは使えません。 有料レンタルサーバーの、サクラサーバー、ロリポップ、チカッパ、コアサーバー、XREA、Xサーバーなどは使用可能です。 また、自宅サーバでApacheで構築をしている人はmod_rewriteエンジンを有効にすれば使用可能です。 ちなみに自宅サーバー（Apache2.2.x以降）などでmod_rewriteエンジンを有効にするには、 httpd_confを開き、110行目辺りの 
#LoadModule rewrite_module modules/mod_rewrite.so
↓
LoadModule rewrite_module modules/mod_rewrite.so
のように変更し、Apacheを再起動させればOKです。 レンタルサーバーの場合は、.htaccessを利用するのが簡単でわかりやすいと思います。

301リダイレクト｜.htaccessの記述手順

テキストエディターで内容を以下の通りに記します。 
Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://example.com/$1 [R=301,L]
書いたらファイル名を.htaccessとして保存します。 http://example.com/には、ご自分の転送したいURLと置き換えてください。 出来たらFTPでrootディレクトリに転送します ※Windowsマシンを利用している方は、Windows付属のメモ帳では、.htaccessと言うファイルは作れません。 出来ればサクラエディターなどの高機能テキストエディターをご利用ください。 どうしてもWindowsのメモ帳が使いたいのであれば、ファイル名をa.htaccessのようにして、 FTPで転送した後に、アップロードしたファイルを.htaccessとリネームしてください。

Mod-Rewriteを利用できないサーバーの場合

Mod-Rewriteエンジンを利用できないサーバーの場合は、.htaccessに 
Redirect 301 / http://www.example.com/
と記してrootディレクトリにFTP転送します この記述方法は、ページ毎にも設定できます。 たとえば、http://www.old-example.com/abc/index.htmlを、http://www.example.com/abc/index.htmlに転送したいときなどは、 
Redirect 301 /abc/index.html http://www.example.com/abc/index.html
と言うように記します。 上記例で記してある/abc/index.htmlの部分は、絶対パスで記述する必要があります。 ]]> IE7でのレイアウトずれ対処 tag:www.seo-maniax.com,2008://1.24 2008-05-01T00:15:00Z 2008-05-01T00:22:12Z CSSハックを利用したインターネットエクスプローラー7でのレイアウトずれの対処方法です。インターネットエクスプローラーは、CSSの読み込み方が他のブラウザ（Mozilla系など）と全く違い、しかもバージョンによっても表示の仕方が全く異なり、レイアウトがずれてしまう困ったブラウザです。 スタイルシートでサイトのレイアウトを作成していると、様々なブラウザで確認してみるとレイアウトがずれることがある。 特にインターネットエクスプローラー（以降IEと略）... 同じIEでもIE7とIE6では表示の方法が全く違うので、レイアウトが崩れてしまう。 IE以外のブラウザではずれないのに、こいつらだけはどうしようもないほどに崩れる駄目ブラウザである。 そんな駄目ブラウザが日本国内のシェアーの大半を占めているのであわせないわけには行かず... と言うわけで、ここではIE7だけにCSSを適用させる手順を掲載します。 CSSハックの適用 IEでのレイアウトずれ対処（css）では、IE6でのレイアウトずれ対処だったが、それと併用すればよいでしょう。 IE7の場合は 
*:first-child+html
をCSSに記述してやります。 
*:first-child+html #body{IE7用のスタイルシート記述}
と言う感じ。 例を挙げると 
.explanat
{
	font-size: 12px;
	text-align: right;
	color: #000000;
	padding-right: 15px;
	line-height: 0.7;
	_line-height: 0;
	margin-top: -285px;
	_margin-top: -280px; /*-----IE6用記述-----*/
	margin-left: 350px;
	margin-bottom: 235px;
	_margin-bottom: 241px; /*-----IE6用記述-----*/
}
 /*-----ここからIE7用記述-----*/
*:first-child+html .explanat
{
	font-size: 12px;
	text-align: right;
	color: #000000;
	padding-right: 15px;
	line-height: 0.5;
	margin-top: -285px;
	margin-left: 350px;
	margin-bottom: 235px;
}
 /*-----IE7用記述ここまで-----*/
こんな感じになります。 IEのようなお粗末なブラウザで確認してそれでおしまい！なんて事をすると、後で痛い目にあいますので、 Firefoxで全体のレイアウトを決めてから、IE用にスタイルシートを書き直すようにしてみましょう。 そうすれば殆どのブラウザでレイアウトがずれることなく正常に表示されると思います。 FireFox Add-ons の Edit CSSを使用することで、CSSをリアルタイムで編集することができます。 ]]> バックリンク（被リンク）について tag:www.seo-maniax.com,2008://1.23 2008-04-21T06:43:00Z 2008-04-21T06:43:51Z 検索エンジンで上位表示させるためには、バックリンク（被リンク）の数と質が重要になってきます。サイトを作ったばかりなら、まずは自分のサイトを相手にリンクしてもらうようお願いに回ってみましょう。 リンクとか相互リンクと言う言葉を聞いたことはあるでしょう。 ホームページを作成できたらできるだけ他のサイトからリンクをもらうようにしましょう。 では、なぜリンクしてもらうが必要なのか。 簡単に説明します。 ]]> バックリンク（被リンク）とは？ バックリンクを簡単に説明すると、自分のサイトやブログが、他のサイトからどれだけリンクをされているかと言うことです。 では、なぜリンクをしてもらう必要があるのか。 それはただ単に、リンクしてもらった先からユーザーが自分のページに来ると言うことだけではなく、 検索エンジンはバックリンクをたどってあなたのサイトに入ってくる殻なのです。 YahooやGoogle（特にGoogle）などの検索エンジンは、このサイトはどのぐらいのバックリンクがあるかでサイトの重要度を判断します。 （それだけでは有りませんが...） 要するに同じような内容のサイトであれば、バックリンクの多いサイトが検索で上位に表示されると言うことです。 しかし、バックリンクをただ単に増やせばよいのかと言うと、そうでもありません。 このサイトは自分で作って置きながら悪い例なのですが、自分のサイトの内容に合ったサイトからリンクをもらうのが理想です。 では作ったばかりのサイトがバックリンクを増やすにはどうしたらよいのか。

相互リンクを申し込む

作ったばかりのサイトに向こうから『リンクしてくれ』と来るのは皆無に等しいでしょう。 ならばこちらから頼みに行くしかありません。 自分で色々なサイトを見に行って、リンクして欲しいサイトにメールや掲示板、ブログならトラックバックやコメントをいれるなどの方法でリンクの申し入れをします。 どんなに丁寧な文章を書いても、中には見向きもしてくれないサイトも有ります。 でもそんなのは当たり前だと思って、地道にリンクのお願いをするしかありません。 しかし内容が薄っぺらなサイトではお願いしに言っても誰も相手にしてくれませんので、リンクのお願いをしながら、サイトの中身も充実したものにしていきましょう。 中には2～3ページの記事で後はリンク集だらけなんて言うくだらないサイトの方がリンクのお願いに来ることがありますが。。。 そう言うサイトは自分でもリンクする気になれませんよね？ 相互リンクが増えてきて、自分のサイトも内容が充実してくれば、相手からリンクしてくださいとお願いに来てくれるようになります。 そうなれば必然的にバックリンクも増えるので、検索エンジンもそのサイトを重要視するようになりますので、当然アクセスも増えてきます。 サイトを上位表示させるには、まだまだ他に沢山の要因がありますが、 まず、はじめの一歩として、自分の気に入ったサイトにリンクのお願いに行くことからはじめましょう。 ]]> Thumbs.db ファイルをFTPに残さない（作らない） tag:www.seo-maniax.com,2008://1.22 2008-04-20T17:35:00Z 2008-04-20T17:39:38Z Windowsユーザー特有の作りたくないけど出来てしまうファイルThumbs.db。フォルダごと画像をFTP転送するとできてしまいます。こいつが何なのかの解説と、これを作らない方法を説明します。 Thumbs.dbと言うファイルができてしまう。 こんなものは邪魔なもの以外の何者でもないし、サーバー容量を圧迫するだけなので削除したほうが良い。 そもそもこのThumbs.dbとは何なのか？ その解説とThumbs.dbを作らない手順をお教えします。 ]]> Thumbs.db とは何か？ 縮小版 Thumbs.db とは、左画像のように、画像を縮小版表示でサムネイル化させた時に、Windowsが勝手に作るシステムファイルのことです。 これは次回同じフォルダを開いたときに、画像のサムネイル表示を早くさせるために、フォルダ内の画像情報を保存しているファイルになります。 低スペックのマシンなら便利な機能かもしれませんが、最近の高速マシンには無用の産物ともいえます。 フォルダオプションで、隠しファイルを表示させない設定になっている場合は、このファイルはマシン上では確認できません。 しかし、画像をFTP転送する折にフォルダごと転送すると、転送先のフォルダにはThumbs.dbが一緒に転送されてしまいます。 物によってはこのThumbs.dbは結構大きなファイルになりますので、邪魔物以外の何者でもありません。 FTP転送されたthumbs.db 左はFTP転送してできたThumbs.db ファイルの例です。 元画像のファイルサイズより大きいのがお分かりでしょうか？ 中にはこのように、元画像のファイルサイズより大きくなってしまうものもあります。 画像を多く扱い、ディレクトリ（フォルダ）を細かく分けているサイトの場合、サーバー領域を圧迫することにもなりかねます。 Thumbs.dbはWindowsOS上でしか役に立ちませんので、当然FTP転送で転送されてしまったThumbs.dbは削除しても問題ありませんし、むしろ削除すべきです。

Thumbs.dbファイルを作らなくするには

前記したとおり、最近の高性能マシンを使っているならThumbs.dbなど有っても邪魔なだけですので、これを作らないように設定します。 設定手順は、マイコンピュータを開き、次いで、ツールタブよりフォルダオプションを選択します。 フォルダオプション設定例 フォルダオプションウインドウが出てきますので、表示タブに移動します。 詳細設定の項目をスクロールしていくと、 縮小版をキャッシュしない という項目が出てきますので、この項目先頭にあるラジオボタンにチェックを入れます。 チェックしたら画面右下の適用ボタンを押して設定を適用させてOKを押下し、フォルダオプションを終了します。 これでThumbs.db ファイルは作成されなくなります。 Windowsにとっては便利そうに見える機能は、実は他では全く使えなかったりするものです。 ローカルやサーバーのディスク容量を確保する為にも、この設定は行っておいたほうが良いと思われます。 しかし、この設定を行ったことによるトラブルは責任を負いかねますので、自己責任で行ってくださいね！ 問題ないと思うけど（笑） ]]> 自宅サーバ でのwmv埋め込み+Firefox・Mozilla（Apache） tag:www.seo-maniax.com,2008://1.21 2008-04-19T04:00:00Z 2008-04-19T04:01:42Z wimvファイルなどを埋め込んだページをFirefoxなどのMozilla系ブラウザで開くとダウンロードされてしまう現象は、Apacheのmime.typesに追記する必要がある。これはApacheの古いバージョンを使用している場合の設定である。2.2ｘではデフォルトで問題無い。 自宅サーバを使っている場合でwmv・swfなどの埋め込みをした場合、FirefoxなどのMozilla系ブラウザで埋め込んだwmvなどを再生しようとクリックすると、ダウンロードのメッセージが出てしまう場合がある。 自宅サーバーにかかわらず、Apacheの古いバージョンのレンタルサーバーの場合も同じ状態になることがある。 原因はApacheのmime.typesの設定にある。 Apache mime.types の設定 
video/x-ms-wmv		wmv
video/x-ms-asf		asf asx wma wax wmv wvx
application/x-shockwave-flash	swf flv
video/x-ms-wmvは、wmvという拡張子のWindowsMediaVideoファイルの再生 video/x-ms-asfは、WindowsMediaのメタファイル application/x-shockwave-flashは、Flashビデオファイルのswf と flv この設定は、Apache2.2ｘ ではデフォルトで設定してあるので大丈夫なのだが、Apache2.0ｘで以前のバージョンではこの設定を自分でしなければいけない。 セキュリティー面を考えても、Apache2.2xにバージョンアップしたほうが良いと言える。 ただし、2.0ｘから2.2ｘに乗り換える場合は、各モジュールの設定が大幅に変わっているので注意も必要ではあるが... ]]> サイト整理=リンク切れのチェック tag:www.seo-maniax.com,2008://1.20 2008-04-15T10:20:00Z 2008-04-15T10:20:13Z Firefox Add-ons の LinkChecker（リンクチェッカー）のインストール手順と使用手順。ページのリンク切れを迅速に探し出すことができます。リンク切れはSEO対策上も良くありませんので早めに修正しましょう。 長年ホームページ作成を行っていると、サイトのページ数も多くなると共に、リンク集なども増えてきたりする。 レイアウトを変えたりデザインを変えたりしているうちに、いくら気を付けていてもリンクが切れてしまう場合があります。 中にはリンクしていたサイトのURLが知らぬ間に変わっていたり、またはそのサイト自体が無くなっていたり... リンクが切れているページをそのまま放置するのはSEO的にも良くありませんし、すぐにでも修正したいと思うけど、 リンク切れを探すのって結構面倒なので後回しにする事ってありませんか？ そんなときには便利なツールがありますのでご紹介します。 Firefox Add-ons LinkChecker（リンクチェッカー） Firefoxのアドオン（プラグイン）で、LinkCheckerというものです。 これを使えば簡単にリンク切れを探し出すことができます。 Firefox専用なので、当然Firefoxがインストールされていなければ使用できません。 ホームページ作成をしている方ならこのブラウザは入れておくと良いです。

LinkChecker（リンクチェッカー）のインストール

https://addons.mozilla.org/ja/firefox/addon/532　左のリンクにアクセスし、Firefox Add-ons を開きます。 LinkCheckerのインストール手順 LinkCheckerのページに行きますので、Firefoxへインストールをクリックします。 LinkCheckerインストール画面 上のような画面が開きますので、今すぐインストールをクリックします。 インストールが実行され、Firefoxの再起動メッセージが出ますので、Firefoxを再起動します。

LinkChecker（リンクチェッカー）の使い方

使い方は簡単で、リンク切れを調べたいページをFirefoxで開いて、画面を右クリックします。 linkcheckerの使い方 画像のような画面になりますので、中央付近にある、Check Page Links (L)をクリックします。 リンク切れ リンクが正しい場合は、リンクの上が緑色で塗り潰され、リンク切れしているところは赤く塗り潰されます このように簡単にリンク切れを見付ける事ができますので、作業もだいぶ軽減されるはずです。 この他、このリンクチェッカーを検索エンジンなどで使用して、現在使用されていないドメインなども調べたりすることができます。 調べて何に使うかはあなた次第（笑） いつまでもIEのような使えないブラウザを使用するより、Firefoxやその他のブラウザに乗り換えることをお勧めします。 ]]> FireFox Add-ons Edit CSS tag:www.seo-maniax.com,2008://1.19 2008-04-15T00:10:00Z 2008-06-19T02:52:07Z ホームページ作成に役立つブラウザ、Firefox。Firefoxを薦める訳とFirefox Add-onsのEditCSSの使い方。ホームページを作るのにIEしか使ったことが無いなんて恥ずかしいことですよ！ すべてのブラウザで正常に表示できるサイトを作ることを心がけたいという事だ。 IEのみでしか確認していないと、他のブラウザで見たときにレイアウトが崩れていて、とても見られたものじゃないというサイトが結構多いのだ。 ここではそんな悩みを少しでも解決してくれる便利なブラウザFireFoxを紹介する。 ]]> なぜFireFoxを薦めるか？ それは数多くのフリーで使用できるFirefox Add-onsというものがあり、その中にはWebページ作成に役立つものが存在するからです。 中でも私が良く使用して便利だと思っているものが、EditCSS これはサイトのスタイルシートをブラウザの左側（ブックマークとかが表示されるところ）に表示させ、タイムリーに編集できるプラグインである。

EditCSSのインストール

EditCSSのインストールは簡単で、https://addons.mozilla.org/ja/firefox/addon/179左のFireFox Add-onsリンクにアクセスし、Firefoxへインストールをクリックするだけ。 Firefoxがインストールされていれば自動的にダウンロードとインストールが終了する。

EditCSSの使い方

EditCSS CSSを見直したいページをFirefoxで開いて、ページ上で右クリックする。 画像のようにメニューの一番下にEditCSSと出てくるのでクリックする。

または、Shiftキー+Ctrlキー+8キーの3つのキーを押すことで起動できる。

EditCSS EditCSSを起動すると、ブラウザの左側（ブックマークなどが表示される所）にスタイルシートが表示される。 ここで目的の箇所を修正すると、リアルタイムで右側に表示されている画面に反映される。 納得いく設定ができたら、左に表示されているスタイルシートをコピーして、本番のスタイルシートに貼り付け反映させればよい。 Webサーバーにアップしたファイル（html）にしか使えないが、この機能はかなり便利である。 Firefoｘでちゃんと表示されていれば、ほとんどのブラウザでも正常に表示されるので、後はインターネットエクスプローラーでチェックして修正すれば良い。 というか、IEだけはスタイルシートの読み込み方が異なるので、レイアウトがずれてしまう場合がある困ったブラウザなのだ...（バグも多いし...） IEだけレイアウトがずれてしまう場合は、IEでのレイアウトずれ対処を参照してください。 ]]> Flash(.swf)の埋め込み-IE・Mozilla系共有 tag:www.seo-maniax.com,2008://1.18 2008-04-13T19:20:00Z 2008-08-23T04:09:01Z Flashムービー（ビデオ）をhtmlに埋め込む手順です。通常のembedタグだと文法上良くありませんので、script化して埋め込む方法になります。 wmv（WindowsMwdiaVideo）ファイル埋め込み（Java Script 編）と同じ要領で、ここではWebで汎用性の高いFlash（swf）の埋め込み手順を解説する。 最近ではflvが主流になってきたが手順は同じである。 なぜFLVやSWFのようなFlashがよく扱われるかというと、ほとんどのブラウザ、ほとんどのOSに対応できるというメリットがあるからである。 Flashなどのビデオファイルは、embedタグで記すのだが、embedタグは文法上よくないので、ここではscript化して読み込ませる方法を紹介します。 ]]> scriptの書式 ここでは、sample.swfというフラッシュムービーファイルを例にします。 sample.swfの置いてあるパスはこのページと同じです。 
// sample.js
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="320" height="240">');
document.write('<param name="movie" value="sample.swf">');
document.write('<param name="quality" value="high">');
document.write('<embed src="sample.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="320" height="240"></embed>');
document.write('</object>');
このように書いてファイル名をsample.jsとしています。 ファイル名はご自分の好きなようにつけて、拡張子が.jsであればかまいません。 1行目の// sample.jsは、自分がわかり易いように書いてあります。 ここではsample.swfを使用しているので、jsファイルもsample.jsとしています。（ここは記載しなくても良いです） 2行目から4行目は、IE用にobjectタグを用いた部分になります。 2行目は縦横のサイズ、classid、codebaseが入ります。 3行目のparam name="movie"で、これはムービーファイルであることと、 同じく3行目のvalue="sample.swf"でFlash（.swf）ファイルのパスを入力します。 4行目のparam name="quality" value="high"は、画質の選択（例は高画質） 5行目はMozilla系のタグでsrc="sample.swf"にファイルのパス、quality="high"は画質（例は高画質）、 pluginspageはFlashPlayerのプラグインページ（現在はAdobeです） type="application/x-shockwave-flash"はmimeタイプ、 そしてwidth="320" height="240"でビデオの縦横のサイズを入れます。 すべての記入が終わったら○○○.jsとして、任意のディレクトリにアップします。 例ではこのページと同じディレクトリにアップしてあります。

htmlファイルへのタグの記述例

htmlのタグの記述は、作成したscriptを読み込むだけですので、Flash動画を貼り付けたい場所に 
<script type="text/javascript" src="ample.js"></script>
と記述します。 前記したようにここでの例は、http://www.seo-maniax.com/high-rank/flashswfiemozilla/の中に、swf、jsファイルを格納してあります。 ご自分の環境に合わせて書き直してください。 ついでにWinIEでのアクティブコンテンツの警告を出さないようにするために 
<!-- saved from url=(0022)http://your_site_domein.com -->
↑これをタグの中に書き込んで置くと良いと思います。 your_site_domein.comは、あなたのドメイン名と置き換えてください。 ちゃんとできていればこんな感じで表示されます ↓ この動画は、新潟にサワラのルアー釣りに行ったときの動画を編集したものです。 お暇な方は見てください（笑） ]]> wmvファイル埋め込み（Java Script 編） tag:www.seo-maniax.com,2008://1.17 2008-04-07T18:40:00Z 2008-08-23T04:11:03Z wmvやwvxファイルの埋め込み時、Mozilla用のembedタグはXHTML1.0 Transitional では文法上良くありませんので、script化して読み込ませる事で文法上も良くなります。IE、Mozilla共用で使用できます wmv動画の埋め込み（IE・Mozilla系共用）でhtmlへのwmvビデオファイルの埋め込みを記したが、Mozilla用のembedタグをhtmlに書くと、実はXHTML1.0 Transitionalの文法上よろしくない。 サイトの文法をチェックするにはAnother HTML-lint gatewayと言う文法をチェック出来るサイトがありますので利用すると良いでしょう。 ではWindowsMediaファイルを埋め込んだページで文法を正しくするにはどうするか？ wmvの埋め込みタグをJavaScript化して、scriptを読み込ませれば問題は解決する。 と言うわけで、Scriptの記述例を説明します。 ]]> wvxメタファイルの準備 メタファイル（.wvx）の作り方はwmv動画の埋め込み（IE・Mozilla系共用）に掲載してありますので参考にしてください。 ここでの例は作成したメタファイル（.wvx）を、http://www.seo-maniax.com/high-rank/wmvjava-script/と言うディレクトリに、opening.wvxと言うファイル名で格納してあります。

Scriptの準備

スクリプトの中身は下記の通り 
// opening.js
document.write('<object class="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="player" codebase="http://www.microsoft.com/Windows/MediaPlayer/" width="320" height="285">');
document.write('<param name="url" value="http://www.seo-maniax.com/high-rank/wmvjava-script/opening.wvx">');
document.write('<param name="autostart" value="false">');
document.write('<embed name="WMP" src="http://www.seo-maniax.com/high-rank/wmvjava-script/opening.wvx" autostart="0" showcontrols="1" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" type="application/x-mplayer2" width="320" height="285"></embed>');
document.write('</object>');
このようになります この例ではファイル名をopening.jsとしてあります。 openingの部分をご自分の分かりやすい名前に変えてください。 ここの例で言えば、wmv、wvxファイルの名前がopening.wmv、opening.wvxと言う物を使用していますので、スクリプトの名前も分かりやすいようにopening.jsとしています。 複数のファイルが有る場合は、元のwmvと同じ名前にしておくと分かりやすいと思います。 1行目の// opening.jsは、自分が分かりやすければ良いです。（記さなくても良い） 2行目のdocument.write内にはIE用のコードで、プレーヤーのオブジェクト名とサイズ 3行目のdocument.write内にはWVXファイルのURL（IE用） 4行目のdocument.write内には、ページ表示時にオートスタートをするかしないか。例はオートプレイ無し（false） 5行目はMozilla用のタグembedの中身が記してあります。 自動再生の有効・無効については、wmv動画の埋め込み（IE・Mozilla系共用）を参照してください。 jsファイルを作り終わったら任意のディレクトリに転送します。 ここの例ではhttp://www.seo-maniax.com/high-rank/wmvjava-script/と言うディレクトリに、wmv、wvx、jsファイルを転送しています。

htmlへの記述（埋め込み）

全てのファイルを作成したら、HTMLへscriptのパスを記載します 
<script type="text/javascript" src="opening.js"></script>
opening.jsの部分は、ここの例ではこの記事と同じディレクトリに入れてある場合のパスになります。 ご自分の環境に合わせて記してください。 ↓こんな感じで表示されます。 上の動画は駿河湾に釣りに行ったときの動画を編集した物です。 暇な方はご覧下さい（笑） ]]> wmv動画の埋め込み（IE・Mozilla系共用） tag:www.seo-maniax.com,2008://1.16 2008-03-27T23:50:00Z 2008-08-26T07:46:01Z wmv動画を埋め込む手順です。IEとMozilla系（FireFoxなど）両方で使用でき、ついでにIEのアクティブコンテンツの警告解除手順も掲載します。 アクティブコンテンツの警告も出ないようにする手順を掲載します。 ]]> メタファイルを作る（.wvx） wmv動画はもう作ってあると仮定します。（作れなきゃ、こんなページ見ても意味無いので（苦笑）） そしてwmv動画はサーバーにアップしておきます。 次いで.wvxと言うメタファイルを作成します。 ここではkanaha11_launch.wmvと言うファイルを、http://www.seo-maniax.com/high-rank/wmv-ie-mozilla/と言うサーバーのディレクトリにアップしたとします。 .wvxの中身は 
<ASX version = "3.0">
<Entry>
<Ref href = "mms://www.seo-maniax.com/high-rank/wmv-ie-mozilla/kanaha11_launch.wmv" />
</Entry>
</ASX>
となり、ファイル名はkanaha.wvxとしてあります。 上記をコピーし、テキストエディターでご自分の環境にあわせて編集し、任意のファイル名を付けてください。 kanahaの部分を、自分の分かりやすい名前に変えてください。 多数のファイルが存在するのであれば、wmvと同じ名前にしておくと良いでしょう。 .wvxとは、デジタル メディアの中にファイル拡張子が .wmv であるビデオが含まれる場合の拡張子になります。 .wma等の音声ファイルの場合は.wax WindowsMedia 6.x以前のファイルの場合は.asxと言う拡張子を付けます。 （詳しくはMicroSoftのWebページへのWindows Mediaの追加を参照してください） メタファイルを作成したらサーバーにアップロードします。 任意の場所か、wmvと同じディレクトリでかまいません。

wvx埋め込みhtmlページを作る

wmv動画とwvxメタファイルをサーバーにアップロードしたら、いよいよhtmlに埋め込みます。 インターネットエクスプローラー（以後IEと略）のみで観覧させたいなら 
<object id="Player" width="320" height="240"
classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="autoStart" value="False">
<param name="URL" value="http://www.seo-maniax.com/high-rank/wmv-ie-mozilla/kanaha.wvx">
</object>
上のように、通常のobjectタグでコントローラーを表示すればよいのですが、これだとFireFoxやNetscapeなどのMozilla系ブラウザでは画面が真っ白で何も表示されません FireFoxやNetscapeでも観覧可能にするには、embedタグを使う必要があります。 
<object id="player" width="320" height="285"
classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="autoStart" value="false">
<param name="URL" value="http://www.seo-maniax.com/high-rank/wmv-ie-mozilla/kanaha.wvx">
<embed name="WMP" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="http://www.seo-maniax.com/high-rank/wmv-ie-mozilla/kanaha.wvx" width="320" height="285" autostart="0" showcontrols="1"></embed></object>
上記のように、IE用のobjectと、Mozilla用のembed両方を記してやる事で、殆どのブラウザに対応できるようになります。 ちなみに上の例は、ページを開いても自動再生しない設定になっています。 自動再生させるには 
<param name="autostart" value="false">　<!-- 自動再生無効（IE） -->
<param name="autostart" value="true">　<!-- 自動再生有効（IE） -->
autostart="0"　<!-- 自動再生無効（Mozilla系） -->
autostart="1"　<!-- 自動再生有効（Mozilla系） -->

IEでアクティブコンテンツの警告を出さない設定

wmvの埋め込みをしたページをIEで開くと、↓ このように ie-alert.jpg アクティブコンテンツは表示されないよう---中略---制限されています と警告が出てしまいます（IEマヂでウザイ！） こんなのが毎回出てきてはウザイだけではなく、折角作った作品も見てもらえないという可能性があります。 これを回避する方法は... 
<!-- saved from url=(0022)http://your_site_domein.com -->
↑これをタグの中に書き込めば回避されます。 your_site_domein.comは、あなたのドメイン名と置き換えてください。 例としてはこんな感じ↓ 
<!-- saved from url=(0022)http://www.seo-maniax.com -->
<object id="player" width="320" height="285" class="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="autostart" value="false"> 
<param name="URL" value="http://www.seo-maniax.com/high-rank/wmv-ie-mozilla/kanaha.wvx"><embed name="WMP" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="http://www.seo-maniax.com/high-rank/wmv-ie-mozilla/kanaha.wvx" width="320" height="285" autostart="0" showcontrols="1"></embed></object>
これでIEでwmvを埋め込んだページを開いても、アクティブコンテンツ表示のアラートは出なくなります。 するとこんな感じになります。 この動画は知人のボートの進水式を編集した物です。暇な方は見てください（笑） ちなみに編集手順はリファレンスオブノンリニアに記してありますので興味のある方はどうぞ♪ ]]> IEでのレイアウトずれ対処（css） tag:www.seo-maniax.com,2008://1.15 2008-03-19T03:05:00Z 2008-04-21T03:11:21Z スタイルシートを使用したサイトが、IE（Internet Explorer）だけレイアウトが崩れてしまう現象の対処法です。 だからIEは嫌いなんだよ！！！ と愚痴をこぼしても日本人の7割が使用していると言われるIEでレイアウトが崩れてしまっては、苦労も報われないと言う物... と言うわけで対処法です ]]> IEだけに読み込ませるcssの書式 っと、えらそうな題名をつけてしまったけど大したことはありませんf^^; 例えばスタイルシート内で右マージンを30ｐｘで設定したのに、IEだけが15pxで良い場合 
	margin-right: 30px;
	_margin-right: 15px;
こんな感じでスタイルシートに書けばOKです。 アンダーバー　_　を頭に付けてやればIEだけにこの設定が反映されます。 
	_margin
	_padding
	_width
	_height
	_line-height
等に使用します。 っと言うわけで･･･　IEは嫌いだ！！！ ]]> IE6以前でpng透過画像を使用する tag:www.seo-maniax.com,2008://1.14 2008-03-10T22:20:00Z 2008-03-11T06:07:12Z IE6以前のブラウザでpng透過画像を使用する方法です。iepngfix.js と言うJavaScriptを使用して、IE6以前のブラウザで透過PNGを対応させる手順になります。 IEなんて嫌いだ！と言ってIEに合わせない訳にはいかないというジレンマ。。。 IE7でやっと対応したが、それでもIE6以前のユーザーはまだまだ多い。 ずっと諦めていたのだが、このサイトを作るにあたりなんとなく調べてみたら… 世の中には頭の良い方がいるもので、IEに合わせてJavaScriptを作ってくださった方がいるのだ。 ありがたい物です。(-人-) ってな訳で、そんなスクリプトの紹介。 ]]> 透過GIFと透過PNGの比較 folda-r.gif 　 左がGIFの透過画像。 このGIF画像はこのサイトのTOPに使用していたんだけど、 輪郭も中もギザギザでちょっとカッコ悪いですよねf^^; Win版のIE6だけは仕方なしに 当初はこの画像をスタイルシートで分けて使用していました。

目立たせないような方法も有りますが、ちょっと使い辛いですよね～

folda-r.png こちらは透過PNG画像。 Windows版のIE6以前で見ると透過部分が透過できずに変な影がついてしまいます。 他のブラウザではきれいに表示されているはずです。

IE6、しかもWin版だけがダメだと言うこの現象、泣きたくなりますな（汗）

iepngfix.js でIE6以前のブラウザで透過PNGを使用する

前置きが長くなりましたが、ここで登場するのがiepngfix.js 作ったのは多分”韓流”プログラマのユンサン　かな？ 使い方は、iepngfix.js←を開いてソースをコピーし、ファイル名をiepngfix.jsとします。 こいつをサーバーにアップして、ページのメタタグに 
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="スクリプトのパス/iepngfix.js"></script>
を、head間に記入します。そして、 
behavior: expression(IEPNGFIX.fix(this));
を、画像を配置したスタイルシートの末尾に記入します。 画像の配置タグsrcの末尾に、style="behavior: expression(IEPNGFIX.fix(this));"　としてもOKです。 
<img alt="folda-r.png" src="folda-r.png" width="283" height="208" style="behavior: expression(IEPNGFIX.fix(this));" />
こんな感じです。 folda-r.png すると、こんな感じでIE6でも透過PNGがちゃんと使用できるようになります。 この記事では丁度上の画像の背景が切れてしまっていて分かりにくいですが、透過の確認をしたい方はTOPページで確認してみてください。

透過PNGが使用できると、デザインの幅もかなり出てくると思いますYO

]]> フレームセットの利点と欠点 tag:www.seo-maniax.com,2008://1.13 2008-03-10T05:35:00Z 2008-03-15T04:16:39Z フレームセットは使いやすいですが、SEO的には良くありません。何故フレームセットがいけないのか、フレームセットの利点、欠点の解説です。 補助的に使用してタグをちゃんと理解して作成するのがベストですが、通常は個人のホームページを作成するのに使用している方が多いはずです。 初級編ではタグの使い方は置いといて、少しでもアクセスを増やせるページと言う物を考えたいと思います。 そこで今回はフレームセットの利点と欠点の説明です。 ]]> フレームセットって何？ フレームセットの構造 ホームページ作成が初めての方は、フレームセット？？？と、なれない言葉に疑問を感じるかもしれません。 フレームセットとは、画面を右と左、もしくは上と下を分けたような作りになっているページの事で、左図のように、1つのページに複数のページを入れ込んだ構造になります。 例では、index.htmlと言うメインのページを上下に分け、上にindex_up.htmlと言うタイトル部分、下にindex_down.htmlと言う本文のページが入れてあります。 よく、上や左側のメニュー部分は固定して有るのに、そのほかの部分がスクロール出来たり、メニュー部分をクリックすると、メニュー部はいつも同じに表示されていて、右や下の部分の表示が変わるような構造になっているサイトがありますよね？ そのようなサイトがフレームセットを使用しているサイトになります。 このようにフレームセットとは、ある意味デザインに優れている部分も有り、作成する側としてはページの見せ方の一つとして重宝する部分があります。

何でフレームセットがダメなの？

デザイン的に使いやすいフレームセット。では、フレームセットのどこがいけないのか？ 下のタグをご覧下さい 通常フレームを使用したサイトの場合、トップページが　index.html　になります（.htm等の場合有り） 相互リンクなどをしてもらうときは、当然トップページをリンクしてもらう事になります。 検索エンジンを意識したサイトを作るでも記載したように、多くの人は検索エンジンよりサイトを観覧しに来ます。 検索エンジンはリンクをたどってトップページに入ってきます。 そしてページの中身に書いてある文章を読み取り登録していくような仕組みになっています。 その時上のようなトップページの中身ではどうでしょうか？ ご覧の通り、フレームセットを使用したサイトのトップページの中身は殆どカラの状態になっているのです。 メタタグの 
<span class="red"><meta name="keywords" content=""></span>
<span class="red"><meta name="description" content=""></span>
の中身にキーワードや説明を入れてみたりすれば少しはマシになりますが、 それでも検索エンジンにキャッシュされる要素は非常に少ないのが事実です。

フレームセットを使わないサイトを心がける

以上の理由から、出来るだけフレームセットを使用しないサイトを作るのが望ましいと思われます。 ただし、フレームセットを使用していないからと言って、それだけでアクセスが上がる訳ではありません。 フレームセットを使用していてもアクセスの多いサイトは沢山あります。 それはサイトの内容、記事の面白さ・重要さ、サイト管理人の人柄など、人が沢山来るサイトの要因は様々です。 同じ内容でサイトを作るなら、フレームセットを使ったサイトよりも、フレームセットを使用していないサイトの方がアクセスが上がる と言う事です。 何れにせよ、サイトを観覧しに来るのは人間ですので、検索エンジンの事ばかりに頭を囚われていると内容のおぼつか無いつまらなサイトになってしまいます。 どんな時代であれ最終的に向こう側には人間がいると言う事を常に意識し、尚且つ、検索エンジンやそれに纏わるツールを有効利用してアクセスアップを図りつつ、より面白いサイトを作ってください。 ]]> htmlファイル整理｜ディレクトリ毎のファイル整理 tag:www.seo-maniax.com,2008://1.12 2008-03-08T23:50:00Z 2008-03-08T23:57:03Z ホームページを作るときは必ずカテゴリ別にフォルダを作り、ファイルを整理して保存しましょう。自分の為だけではなく、SEO対策としても、ファイルの整理は重要になります。 ファイルの散在である。 特にホームページの作成アプリケーション（ソフト）等で作っている場合、作り手がファイルの格納場所（保存場所）を意識していないと自動で保存されてしまうので、ファイルが散在する事になってしまう。 Web上ではちゃんと画面が表示されるので全く問題無いと思いがちだが、実はそうではない。 デザインの変更や記事の書き直しなどの作業をする場合、作成した本人が書き直したいファイルがどこにあるか分からなくなってしまうと言う状態になりがちである。 そして何よりSEO的に見ても非常によろしくない。 SEOの件については、追々記載するが、ファイルの散在は良くないと言う事だけは頭に置いて欲しい。 と言うわけで、今回はファイルの整理と、URLの構造についてのお話。 ]]> 通常ホームページを観覧するとき、何気なく見ていると思いますが、ブラウザのURLバーにURLが記されているのはご存知ですよね？ ここのサイトで言うなら、http://www.seo-maniax.com/←こういうやつ。 ページを開く毎に、http://www.seo-maniax.com/の後ろに文字が追加されていくのが分かると思います。 実はこれ、ファイルを格納している場所を指しているのです。 専門用語ではディレクトリと言います。 UNIX系のOSで使用する言葉なのですが、Windowsで言い換えればフォルダの事です。 では、簡単にこのディレクトリの事をお話しましょう。

ディレクトリの構造

ディレクトリとは、前記した通り、Windowsで言うフォルダ階層の事です。 Windowsユーザーが多いと思いますので、ここではフォルダとして説明します。 url.jpg このサイトで言えば、↑画像の様なURL（http://www.seo-maniax.com/beginner/lesson-01/）が有ったとします。 これは、www.seo-maniax.comと言うフォルダの中に、beginnerと言うフォルダがあり、 その中にlesson-01と言うフォルダがある事になります。