ブログをレスポンシブ対応に変えた手順

このブログをレスポンシブ対応に変えました。

レスポンシブ対応に変えた手順を備忘録代わりにまとめておきます。

方針の決定

このブログはWordPressを使っています。WordPressのブログをレスポンシブ対応に変えるためには、テーマを変えなければなりません。

このブログのテーマは手作りでした。このブログを立ち上げようとしたときには、気に入ったテーマがなかなか見つかりませんでした。逆に、テーマを作るためのサイトや本が見つかったため、自分で作りました。

まず、レスポンシブ対応にするためには、どのように修正しなければならないかを調べました。

レスポンシブ対応にする方法を調べているうちに、ブログ用の主要な無料のテーマが、レスポンシブ対応になっていることに気づきました。

無料のテーマを使えば、自分でテーマを作成するよりも、早く楽にレスポンシブ対応にすることができます。

また、自分で作ったテーマでは、内部構造にまずい点があるかもしれないと気になります。いろいろ調べて改善してきたつもりですが、見落としがあるかもしれません。

そこで、無料のレスポンシブ対応のテーマを調べました。

ブログ用の無料テーマでレスポンシブ対応のものはいくつかあります。私はSimplicityを選びました。トップページでその特徴を一番詳しく説明していたためです。

シンプル、内部SEO施策済み、カスタマイズしやすさをうたっています。トップページでその特徴をきちんと説明しています。

STINGERは多くの人に使われています。

タイトルはSTINGER6となっていますが、説明はSTINGER5でされています。基本的な導入方法や使い方は変わらないということです。

バズ部の運営ノウハウをもとに作られたテーマです。サイト型テーマとブログ型テーマの２種類があります。

無料の割に高機能なブログ用テーマだそうです。

シンプルで軽量、カスタマイズしやすさをうたっています。

テスト用サイトにSimplicityをインストールしてテストをしました。前のテーマと同じようになるように設定を変えていきました。

できるだけ短時間で移行を終わらせるために、設定をメモしながらテストしました。

その結果、アイキャッチ画像を設定していないエントリでは、サムネイルが表示されないことがわかりました。

Simplicityには「アイキャッチを自動設定」というパラメータがありました。

本文に最初に出てくる画像を利用してアイキャッチを自動設定するか。（※サーバーのphp.iniのallow_url_fopenがOffの時は外部サーバーから画像を取得できない可能性があります。）

という説明がありますが、うまくいきません。php.iniのallow_url_fopenもONとなっていることを確認しました。

ググって調べた結果、「Default Thumbnail Plus」というプラグインで最初にでてくる画像をアイキャッチ画像にできることがわかりました。

テストサイトで確認したところ、うまくいきました。

FacebookやTwitterにテスト用サイトの投稿を表示させたくなかったので、OGPやTwitter Cardはテストをしませんでした。

本番サイトにSimplicityをインストールし移行しました。

サムネイルの画像が歪んでしまいました。

「Regenerate Thumbnails」というプラグインを使って、サムネイルを再生成したところ、サムネイルの歪みはなくなりました。

この後、色やレイアウトを少しずつ修正していく予定です。不具合に気づいた方は、連絡をいただけるとありがたいです。

【2016年1月13日追記】

iPhone 6 / Plusでの表示が、スマホ用表示になったり、ならなかったりするので、プラグイン「WP Super Cache」を停止しました。