大阪ホームページ制作MKK WORKS

ものすごく簡単にロールオーバー風のリンクボタンが作れます。

サンプルページ

CSSのソースは下記だけです。

a:hover img{
opacity: 0.5;
filter: alpha(opacity=50);
}

要するにaタグ内のimgに対し、hover時に50%半透明化させて表示するだけの簡単なものですが
ソースも数行で済む為、意外と使えるテクニックです。

filterは対応ブラウザが少ないのでopacityでfirefoxなどをカバーしています。
数字を変えれば透明度を変更することが可能なので最適な数字で使用して下さい。

サンプルソース
a:hover img { opacity: 0.5; filter: alpha(opacity=50); }

簡単でしかも割とカッコイイとは言え、あまり推奨される方法ではないので
サンプルページや、ちょっとした事例を紹介するだけの
あまり細かく作りこまなくても支障の無いページに使うようにするのが無難だと思われます。

Webサイト制作者の方であればWebサイトをリニューアルしたことがあるかと思います。
そんなとき、心配になることの一つに、
ページを新しくしたことによって検索エンジンからの評価が変わってしまうのではないか！？
ということが思い浮かびますね。

ご存知の方は当然の知識として知っていますが、意外と知らない方も多いようですので・・・。

実は、変わりません。

厳密に言えば、リニューアル後のサイトが旧サイトより検索エンジンから見て魅力的であれば
評価は上昇しますし、魅力的でなければ評価は下がります。
ただ、リニューアルや引越しという行為に対して評価が下がることはありません。

続きは以下からどうぞ。

というのも、以前「あなたのサイトはwwwありですか？なしですか？」という記事を書いたことがあります。
その記事を検索してアクセスしてくる方が非常に多いのですが、「.htacces 301」や「リダイレクト 301」というキーワードが結構多いのです。
実際検索してみても特に上位表示されるわけではないのにアクセス数だけはそれなりにあるので
恐らく、.htaccesによる301リダイレクトの設定をご存知でない方が多いように見受けられます。

301リダイレクトとは？

HTTPステータス・コードの一つ。

HTTPステータス・コードとはサーバーがブラウザに伝える状態のことです。
なにやら難しそうですが、インターネットをしていて
403 Forbiddenや404 Not Foundや500 Internal Server Errorという画面を見たことがあると思います。
要するに、サーバーがブラウザに対して、今このWebページはこういう状態ですよと伝えるコードのことですね。

そのうちの一つが今回の「301」という状態です。
サーバーがブラウザに対して情報を伝えるという行為を「リダイレクト」と覚えておいて下さい。

301とはブラウザに対し、「恒久的なサイトの移転」を伝えます。
301リダイレクトを.htaccessなどに設定しておくと
検索エンジンがあなたのサイトにアクセスした際、「301が設定してある。ということは引っ越したんですね」
と判断します。そのときに引っ越した先に検索エンジンが持っていた評価やページランクも一緒に引っ越してくれるというわけです。

301リダイレクトで引越しをする際の記述は

.htaccessに「　redirect 301 /index.html http://引越し先URL/　」

と記述するだけで良いです。
index.htmlというファイルにアクセスがあった場合、引越し先のURLに移動する。とリダイレクトされます。

Webサイトの引っ越し方法としてもう一つ方法があります。
metaタグに

＜META HTTP-EQUIV="Refresh" CONTENT="5; URL=http://引越し先のURL/"＞

こういった記述をする方法です。

これでも引き継いでくれることもあるようですが基本的にはオススメしません。
googleは301リダイレクトでの引越しを推奨しています。

この方法で引越しをする際気をつけたいポイントは自動的にジャンプする時間を出来る限り短くする事です。
あまり長いようだと検索エンジンから見たときに「引越し・・・たの・・？どっち？」という判断しかねる状態に陥るようです。
なので、どうしてもこの方法でないといけない場合は長くても3秒程度に設定しておいて下さい。

