こんにちは。
相も変わらずパグ娘の可愛らしさに悶絶する毎日を送っている木村操です。
本日、雷に打たれたが如く気づいたのですが、我が最愛のパグ娘はパグなので、犬の中でも「トイ・グループ」に属します。トイ・プードルやパピヨン等の愛玩犬が属する分野です。
さらにパグは、一説によると約2,000年前から筋金入りの愛玩犬であるとのこと。
「可愛い」は「正義」どころの話ではありません。
「可愛い」が「お仕事」なんです。
……何ということでしょうか。
わたくしはこれまで、仕事に関してはかなり真摯に且つ真面目に接していたつもりでした（他に取り得もないので）。しかし「可愛い」がお仕事のパグ娘は、365日、24時間、常に本気モードでお仕事体勢です。
確かに、仰向けでお腹を出して白目でいびきをかいて眠っている姿は、ぶさいく可愛いです。
バキュームカーのごとき勢いでご飯を食べている姿は、はしたなく可愛いです。
旦那の靴下や下着（脱ぎたて）をくわえて得意げに走り回っていたり、たたんだ洗濯物をぐちゃぐちゃにしてどや顔で仁王立ちしている姿は、憎たら可愛いです！
全てが可愛い！ 常にお仕事体勢！
わたくしの仕事に対する姿勢など、パグ娘の前では風の前の塵に同じ！
何という驚愕の事実！
早速わたくしは帰宅した旦那に、この世紀の大発見を共有してもらおうと5分ばかり熱弁を振るったところ、
（ ´_ゝ`）ﾌｰﾝ
まさかの↑のリアクション。
※あまりにも的確なAAなので使用してみました。
旦那が感情の起伏に乏しいことは重々承知しておりました。
超無口なことも理解しています。
帰宅するなり大興奮状態の嫁が頭の悪そうな内容の熱弁をふるったら、リアクションに困る事も分かっているつもりです。
しかしパグ娘に関してだけは、テンションを偽ってでも付き合って欲しい。
そう思うのは、わたくしの我がままでしょうか。
超笑顔＋無言という怖い状態でパグ娘と本気でたわむれる旦那を横目に見ながら、今日もひとりで空回りして寂しいわたくしなのでした……。
でも、「可愛い」は「お仕事」説については譲りません。ふぬー！（鼻息）
webclap
このページのTOPへ
画像置換とは、テキストをCSSで非表示にして、代わりに背景画像を表示するTipsです（具体的な方法は後述します）。
「どうしてわざわざそんなことをするの？」とお思いの方もいらっしゃるかと思います。
「デザインの意味で画像を使うんだったら、普通に画像で置けばいいじゃない」と思われた方、まさにその通りです。
しかしそこに、SEO対策（Search Engine Optimization = 検索エンジン最適化）がからんでくると話が変わってきます。
画像置換とSEO対策は、切っても切れない関係なのです。
かなり長い記事になりますが、よろしければお付き合いください。
画像置換とSEO
SEO対策には様々な方法があります。
その中で重要な要素の一つが、「正しいhtmlで作られたwebサイトであること」です。
なぜならば、webサイトの情報を収集するクローラーは、Lynxというテキストブラウザが認識する状態をベースにしているからです。
現時点でクローラーは、webサイトにどんなにきれいな画像（またはflash）があったとしても、テキストしか認識しません。画像は「存在しないもの」として扱われます。
これではSEO対策の意味がありませんし、重要なキーワードが画像にしか含まれていなかったりした日には目も当てられません。
ちなみに、画像にaltをきっちり入れたとしても、現在のところYahoo!のクローラーはimgのalt属性を読んでくれないのです（googleは読みます）。
日本のSEO対策はYahoo!とgoogleの2大検索エンジンでの上位表示達成が目標です。Yahoo!がaltを読まないなら、相応の対策が必要です。
かといって、SEOのために文字要素を全てテキストにしてしまうと、今度は閲覧しているユーザに「スカスカ」「寂しい」「手抜き」と思われかねません。商用サイトでは商品を魅力的に伝えるのが困難になるでしょう。
画像置換は、「人の目」と「クローラーの目」、ふたつの目を両立させるためにweb業界の方が知恵を絞って生み出した技術なのです。
さて、そんな（コーダー以外にはメリットだらけな）画像置換ですが、一時期、「画像置換はGoogleに検索エンジンスパム扱いされるらしい」との噂が広まり、SEO業界を震撼させました。
画像置換は検索エンジンスパムなのか？
結論から言えば、「半分正しくて、半分間違い」です。
画像置換スパム疑惑 簡単な流れ
そのそもgoogleやYahoo!は、数年前から「隠しテキスト・隠しリンク」をスパムとみなして、徹底的にインデックスから排除してきました。
ここでいう「隠しテキスト・隠しリンク」は、テキストやリンクを背景色と同じ色にして故意に隠して、その中にキーワードを入れ込む方法です。インターネット黎明期はSEOでも有効な方法とされていましたが、今では即アウトのスパム行為です。
これが頭にあった多くのweb制作関係者は、「ひょっとしたら画像置換もそのうち隠しテキスト・隠しリンク扱いになるのでは…？」と、ひそかに不安に思っていました。
不安の色が濃くなったのは、2008年10月、Google公式ブログ日本版「googleの検索は隠しテキストが嫌い」に掲載されていた具体例です。
画像には「宇宙旅行」としか文字が入っていないのに、alt属性にalt="宇宙旅行 月旅行 無重力体験 格安 激安 特価 安価"などと大量のワードを入れ込んでいると、不正行為とみなすとされています。
不安が危機感に変わったのは、忘れもしない2009年6月、Googleのウェブマスターツールヘルプの「隠しテキストと隠しリンク」です。
そこには、下記の行為がスパムに当たるとはっきり明記されていました。
- 白の背景で白のテキストを使用する
- テキストを画像の背後に隠す
- CSS を使用してテキストを隠す
- フォント サイズを 0 に設定する
画像置換は「テキストを画像の背後に隠す」「CSS を使用してテキストを隠す」の2項目に思いっきり抵触しています。
この当時、相当数のSEO業者はお客様のサイトに修正を加えました。一介のSEO業者がgoogle様のお怒りに触れたら、ただでは済みません。触らぬ神にたたりなしです。わたくしが所属する会社も大慌てで修正しました。
この騒ぎが落ち着いたころ、「画像置換多用サイトなのに、googleのインデックスから削除されていないサイトがたくさんある」というケースが浮上しました。
噂を検証して弊社が達した仮説は、画像置換についても「googleの検索は隠しテキストが嫌い」の具体例が基準になるのではないだろうか？でした。
つまり、「ソース上の記述＝（≒）WEBページ上に表示される記述」ならば、画像置換していてもスパムとはみなされない、ということです。
そして2009年12月、Googleのウェブマスター向け公式ブログ「隠しテキストは Google のウェブマスター向けガイドライン違反です」が公表されました。
ページの内容を要約すると、「ソース上の記述＝（≒）WEBページ上に表示される記述」なら問題ない、です。
1年間、SEO業者を不安のずんどこに陥れた画像置換SEOスパム疑惑は、これで終焉しました。
画像置換が悪いわけではなく、使い方の問題なんですね。
実際に、当のgoogle様もトップページからばんばん画像置換を使用しています（スタイルシートをオフにするとよく分かります）。
こういった事情で、画像置換はスパムか？の答えは、「半分正しくて、半分誤り」となります。
正しく使えばweb屋とSEO業者の味方、悪意を持って使うとgoogle様の鉄槌が下り会社の首を絞める（少なくとも顧客の信用を失う）スパム行為。
う～ん、面白いものですね。
画像置換のやり方
画像置換の方法はたくさんありますが、私は下記の方法で画像置換を行っています。
この方法の欠点は、cssオン・画像オフの状態は何も見えなくなってしまうということです。
それでもこの方法を採用しているのは、「SEOに有利だから」の1点に尽きます。
言い訳になりますが、わたくしが所属する会社はSEOがメインで、ビジネスですのでお金の問題も付きまといます。
cssオフ・画像オフに対応するためにhtmlに無駄な<span>を入れたり、透明gifにaltを入れたりするのは本末転倒ですし、クライアントもcssオン・画像オフという0.01％以下の環境のユーザに対応するための予算を割いてくださいません。
「IE6～8およびfirefox（cssオン・画像オン）で正常に表示されている」のがOKラインです。
申し訳ありませんが、以上の点をご了承ください。
※IEでは印刷時に「背景を印刷する」にチェックを入れないと、これまた印刷されません（画像置換以外の背景画像も同様ですが）。
通常の画像置換
<!-- (X)HTML -->
<h2 id="sample">ここを画像置換</h2>
/* CSS */
h2#sample {
width:500px; /* 要素の幅 */
height:0px; /* cssオフ状態でテキストが表示される */
padding-top:20px; /* 置換する画像の高さを確保 */
overflow:hidden; /* あふれたテキストを不可視に */
background:url(img/sample/jpg) no-repeat; /* 置換する背景画像の指定 */
}
<h2>にリンクを貼る場合
<!-- (X)HTML -->
<h2 id="sample"><a href="#">ここを画像置換＆リンク</a></h2>
/* CSS */
h2#sample a {
width:500px; /* 要素の幅 */
height:0px; /* cssオフ状態でテキストが表示される */
padding-top:20px; /* 置換する画像の高さを確保 */
display:block; /* <a>はインライン要素なのでブロック要素に */
overflow:hidden; /* あふれたテキストを不可視に */
background:url(img/sample/jpg) no-repeat; /* 置換する背景画像の指定 */
}
<h2>にリンクを貼りロールオーバーにする場合
※通常時とロールオーバー時の画像が縦にくっついた画像を使用します。これは、オンマウス時の画像のちらつきを防ぐためです（画像のプリロード）。
<!-- (X)HTML -->
<h2 id="sample"><a href="#">ここを画像置換＆リンク</a></h2>
/* CSS */
h2#sample a {
width:500px; /* 要素の幅 */
height:0px; /* cssオフ状態でテキストが表示される */
padding-top:20px; /* 置換する画像の高さを確保 */
display:block; /* <a>はインライン要素なのでブロック要素に */
overflow:hidden; /* あふれたテキストを不可視に */
background-image:url(img/sample/jpg); /* hoverでpositionを使うので分解 */
background-repeat:no-repeat; /* hoverでpositionを使うので分解 */
}
h2#sample a:hover {
background-position:0px -20px; /* 通常時画像の高さをネガティブマージンに指定 */
}
cssが凄い事になっていますが、htmlはすっきりさわやかです。
hoverだけでなく、activeやvisitedにも指定できます。この場合は、縦に3～4つ連なった画像が必要になります。
たまにですが、お客様に「グローバルメニューの現在いるページのメニューアイコンはhoverの時の物にしたい」というご要望を受ける事があります。その場合は、下記のように記述します。
<!-- (X)HTML -->
<h2 id="sample"><a href="#" class="selected">ここを画像置換＆リンク</a></h2>
/* CSS */
h2#sample a {
width:500px;
height:0px;
padding-top:20px;
display:block;
overflow:hidden;
background-image:url(img/sample/jpg);
background-repeat:no-repeat;
}
h2#sample a:hover {
background-position:0px -20px;
}
h2#sample a.selected {
background-position:0px -20px;
}
ちなみにこの方法は、アップルのwebサイトで使用されているものの真似っ子です。
アップル：http://www.apple.com/jp/
私のようなへたれweb屋は、長いものに巻かれておくのが一番なんです。はい。
まとめ ～私とサイト制作と画像置換～
私がお仕事でwebサイトを制作する際に画像置換を用いるのは、グローバルナビゲーション・トップページのキービジュアル（主にキーワード出現頻度調整のため）・各ページのタイトル画像（ほとんどが<h2>になるので）くらいです。
SEOを気にしなくても良いのであれば、グローバルナビゲーションにしか使用しないかもしれません。
グローバルナビゲーションに画像置換を使用するのは、メニュー項目の増減時の管理を簡単にするためです。画像置換ならば作成する画像は一枚で済みますし、htmlの方も一発置換でOKです。
実際に「ワタクシゴト」はSEOなんて気にしなくていいので、ロゴとグローバルナビゲーションしか置換してません。それ以前に、ロゴに超重要な<h1>を使うという大雑把にもほどがある組み方をしています。
本当は<h3>や<h4>等にも画像置換を使用した方が見栄えも良いですし、SEOの面でもメリットがあると思います。しかし、制作&更新の作業時間とファイル管理を考えると、<h2>くらいまでが適当です。
また現在は、本体サイトと同デザインのビジネスブログを同ドメイン内に実装して、お客様側で最新情報を更新することも多くなっています。お客様側の更新経費削減の理由もありますが、ブログはRSSがついているのでSEOでも超重要なんです。
ビジネスブログの場合、記事のタイトルはだいたい<h3>になります。更新の便と、サイト内のデザイン統一の意味でも、<h3>以降の見出し要素には背景画像を指定して、テキスト要素にした方が無難です。
というか、100ページ超えの企業サイトや1,000ページ超えのECサイトの見出し要素を全て画像置換していたら凄いことになります。
いちいちcssを書くのが面倒くさいわけではありませんよ。ええ、決して。
早くクローラーが進化してaltを完全な意味で読み込んでくれるようになると良いですね。
う～ん、いつになく真面目なことを長々と書いてしまいました…。
webclap
このページのTOPへ
先日の日記でMH3に触れたところ、Webclapなどから複数の反響をいただきました。
不肖木村操、こんな僻地にもモンハン仲間がいるんだ！と思い、ものすごく興奮しております。
興奮冷めやらぬうちに書いていたら超長文になってしまいましたが、ご質問についてお答えします。
主な出没時間・場所
平日は21：00～24：00頃、土日祝は7：00～12：00か14：00～19：00か21：00～24：00くらいにオンすることが多いです（2つ以上の時間帯にいることも）。
フレさんがオンしていない時は、自由人・シンシア4・街40でうろちょろしています。街門の募集文は常に「狩りもチャットも」。上手なハンターさんからコツを聞き出すために、虎視眈々と待ち構えています。
使用武器
大変申し訳ありませんが、ランスはわたくしの嫁です。
そして片手剣はP2Gから共に闘ってきたかけがえのない戦友です。
この主張だけは譲れません。
P2Gの訓練所でピアス・ミラボのため鬼教官にしごかれたので他の武器も一通り扱えますが、今のところ「使える」と人様に言い切れるのはこの二つだけです。
村や街ソロでは他の武器も練習がてら使っています。しかしとてもじゃないですがフレさんにお披露目できる代物ではありません。レベル的にはランスを10とすると、片手剣9、大剣5、ハンマー・太刀3、スラッシュアックス2くらいでしょうか。
ボウガンに至っては、いつになったら手に取るのか…。カムバック、弓！
ランス・片手剣の難点は、どちらもスーパーアーマーがつく攻撃が少ないので、みなさんに迷惑をかけてしまうこと。
わたくしをこかしてしまった方に謝られてしまうと、「こちらこそスパアマないくせに、邪魔な位置取りをしてしまってすみませんすみませんすみません！」と必死に訴えたくなります。戦闘中のチャットが苦手なので、きちんと謝罪できないのが残念でなりません。
二番目に使用頻度が高い定型文が「お気になさらないでください～！」である辺から、わたくしのプレイヤースキルがばれてしまうと思います（トップは「ありがとうございます！」）。
わたくしの目標は、「みなさんの邪魔にならず、ひっそりと、しかしきっちりと（睡眠・麻痺等）仕事をするランス・片手剣」です。
好きなモンスター
クルペッコです。
生態ムービーでの可愛らしさは勿論のこと、戦闘中のぼえぼえ鳴き、うきうき回復、しっぽくるりんばっさー、バッチコーイ！ おげおげつんつん……ああ、何もかもが愛らしい！ さらに自分でジョーを呼んだくせに食べられてしまったりするドジっ子っぷりは、もうもうもう…！ ペッコたんったら、可愛いんだから…！
ちなみに、MH3におけるわたくしの野望は、「全武器・装備品コンプ」でも「HRカンスト」でもなく、「豪邸をペッコランプで埋め尽くすこと」です（大真面目）。
嫌いなモンスター
ウラガンギン
でかい、堅い、顔怖い。
嫌いなモンスターの条件を全て兼ね備えたむかつくヤロウです。
特にアグナ戦でゴロゴロちょろちょろされた日には「貴様、表へ出ろ！」と喧嘩を売りたくなるくらい鬱陶しいです。いえ、本当に表に出られても1対1では勝てないのですが（へたれ）。
「背後からガンギンゴロゴロ→吹っ飛ばされ→起き上がりにアグナブレス→昇天」の最悪コンボで何度乙ったことか…。きーー！！
ガンギンの討伐や捕獲クエでは、高速設置+落とし穴のコンボではめ殺しにして溜飲を下げます。
イビルジョー
嫌いとか苦手うんぬんのまえに、とにかく怖い。絶大なる恐怖。キングオブホラー。
上位になりたての頃（装備は下位）、軽いひと撫でで殺されたり、あのアゴで食い殺されたり（ジョーの口内がモニタに大写しという出血大サービス付き）……特大級トラウマです。ええ、もう本当に。
さらに現れた瞬間、何があろうとも音楽がジョー専用BGMに上書きされるところも怖いです。噂によるとあのBGMはジョーズのテーマのような効果を狙って、不協和音が多用されているとか。わたくしがジョーズを忌避していると知っての狼藉か、カプコン！ 理由を知ったらさらに怖くなってしまいました。どうしてくれようか！（逆ギレ）
前作のティガレックスも相当恐れておりましたが（オープニングの刷り込み+☆1の例のクエの相乗攻撃）、ジョーに比べたらも赤子も同然です。
現在は、超へっぴり腰ながら何とかフレさんのクエにご一緒しています。しかしおそらく武器がMH世界のガード王ことランスでなければ、今でも逃げ回っていたに違いありません。ありがとう、マイハニー…。
ご質問の答えは以上です。
う～ん、モンハンって楽しいですね！
モンハンは作業ゲーだとかプレイヤースキル依存だから嫌だとか言われることもあるようですが、わたくしは「だが、それがいい」と思っています。
というよりも、わたくしはもともとRPGの作業部分が大好きですし、プレイヤースキル依存という面では格ゲー大好きなので問題がありません。むしろ、ふたつの要素を一度に味わえるのでラッキー！と思っているくらいです。
あとは気の合うフレさんとわいわいチャットをしてる時も楽しいです。
モンハンの話ももちろんしますが、リアル女性であるフレさんには「美味しい！簡単！グラタンの作り方」などを伝授していただいたり（作ってみたら最高でした）、リアル男性のフレさん（既婚）には「夫という生き物」についてご教授いただいたりと、モンハンをしていなかったら知りえなかったことをたくさん教えていただいています。
わたくしは、これからも地味にモンハンを続けていくつもりです。
スパイラルボア天とピッケル担いで火山に行っている女がいたら、多分わたくしです。見かけたらお気軽に「よう、へたれ」とでもお声をかけて下さい。楽しく狩りましょう！
それにしてもガード性能+7・スロット2のお守りって本当に実在するのでしょうか？ 早く下山したいです…。
webclap
このページのTOPへ
小学校などで、先生を「お母さん」と呼んでしまう例は、多々あります。
ゆえに、社長を旦那の名前で呼んでしまった人も、結構多いのではないでしょうか。
…………。
誰か「多いよね～」と賛同してください！
「よくあるよね～」と慰めてください！
たまたま現場にいた営業のAは、「Hさん、ね～。へ～、尻に敷いてるっぽいのにね～」とにやにや。
社長秘書兼事務のTさんは、「らぶらぶですね～」と生暖かく微笑。
技術のSさんは、「あっはっはっは。早退する？」と超笑顔。
寛容な社長だけは聞き流してくれたので心から感謝していたら、社内メール（全員にCC）の署名をわざわざ「社長ことHさん」に変える手間をかけてまで止めを刺す始末。
何ゆえこんな時だけ抜群のチームワークを見せるのですか、みなさん……。
本当に、どうして社長を「Hさん」と呼んでしまったのか。
しかも我が社の社長は女性なのに、いったいどうしてッ！
明日になったら、みんながきれいさっぱり忘れてくれますように！
…でも、わが社は社員の笑える失敗は語り継ぐという、そんなドS様な社風だったりします（泣）
以下はwebclapのお返事です
＞ゼノビアの残党狩りは…の方
なるほど！ 確かにそうですね！ 自分の推測の底の浅さに恥じ入る思いです。
そしてウーサー寝返り説には目から鱗がぼろぼろ落ちました。
新たな妄想の種を与えてくださってありがとうございます！（笑）
＞オリジナル…の方
あんな代物を覚えていてくださって、有難いやら恥ずかしいやらで変な汗が出ました。
現在は削除しておりますが、いずれ復活させたいなと思っています。
その際にはサイト上でお知らせいたしますので、よろしければお付き合いください～。
webclap
このページのTOPへ
