昔ながらのWebページをモバイルフレンドリーに

数年前、Googleは「モバイルフレンドリーではないWebサイトの検索順位を下げる」ことを発表、以来、私のWebサイトは全盛期の10分の1程度のアクセス件数にまで激減してしまいました。

「モバイルフレンドリー」とは、『スマホやタブレットなどの解像度が低いモバイル端末でも閲覧しやすい』とGoogleが判断したWebサイトのことです。

私のWebサイトは、2002年に開設して以来、「秘伝のたれ」のように注ぎ足しながら、ゆっくりとコンテンツを増やしてきました。

現在、HTMLだけでも200を超え、総コンテンツ（ファイル数）は1,000以上もあります。

開設当時、HTMLやCSSの知識もほとんどなく、HTMLのタグ本を見ながらテキストエディタでWebページを生成していました。

そのため、Webデザインは個々のHTMLファイルに直接埋め込んであり、モバイルフレンドリー対応は完全にあきらめていました。

しかし、以下のブログ記事をみて、私のWebサイトもモバイルフレンドリーに挑戦してみました。

わかったブログ - 一番簡単な、Googleモバイルフレンドリー対応の方法

http://www.wakatta-blog.com/mobile-friendly-easy.html

まず、すべてのコンテンツをWebサイトからダウンロードし、HTMLファイルのみをコピー。

xcopy "ikachi.org\*.htm*" "temp\" /d /s /e /y

pause

次に、秀丸エディタのgrep機能で「WIDTH="1000px"」の記述を「WIDTH="100%"」に一斉置換。

（私のWebサイトは、横幅がすべて1000pxで定義されていました）

さらに、HEADタグの最後に、上記のブログに掲載されているビューポイントとcssの切り替え用のタグを設置し、また、同じく上記のブログに掲載されている手順でモバイル用のCSSファイルを用意。

ビューポイントとcssの切り替え用のタグも、秀丸の一斉置換を利用しました。

（もともと、GoogleアフェリエイトのタグがほとんとのHTMLに埋め込んであったため、以下の文字列で検索、置換しました）

検索：

</script>

</head>

置換：

</script>

<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

<link media="only screen and (max-device-width:480px)" href="style_mobile.css" type="text/css" rel="stylesheet"/>

</head>

これで、すっかり諦めていたモバイルフレンドリー化を、私のWebサイトでも実行することができました。