情報商材 レビュー

 

記事タイトルのとおりですが、当ブログもいまさらですがレスポンシブ対応にしてみました。

 

いや～大変でしたYo（正味3日間くらいかかったっす・・・。）

 

目次

 

 

１．ことの発端

 

当ブログは株式会社ミスリルさんのアンリミテッドテンプレート（2009年版）を使っていますが、その後アンリミテッドアフィリエイトの複数回に渡るバージョンアップでワードプレス対応→レスポンシブ対応と進化を遂げて、アンリミテンプレートは今やこんなにカッコイイデザインになっちゃっています。

 

アンリミテッドテンプレートNEOのサンプルページ

 

それに比べて、私のMTテンプレートは・・・(´･ω･｀)。

 

いやカッコ悪いと言っているわけではないんですよ。

 

自分好みに色を変えたりして好き勝手にやらしてもらっているんで・・・（むしろ愛着の方が強いくらい）。

 

ただ、ただ、いかんせん「これ」が・・・ねえ・・・。

 

 

そう。旧アンリミテンプレートはまだスマホがこの世にない時代にリリースされたものなので、レスポンシブ対応になっていないんですよ。

 

Googleさんにはわざわざ「モバフリじゃありません」って晒されているし、「コレなんの罰ゲーム？」ってくらいの仕打ちですよ。

 

検索エンジンと言えば、その検索結果は我々アフィリエイターにとって看板のようなモノ。

 

「このレストランには椅子がありません」って書かれているようなものですよ・・・。（まあ否定できない自分がそこにいるわけですが）

 

確かに、私もたま～に外出先で自分のブログを見ることがあるんですけど（←鏡を見て前髪気にしすぎる中学生か！）、「字、ちっさ、ちっさ！」と何度も連呼しそうになるほど見づらいんですよね。

 

自分でもこれには辟易していて、何度もレスポンシブ対応を考えたんですよね（※）。

 

※過去の参考ページ

自分のことを棚に上げてスマホ対応していないブログはオワコンなどと騒ぎ立ててみる

 

２．MTのレスポンシブ対応プラグインを検討してみる

 

例えばワードプレスにはボタン一つでレスポンシブ対応してくれる便利なプラグイン「WPtouch」があります。

 

これに対してMovableTypeのレスポンシブ対応プラグインは存在しないんですね。

 

で、MT公式のシックスアパート社のQAサイトを見ると、モバイルパックを購入しろとのこと。

（または初めからレスポンシブ対応デザインのテンプレート使えって・・・）

 

でもこのモバイルパックって・・・「10万円もするじゃん！」。

 

「こっちはそんな高い金払えんのよ！(｀・ω・´)」

 

その後、ネットで色々探してみるも、MTユーザーが劇少なこともあり、有益な情報がない始末（MTユーザーにはおなじみの小粋空間にもレスポンシブ化に対する有益な情報はありませんでした）。

 

「やっぱり自作するしかないのか・・・・・」

 

実は私、HTMLは結構得意なんですが、CSS（スタイルシート）って苦手なんですよね。

 

実際にレスポンシブ対応されたブログのCSSを見ても何が何やら・・・・

 

「paddingっ何？」

「マージン？は？」(。´･ω･)?

 

そんなこんなでしばらくの間は、「スマホユーザーは切り捨てる」という選択肢を取らざるを得ない状態が続きました。

 

３．ついに発見！簡単にレスポンシブ化できる方法

 

つい最近の出来事なんですが、既存のHTMLサイトテンプレート（アフィリエイトファクトリーのバックリンクサイトやアンリミテッドアフィリエイトのサテライトサイト）をなんとかレスポンシブ対応化したいと思って色々調べていたら、簡単にレスポンシブ化できる方法を見つけちゃいまいた。

 

それがこちらの記事「Movable Typeのサイトを簡単にレスポンシブデザイン化する方法」。

 

目から鱗でしたね。

 

 

本当に簡単です。

 

基本はたったコレだけだったんですね。

 

ガッツゴリラさんあざっす！

 

４．具体的にMovableTypeテンプレートのレスポンシブ対応作業を行う

 

 

もともとスタイルシートの前提知識が少ない私にとって、簡単にはいかない作業でしたが、なるべくミスが少なくなるように少しずつ修正して、プレビューして、また修正ということを繰り返しながら整えていきました。

 

