favLifeをやっとこさリニューアル。レスポンシブデザインのテーマを使用しました。

0. 前置き

　このブログも2007年6月30日に開設して、今年で10年になります。個人的には1番続いたサイトになりますが、このブログの前、1994年から2001年まではWindowsのソフトウェア紹介サイトを開設。当時はブログという言葉もなくホームページという言い方で個人でやってました。HTMLはメモ帳やHomesiteというHTMLエディタを使ってブラウザはNetscape NavigatorをISDN 2回線使ってテレホーダイの使える夜中のうちにダウンロードしたり、今思うとおそろしく時間のかかることを趣味でやっていたのだなと。このとき秋保窓（現在の窓の杜）のトップページの看板を描いて採用されたのも良い思い出です。っとここまで書いて、これは今書くことでは無いなと気づく。しかしここまで書いたのでこれはこれで（笑）

1. 本題

　今回10年という節目でリニューアルを行いましたが、WordPressのテーマは毎回悩みの種で、初めてテーマを購入しました（実は3年前に購入してた）。WordPressのテーマは1から自分で作るやり方、フリーのテーマを使ってカスタマイズして作るやり方。テーマに任せて作るやり方があって、私が始めたときに選んだのはフリーのテーマ。これは必要なところだけ調べてカスタマイズする方法で、テーマの全部を理解せずにやっていたので正直、いろんなところに時間がかかっていました。そしてリニューアルも同じ機能を実現するテーマを探すのに時間をかけ、最終的に駄目というパターンの繰り返しでした。

　今回、フリーのテーマではなく有料のテーマを購入しました。理由は簡単「時間がもったいない」と感じたからでした。まさに時は金なりというか、時間があれば、じっくりと一からテーマを作ってみたいということもあったのですが、本職との掛け持ちで予定は立たず。10年の節目までには間に合わせたいという思いもありました。
　それで、今回、株式会社デザインプラスのWordPressテーマ「Opinion (tcd018)」を選びました。ここのテーマは非常にカスタマイズ性が優れていて、いろんなテーマを見て自分のサイトに欲しい機能を探してここにたどり着きました。
　私が購入した時にハイクオリティな人気のブログ仕様WordPressテーマ「MAG （TCD036)」など無かったので、今だとこれを選んでいたかもしれません。ここで気になっていたテーマは最後に紹介します。

2. Opinion (tcd018)テーマ導入からのカスタマイズ

　基本的にはテーマを変更するのみで、WordPressテーマ「Opinion (tcd018)」自体を改造したのは3行。プラグイン絡みの問題がありましたがここは忘却録として残したいと思います。

2-1. まずはTest Driveで確認

　WordPressのプラグインで、Theme Test Driveというものがあります。これはテーマを即誰でも見れるページに反映させたくない場合にテスト的に関係者だけ見れるようにできるものです。一般の方には今までどおりのWordPressテーマで見えます。以下のサイトが参考になります。

[WP]本番テーマの裏側で別のテーマを動かすことができるWordPressプラグイン「Theme Test Drive」
　

2-2. テーマの確認

　WordPressテーマ「Opinion (tcd018)」では、外観からカスタマイズ可能です。わざわざFTPクライアントを使ってダウンロードしてエディタが編集してアップロードという手間はありませんでした。

　

2-3. カスタマイズ

　カスタマイズをクリックすると、左側に編集用のメニュー右側にサイトが表示されます。サイトを見ながらウィジェットの追加・削除・編集が可能です。

　
左のメニューの下にはレスポンシブらしく、スマホで見えるサイトも確認できるようになっています。ウィジェットの画面はWordPress標準と変わりませんがこのテーマ(tcd)用のウィジェットがあります。

2-4. TCDテーマオプション

　これは実際に試してみて思ったところですが、欲しかった機能です。コードをガリガリ書く。若かりしときなら寝る間も惜しんでやってたところですが、今の平均睡眠時間4時間ではとても無理。どんなことができるかというとさらーっとあげると以下のものです。セットするだけ。
　このテーマを使う前、スマホ用ページとしてはWPtouch モバイルプラグインを使っていてスマホ用テーマをいじくりすぎてプラグインの更新ができなくなってましたが、この面倒が無くなりました。

