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

レスポンシブ

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

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

方針の決定

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

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

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

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

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

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

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

無料のレスポンシブ対応のテーマ

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

Simplicity

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

Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ

STINGER6

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

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

全てはブログを書く為に。 – WordPress無料テーマ STINGER6

Xeory

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

Xeory-無料WordPressテーマ-

Material

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

ブログ用WordPressテーマ マテリアル

gush2

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

WordPress無料テーマGush2-ブログがきっと楽しくなる!

テスト

テスト用サイトに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」を停止しました。

  • このエントリーをはてなブックマークに追加

フォローはこちらからお願いします。

会社勤めから起業するためのウェブ集客セミナー
会社勤めから起業するための7つのステップ