37個サイトとブログをレスポンシブ化してスマホ対応させました!

ついに、Googleがモバイルフレンドリーアップデートの開始を昨日告知しました。

 モバイル フレンドリー アップデートを開始します

ついに、始まったか!という感じですが、これに対応すべく、ここ18日間、所有サイトのスマホ対応をがんばってました。

WordPressは、スマホ対応のテンプレがすぐ見つかると思うのですが、問題は、MovableTypeです。

もはや、高額有料化?により、シェアをどんどんWordPressに奪われた感のあるMovableType。

レスポンシブの無料テーマが見つからねー!!

これは、もう自分でやるしかないだろう、ということで、自分でレスポンシブテーマを自作して、それを37個のサイトとブログに適用しました。

2015/04/05(日)から作業を始めて、本日2015/04/22(水) 0:40頃に作業を完了しました。

魔物うごめくダンジョンから、ラスボス3人倒して無事生還したら、こんな気分でしょうか?

ああ、空が青い。

もはや、気分は千本ノック状態です。エヴァンゲリオンのシンジみたいに「逃げちゃだめだ!逃げちゃだめだ!」とつぶやきまくり、いろいろオタクなつぶやきを垂れ流して作業していたのは、わたしとSNSでつながっている人にはご存じのとおりです。

いやあ、受験勉強と就活以来、久しぶりに追い詰められましたわ。

まあでも、おかげさまで、CSSスキルが大幅に向上しました!

もう、レスポンシブもフロートも怖くないぜ!!

ということで、今回は、レスポンシブ化でひっかかったり、気づいたことを忘れないうちに軽くメモしておきたいと思います。

そんで、今日はケーキ食べて打ち上げだ!!

レスポンシブの教科書

まず、今回MovableTypeのレスポンシブスマホ対応テーマを作るのに参考にした書籍はこちらです。

この本なしでは、とうてい、わたしにはレスポンシブテーマの自作などできなかったでしょう。

ここに深く感謝の意を表したいと思います。

ほんっと、ありがとうございます。助かりました!!!!

レスポンシブの基本がこの本のおかげで理解できました!

じゅうぶん元はとったと思うくらいに活用させていただきました。

かっこいいアイキャッチのCSSもゲットできたしw

さて、基本、この本で作ったテンプレについて気を付けることをメモしておきます。

本書を元にしてわたしがいろいろカスタマイズして作ったテンプレについてのメモなので、実際にほかの人にあてはまるかどうかは謎ですが、書いておけば、役に立つこともらうだろう、というスタンスです。

サイドバーのアドセンスはレスポンシブで

まず、サイドバーは一定程度まで可変で固定ではありません。

なので、サイドバーのアドセンスは、レスポンシブ対応のもの必須。

それも、アドセンスのレスポンシブは、可変させた時に伸び縮みするのではなく、表示させた時に、最適の幅のアドセンスが表示される、というものようです。

あと、本体のアドセンスは、336pxのレクタングル大だとはみ出ますので、300pxのレクタングルをチョイスしました。

わたしは、この本をなぞるだけがせいいっぱいだったのですが、やれる人は、サイドバーの幅を固定するという方法でもいいのかもしれないと思いました。

広告画像は縦指定のない方法で

あと、作業をしていて思いましたが、広告画像の縦指定があると、width 100%で指定すると、横だけ縮んで変なことになりました。

広告主さんにお話して、縦指定は削除させてもらいました。

わたしにもっと深いCSSスキルがあればどうにかできたのかもしれませんが、レスポンシブデザインに手軽に対応できるように、今後は画像の縦指定はない方がいいのかも、と思ったりしました。

YouTubeとGoogleMapの対応

iframeで表示される、YouTubeとGoogleMapは、そのままはると、はみ出るので、CSSでの対応が必要です。

こちらの記事を参考にさせていただきました!ありがとうございます。

★GoogleMapのレスポンシブ対応
参考ページ  【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法

YouTubeはどこ見たかメモしてなかったのですが、こちらのサイトあたりが参考になるのではないかと思います。

参考ページ  Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法

Facebookコードの刷新

あと、Facebookのコードが古くなっていたら、ついでに修正しておいた方がいいです。

参考ページ  いいね!ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります(公式情報)

ポイントは、「all.js」というのが使われているかどうかみたいですね。

いいね!ボタン(などFacebook用の各種コード)のJavaScript呼び出し部分が以下のように「all.js」になっていたら、古いコードです。2015年5月以降は動作しなくなります。

Facebookで新しいコードを取得しようとすると、LikeボタンはそのままLikeボタンなんですが、Likeボックスというのはなくなっていて、「Page Plugin」というものになっています。

 Facebook:ソーシャルプラグイン:Page Plugin

Facebook → アプリを管理 → Docs → Social Plugins → Page Plugin

と、たどっていくと、見つかります。(上のリンクで飛べますが、いつもどこにプラグインがあるのかわからなくなるので、自分用のメモ。)

レスポンシブ37本ノック作業まとめ

とりあえず、実際の作業について今思い出せるのはこれくらいでしょうか。

長くなったので、作業後のインデックスなどについては、また記事を改めたいと思います。

とりあえず、終わった!!

この本、本当おすすめ!