尚、Javascriptでも自動的にジャンプさせる方法はありますが、検索エンジンはJavascriptを無視する為、全くオススメできない引越し方法です。
それどころかスパムサイト扱いされる可能性もあるのでご注意下さい。

記事の数が増えてきた為、最近はソーシャルブックマークからのアクセスより
検索エンジンからのアクセスのほうが多くなってきました。
これは本来の狙い通りのアクセス数の伸び方であり、当ブログも順調に成長しているのだと感じます。
今回は当ブログにおいて毎回出来る限りこの法則にしたがって書けば必ず効果のあるものとしている事を再確認の意味も込めて書き連ねていきます。

続きは以下からどうぞ。

タイトルは内容よりもよく考えてつける

どんな記事を書いたとしても読んでもらう以前に見てもらえなければ意味がありません。
多少は大風呂敷を広げたっていいんです。
例えば、あなたがSEO対策について非常に有益な情報を書いたとしましょう。
タイトルは「これで完璧SEO対策」というような曖昧なものより「誰でも確実に検索結果が上位になるSEO対策」ぐらい大きく書いても良いかと思います。

もう一度言いますが、読まれる以前に、見てもらえなければ全く意味がありません。
その後、その大風呂敷を広げたタイトルの記事を読む読まないはユーザーの判断に委ねられるのですから。

長々と書かない

長ければ長いほうが内容が良くなるわけではありません。
短くても、伝えたいことを箇条書きでも良いのでまとめていればきちんと伝わります。
要は「伝わるか伝わらないか」なのです。
字が多くなると文字だけの大きな塊が出来てしまい、パっと見、読みたくなくなります。
短く、わかりやすく、簡潔に。常に心がけたいものです。

どうしてもクリックしたくなるタイトルをつける

1番目の「内容よりもよく考えてつける」と似ていますがもう少しテクニック寄りの話になります。
例えば、書籍で社長のベンツはなぜ～とかさおだけやはなぜ～のように「なんだろう？」という気持ちをあおります。
これは、多少挑発的なタイトルでも同様の効果が得られます。
ただ単に仕事のコツを書くだけなのに「上場企業の上司が仕事のできない本当の理由」などとどうしてもクリックしたくなるような内容とマッチしているかしていないかスレスレのタイトルをつけることでも良いのです。

行間や文字サイズは余裕を持って

文字の塊が大きいとそれだけで読む気が減少します。
書籍ならすんなり読めても、PCの文字情報というのは多くが横書きで文字サイズが小さく、行間も狭いので読みづらいのです。
そこで、行間はちょっと取りすぎだろうか？というほど空けて下さい。そして文字サイズも大きなものを使って下さい。
段落も改行もちょっと過剰なぐらいでちょうど良いぐらいに思ってもいいでしょう。
とにかく文字の塊を少しでも分解して組み立てていくとPCでは読みやすくなります。

プロモーションは必ず行う

これも必須項目となります。記事の書き方とは趣旨が違いますがこれだけは必ず行って下さい。
どんなに有益な情報を書いても人の目に触れる場所に情報がなければアクセスアップは難しいです。
以前、「ページビューを増やすために行うたった5つの方法」で紹介した、最低限のプロモーションは行って下さい。
 

以上を大前提として記事を書くように心がければ必ずアクセス数は増えていきます。
しかし、毎回全力投球するとすぐにネタが切れてしまったりいつの間にか記事の質が低下していたりします。

本当に大切なことは継続して記事をUPし続けることです。
記事の数が増えれば検索にもひっかかりやすくなり、サイト内のリンクも量的な力を持ち始めます。
まずは難しく考えすぎず気楽に上記の5つを守りながら更新を続けてみて下さい。

ブログや、相互リンクページなどでよく見かける

フィードは以下をお使い下さい


や

相互リンクのリンクタグは以下をコピーしてお使い下さい
<a href="http://mkk-works.com/" target="_blank">大阪のホームページ制作会社　MKK WORKS</a>