以下、具体的な手順になります。

 

１．バックアップを取る。

 

私は何か変更するときにバックアップから戻すことはあまりないのですが、念のためとっておきましょう。

 

バックアップ対象はstyle.css。

 

MovableType管理画面の[デザイン]→[テンプレート]→[スタイルシート(styles.css)]をクリックして表示されるソースコードをすべてコピーしてテキスト（メモ帳など）に張り付けておきましょう。（後述しますが私はエクセルに保存しました）

 

２．デバイスごとの見え方が変わるようにPCエリア、スマホエリアを作る。

 

さきほど紹介したガッツゴリラさんのブログに習ってPCエリア、スマホエリアの枠を作ります。

 

例は640pxを境していますが、ここはそれぞれのブログのカラムサイズに合わせて良いと思います。

 

目安としてはウィンドウサイズを小さくしていって、横スクロールバーが出現するサイズ。

 

このサイズを境目にすれば良いでしょう。

 

３．PCサイズエリアに既存のスタイル記述を全部張り付ける。

 

次にPCサイズエリアに既存のスタイルシートコードをすべて貼り付けます。

 

その後いったん保存して再構築してみましょう。

 

再構築が終わったら、ブログを表示して特に今まで通りと変わらない表示であることを確認します。

 

その後、徐々にウィンドウサイズを小さくしていくと、先ほど境目のサイズとして定義したサイズより小さくした瞬間、スマホサイズエリア（まだスタイル記述は何も書かれていない）のスタイルが適用されて、今まで表示されていたテンプレート装飾、色が無くなります。

 

この状態が初期状態。

 

ここからスマホ用の記述を行っていきます。

 

４．スマホエリアにPCエリアと同じ要素記述を一つずつコピーしていく。

 

スマホエリアに要素をコピーしていくときのポイントは横幅（width要素）です。

 

width要素には「width="910px"」のようなサイズ固定指定になっているものと、「width="90%"」のように倍率指定になっているものがあります。

 

スマホ表示対応にする場合のコツとしてはウィンドウサイズを小さくしたときに横スクロースバーを出さないことです。

 

なので、サイズ固定指定になっている部分はすべて倍率指定にしていきます。（よくわからない場合はwidth="100%"にしておけばOKです）

 

５．コピーするたび保存と再構築を行ってプレビュー確認をする

 

４の作業は一つの要素をコピーするたびに保存、再構築、プレビュー確認を繰り返し行ってください。

 

ただし、プレビューはスマホサイズにブラウザを小さくして確認します。

 

この時に、どうしても「スマホ表示の場合はいらないだろう」というパーツが出てきます。

 

こういうパーツは思い切って非表示にします。

 

非表示にする方法は簡単です。

 

例えばPCエリアのぱんくずリスト用のパーツbreadが以下の記述だったとします。

 

 

これをスマホエリアでは、

 

 

とします。

 

こうすることで、PCサイズの時は表示されていたパンくずリストを、スマホサイズの時は非表示にすることができます。

 

このように基本的にPCサイズの時に機能性を重視してごちゃごちゃと記述してあるタグやスタイルを、基本的にスマホでは継承しつつ非表示にする（削除ではなく）。

 

これが基本です。

 

スマホというのは画面が小さいため、必要最小限のブログ記事とコンバージョンさせるためのパーツだけに絞る必要があります。

 

また、スマホを眺めている人というのは大抵、通勤／通学中、昼休中に見ている人が多く、さらに時間が限られている人が多いので、色々と情報を詰め込むのではなく、なるべく必要最小限で、かつ、求めている情報だけを表示してあげるように意識してください。

 

だから、style.cssのスマホエリア記述も必然的に「display: none」が増えていくことと思っています。

 

例えば（私もそうしていますが）、はじめのうちはスマホサイズの時のサイドバーなんかは取っ払ってしまってよいと思います。

 

後ほど、技術的に習熟してからサイドバーを記事の下に持っていくことも可能ですから・・・。

 

さて、このスタイルシートの移植作業ですが、実は一番手間がかかり、難しい部分でもあります。

 

特に、一つのスタイルシートの中でPCサイズエリアとスマホサイズエリアを記載すると、単純計算でコード量は2倍になるので、ソースが縦長になって見づらくなること、そして、何をどこに書いていたかわからなくなってしまう、という困ったことが起きます。

 