基本設定

サイトのメインカラー/サブカラー/フォントサイズがここから設定可能
各項目の表示設定（日付/カテゴリー/タグ/サムネイル/関連記事/前後の記事リンク等）
twitterとfacebookの設定
ソーシャルボタンの表示設定（表示タイプ/位置）
カスタムCSS（タグ内に挿入）

その他の設定

PR一覧の設定
ランキング一覧の設定
お知らせの設定
プレスリリースの設定
Facebook OGP/Twitter Cardの設定

トップページ

スライダーの設定
おすすめカテゴリー記事１～３の設定
広告バナーの種類を設定
ページ下部に表示する広告バナーの設定1/設定2

ロゴ（ヘッダーとフッター）

ロゴのアップロード
ロゴのリサイズ
ロゴの位置調整

ヘッダーの広告

広告バナーの設定

詳細記事の広告

広告バナー（上部・下部）の設定

スマホ用の広告

広告バナー（上部・下部）の設定

3. Opinion (tcd018)テーマとプラグインの問題点

　このWordPressテーマ「Opinion (tcd018)」Facebook OGPとTwitter Cardの設定がプラグインなしで可能なのですが、これが問題になりました。
　WordPressプラグインで有名なAll in One SEO Pack。これとテーマのmetaタグが重複してるようで、Facebook for Developerで確認するもエラー。原因はわかっていたものの修正手段がわからなかったときに役立つのがテーマのサイトの情報でした。

プラグイン「All in one SEO pack」を使用するときの注意事項 | TCD LABO

　そしてこの内容で検索するとさらに詳しい情報を見つけました。感謝！
（【参考】TCDのWordPressテーマでの設定例が参考に変更しました）

All in One SEO Pack – SEO対策の設定を総合的に管理できるWordPressプラグイン – ネタワン

　そして、metaタグでhttps://（ここはまだhttp://だけなので）となっているタグを消しました。この修正でエラーはなくなるかと思いきや、キャッシュを停止してなかったのでしばらく悩みました。WordPressプラグインでキャッシュを使っている方はまず停止してから変更する必要があります。終わった後は戻すことも忘れないように。これで無事エラーも無くなりました。
　あと、Jetpack by WordPress.comプラグインを使っている方は、こちらも共有部分には気をつけてください。おかしいなと思ったら表示しているページのソースの頭の方を見てみるとわかることがあります。

　そして表示上の問題として、YouTubeの動画を載せると、PC上で合わせるとスマホではハミ出てしまい、スマホに合わせるとPCでは小さくなってしまう問題があり、これも調べてみたら載っていました。

埋め込み動画のレスポンシブ対応方法（YouTube等） | TCD LABO
　ちなみにWordPressではYouTubeのURLを直接記事に書くと自動的に動画を貼り付けてくれるのですが、これもサイズ調整がうまくいきませんでした。
　ただ、上記の内容はテーマの修正が必要で、テーマのアップデートで修正をなるべく減らしたいということもあり、Advanced Responsive Video Embedderプラグインで対応することにしました。

ＴＣＤテーマにYouTubeスマホ最適表示化させるプラグイン |

　以上で、このテーマを使ってリニューアルが終わりました。これ一から作っているとおそらく数ヶ月かかっていたかもしれませんが、このテーマを使って土日の週末使った数時間で作業は済みました。あとはウィジェットなどの配置をちょこちょこっといじるくらいだと思います。テーマの更新があっても修正箇所はわかっているのでアップデートして3箇所直すだけです。

4. 気になるTCDのWordPressテーマ

　ここで紹介したWordPressテーマ以外の比較的新しいテーマをご紹介。次リニューアルするなら（新しいサイトを作るなら）これかな～と思っているテーマです。

WordPressテーマ「MAG （TCD036)」
　ビギナーからプロフェッショナルまで、全てのブロガーに捧げる、あらゆる機能を搭載した次世代のブログテンプレート。2カラム（サイドバーは左 or 右）にしたり、3カラム（サイドバーは両端 or 右2列）にすることが、たったの「2クリック」で可能。追尾型広告、ランダム広告、広告のショートコード化など様々な広告管理機能を搭載しています。