ですが、使う側からするといちいちドラッグしてコピーするのがめんどくさかったりします。

ソースが長かったりなんかするとそれも余計に面倒です。
トリプルクリックすれば段落ごと範囲を選択できるのですが特に段落になっていない場合、全文選択されたりしてイラっとします。

Webサイト制作者ならそんな面倒なサンプルソースのコピーをユーザビリティに配慮し、少しでも楽にしてあげたいものです。

実は上記のサンプルテキストボックスはテキストをクリックするとワンクリックで全てが選択されるようになっています。
あとは右クリックしてコピーするだけですね。
ユーザーからすればそんな数秒、数回の簡単な操作も簡略化されていればストレスが減るわけです。

こちらがサンプルソースなので用途にあわせて使って下さい。

<input type="text" onfocus="this.select()" value="URL" size="55" />

<textarea cols="50" rows="3" onfocus="this.select()"><a href="URL"></a></textarea>


Webサイトの世界は日ごとシビアになってきており、ほんの少しのストレスがウィンドウを閉じる要因になってしまうことがあります。
企画や、デザインに力を注ぐのも当然ですが、こういった小さなことも積み重ねていきたいものです。

Webサイトを制作する際、SEO対策に注意し、なるべくWeb標準仕様の文法でコーディングし
CSSでレイアウトを行い、見出しや構造に気をつけている方がかなり多いのではないでしょうか。

当然必要な要素なのでこれからも意識し、サイトを構築していく必要があると思われます。

そこで一つ確認ですが、あなたの担当、運営しているサイトはwwwありでしょうか？なしでしょうか？

http://www.yahoo.co.jp/
http://yahoo.co.jp/
別ウィンドウで開きます

もちろんどちらでもアクセス可能です。
そして当然どちらも同じサイトにリンクしています。
ですが、バックリンクの数やページランクには差が出ていることにお気づきでしょうか？？
wwwありはページランク8　wwwなしはページランク6となってしまっています。

これは一体どういうことでしょう。

実は、検索エンジンがクロールする際、wwwありとなしのURLで「別のページ」として認識してしまうのです。
ですので、wwwありとなしでバックリンクやその他もろもろが分散してしまっています。
試しにあなたのサイトのバックリンクを調べてみて下さい。
きっちり対策をとれている方なら統一できているはずですが、意識していない方のサイトは恐らく分散してしまっているかと思います。

では、この問題はどうやって回避するのか？

これから作る方はwwwありなしどちらか一方のURLに決めて下さい。
もう作ってしまっている方はこれから徹底してどちらかに絞ってください。

具体的には
・サイト内のリンクを統一する
・相互リンクや名刺、RSSなど外部で使用するURLは全て統一

これでほぼ統一を図ることができます。

.htaccessが使用できるサーバーであれば
徹底的に統一することが可能です。

参考リンク：http://www.htaccesseditor.com/

wwwなしに統一したい場合

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.sample\.com)(:80)? [NC]
RewriteRule ^(.*) http://sample.com/$1 [R=301,L]

wwwありに統一したい場合

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(sample\.com)(:80)? [NC]
RewriteRule ^(.*) http://www.sample.com/$1 [R=301,L]

と.htaccessファイルにペーストして下さい。
もちろんURLはあなたのサイトに書き換えて使って下さい。

.htaccessが使用可能かどうかは契約しているサーバーにお問い合わせ下さい。

.htaccessでwwwありなしを設定するとURLをアドレスバーに直接入力した場合でも
サーバーのリダイレクトによりどちらか一方にしかアクセスできなくなります。
これで検索エンジンがあなたのサイトにアクセスしてきた場合もどちらか一方に飛ばされ徐々に評価も統一されていきます。

SEO対策にはバックリンクの質と量でほぼ決まってしまう風潮になってきていますが
今一度、こういった基礎的なテクニックも確認していきたいですね。

ぜひ参考にしてみて下さい。