なので、ソース中にコメントをしっかりと残して、何をどこに移動したか意識できるようにしましょう。

 

そしてもう一つ。

 

私がスタイルシートの移植時に工夫した点はエクセルを使う方法です。

 

スタイルシートのバックアップもエクセルに取りましたが、スタイルシートのコードを編集する時もエクセルを使います。

 

※いくらコメントをしっかり書いてもクッソ長いソースをマウスホイールで上にいったり下にいったりしているうちに、何が何だか自分でもわからなくなってしまったので改善しました。

 

以下簡単に説明しますね。

 

１．スタイルシートを全コピーして、エクセルに張り付ける

 

エクセルはデフォルトでセル枠の罫線が薄く引いてありますが、ゴチャゴチャするのでセル枠の罫線は消します。

 

＜エクセルの枠線表示時（初期状態）＞

＜エクセルの枠線非表示時＞

 

この状態でA1セルを選択して、スタイルシートの全ソースをコピーして貼り付けます。

 

２．エリアごとに色を付ける

 

次にエリアごとに色付けします。

 

色付けする単位は自由ですが、私の場合はスマホ・PC共通エリア（後述します）を黄色、PCエリアをオレンジ、スマホエリアを青にしました。

 

 

 

このように色分けしておくと、縦に長いソースでも迷子にならずに適切な場所へ移動してコピー＆貼り付けやソース検索ができます。

 

ソースを移動、またはコピペ、移植（コピペ後の改変）した場合は、そのエリアに応じたセル色に変更します。

 

あと、実際にスタイルシートのどのソースコードがプレビュー表示したサイトのどのパーツに対応しているかが分からない場合もあると思います。

 

その場合はブログやサイトを表示させたブラウザ上でパーツを選択して、[右クリック]→[選択した要素のソースを表示]を選択すると、要素名id名やclass名が表示され、簡単に知ることができます（FireFoxの場合）。

 

６．PCサイズエリアとスマサイズホエリアの共通記述をエリア外に移動する。

 

４～５の作業ではPCサイズエリアとスマホサイズエリアに分けた上で、PCサイズエリアの記述をスマホサイズエリアに移植していく方法を示しましたが、場合によってはPCサイズエリアでもスマホサイズエリアでも同じコードが出てきます。

 

このようなコードはどちらのエリアに記述しても問題はないのですが、やたらとソースコードが長くなり冗長です。

 

なので、共通スタイルとして、デバイスエリアの外側に記載します。

 

 

さて、このように重複記述を避けるように気を付けていても、同じスタイルを複数個所に記述していることもあるかと思います。

 

その場合は、エクセルの検索機能を使って同じ記述が複数個所に書いていないかチェックしましょう。

 

最後に

 

 

お疲れ様でした。

 

基本的な作業はココまでです。

 

私もここで手を止めて、一旦Google先生のモバイルフレンドリーテストを受けてみることにします（ドキドキ）。

 

 

 

 

はい！うまくいきました。

 

検索エンジンの結果表記「このページはモバイルフリーではありません」もそのうち消えることでしょう。

 

＜2017年7月2日追記＞

検索エンジンの表記結果「このページはモバイルフリーではありません」の表記は見事に消滅しました！！

 

 

 

他にもグローバルナビや非表示にしたサイドバーを記事下に表示する、崩れたレイアウトを修正する、などの細かい微修正は必要でしょうけど、それはこれから時間を見つけて改善していきます。

 

さてさて、以上が歴史あるMovableTypeテンプレートのレスポンシブ対応方法でした。
（MT版の旧アンリミテンプレートをここまで使い倒しているのは全国見渡してもヲタスケだけでしょうｗ）

 

ただ、これからブログ、サイトを運営する場合は今出回っているテンプレートがほとんどと言っていいほどレスポンシブ対応できているので、何ら心配することはありませんね。

 

今のところ私が扱っている商材もすべてレスポンシブデザイン対応完了済みです。

 

 

 

ただ、実際に既存の非スマホ対応HTMLサイトを持っていても、時間的な制約や技術力の不足により、「なかなかスマホ対応できない」という悩みを持っている人もいるかと思います。

 

私から1万円以上の情報商材を購入してくれた方にはHTMLサイトのスマホ対応化について無償でサポートさせていただきますので、もしお困りでしたら、遠慮なさらずにご相談ください（既存購入者様含む）。