今回の記事の内容です
ここ数日いろいろな人がスマホ対応してないサイトが４月２１日以降に下がる可能性を秘めてるよという告知をしていますね。
３月２日時点の海外SEO情報ブログではさらなるQ&A形式がまとまっていましたので、詳細はそちらでご確認ください。
→ 詳細はこちらから（別窓で開きます）
簡単に言うと、今後スマホサイトに対応してないサイト（PCのみのサイト）に関して「モバイル検索の表示順位に影響があるよ」というお話です。
うちのブログのお問合せのなかで、
標準のSIRIUSのテンプレートはレスポンシブルではなさそうだけど、大丈夫ですか？
というものを頂いたのですが、
これは大丈夫です。要するにスマートフォン用のサイトに対応していればOKということです。
例えば、SIRIUSの教科書用のサンプルサイトですが普通にスマートフォンから見たい場合は「スマホ対応」となっていますね。
これはSIRIUSのスマホサイトへの振り分けを.htaccessで行っているだけで特に特別なことをしているわけではありません。
一応どういう設定をしておけばいいかを振り返っておきましょう。
SIRIUSのスマホ生成のやり方
基本的なやり方は次のとおりです。
基本これでOKなので難しくないですよね。
ただし、一つ気をつけて欲しいのが、ドメインの下にディレクトリーを切って複数のサイトを入れている場合、そのサイトもすべてスマホ化しておかないとトップドメインに「スマホ対応」と出てこない可能性があります。
（私の作ったサイトの幾つかはそうなってました）
気になるなら稼ぎ頭だけでもチェックしておこう
気になるなら、モバイルフレンドリーツールをつかって調べてみましょう。
→ モバイルフレンドリーツールはこちらをクリック（別窓で開きます）
URLを入れて「分析」ボタンを押すだけです。
細かい中身を見たいならこちら
基本上で合格をしていればOKと思っていいですけど、更に突っ込んで修正するならディベロッパーツールを使っていきましょう。
→ googleデベロッパーツール（別窓で開く）
もともとはどうやったらサイトを高速表示させるかの細かい提案をもらえるツールですが、ここにモバイル版（スマホサイト）とPCサイトの修正案が出てきます。
もともとSIRIUSユーザーの多くはHTMLなどに詳しくないから使っている人が多いと思うのでここまで必要かというと、いらないような気もしますが、勉強したい人は参考にしておくといいと思いますよ。
１つだけ、SIRIUSのスマホテンプレートを修正しておこう
別にやらなくてもいいといえばいいのですが、モバイルフレンドリーなサイト作りという観点からSIRIUSのスマホテンプレートの一部修正しておいたほうが良い項目があります。
スマホテンプレートHTMLの<head>の中に、
<meta id="viewport" name="viewport" content="320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
という項目がありますが、
こちらの項目の320をdevice-widthに訂正しておくといいと思います。
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
横幅３２０はかなり前のスマートフォンの画面幅なのでこちらのほうがモバイルフレンドリーなのは言うまでもありません。たいていのスマホサイトは現在はこちらのdevice-widthが使われています。
大元のテンプレートをいじっておくとその後の変更はしなくてすみます。
たいていの人はCドライブ直下で
C:\ACES WEB\SIRIUS\iphoneのようになっているはずです。
（program filesには入れないようになってますね）
CドライブのACES WEBというフォルダーの中にSIRIUSというフォルダーがあり、そこの中にテンプレートなどが内蔵されいてます。そこのiPhoneというフォルダーの中にスマホ用テンプレートが収められています。
実はスマホ用のテンプレートは中に６つのhtmlファイルが入っており、それぞれの<head>に下のメタタグが入っています。
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
これを先ほどと同様に全て修正して保存しておきましょう＾＾
６ファイル×１０色＝６０ファイルの修正です（笑）
＊テンプレートをいじる際はバックアップをとって自己責任で！
めんどくさいならgrep置換だ！
さて、ここからはチョイとばかし腕の見せどころなんですが、
GREP置換という技がテキストエディターにはあります。
Windowsの標準のメモ帳ではできないのでフリーのものを入れましょう。
シェアウエアの秀丸エディターをインストールしてみましょう。
秀丸エディターのGrep検索（置換）の手順
- 検索（S）をクリック
- Grepして置き換え（@）を選択
置き換え前文字列と置き換え後の文字列の指定とフォルダー選定
- 検索する文字列（Ｓ）に<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />をコピペ
- 置換する文字列（Ｇ）に<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />に上をコピー後修正
- 検索するフォルダー（Ｄ）にスマホテンプレートの指定
- 置換ボタンをクリック
あ、一つ重要なことを上の図に入れるの忘れました。
検索するファイル（Ｎ）は「＊．＊」となっていますが「＊．ｈｔｍｌ」に修正してください。じゃないとめんどくさいことになります。
バックアップなどの確認にチェック
結果こうなればOK
結果以下のようになっていればOKです。
あっという間に完成しましたね。
ちなみにこのやり方でやればすでに作成してあるサイトのテンプレートを一気に直すことも可能です。
C:\ACES WEB\SIRIUS\data
以下のところにすでに作っているファイルがあるはずなので同じくGREP置換してしまえば簡単に修正できるでしょう。私は６００以上のファイルサクッと修正しておきました。
ただし、テンプレートをいじる場合、「一文字のエラーが命取り」になることがあるので慎重に【自己責任の上】ご利用ください。
ちゃんと行えば手作業でちまちま直すよりもらくだと思いますよ。
こんにちははじめまして長沢真帆といいます。
シリウスについて丁寧に解説が書いてあってわかりやすかったです。
長沢さん
はじめまして、ゆーすけともうします。
ようこそいらっしゃいました。
お褒めいただきありがとうございます。
これからもシリウスの情報を出し惜しみ無く
書いていきますね。
こんにちは、yuiyuiと申します。
私はまだサイト作成もままならないのに
スマホ対応でないとまずいとか最近騒がれててあせっています。
が、SIRIUSでは簡単にスマホ対応にできるんですね！
貴重な情報をありがとうございます。
応援ポチさせていただきました！
yuiyuiさん
はじめまして＾＾
ゆーすけともうします。ようこそ当ブログへ
最近ではいろいろなソフトがスマホやタブレット
対応のテンプレになっているのであまり多くを
気にしなくてもいいかもしれませんね。
私は古く作ったサイトでスマホいらんだろ？
とおもっていたやつの修正をかなりしてます。
応援ありがとうございました。
こちらも応援しておきます。