なぜ筆子ジャーナルのテーマを3カラムから2カラムにしたのか？←質問の回答

最近、「筆子ジャーナル」という、私がこのブログとは別に運営しているブログのテーマを2カラムに変更しました。

 

なぜそうしたのか？

 

という質問をいただきましたので、この記事で回答します。まず、いただいたメールをシェアします。Yoshikaさんからです。

 

 

どうして2カラムにしたんですか？

 

件名：なぜ筆子ジャーナルのテンプレートを変更されたのですか？

 

 

Yoshikaさん、メールありがとうございます。風花初芽も購入していただき、重ねてお礼を申し上げます。

 

一言で質問に答えると、3カラムだと、スマホ表示でレスポンシブがうまく効かず、表示がくずれるという現象が起こっていたからです。

 

2カラムにしたところ、この現象がなくなりました（少なくともかなり改善が見られました）。

 

以下にもう少し詳しく説明します。

 

カラムって何？という方はこちらをどうぞ⇒カラム落ち（ブログのレイアウト崩れ）の対処法

 

テーマを替えた理由

 

BlogPressが古くなってきた

 

まず、質問の件名にある、テーマを替えた理由ですが、以前使っていた　BlogPressは発売が古いせいか、サーバーで最新版のPHPに切り替えるとエラーが出ていました。

 

このテーマはTCD（というメーカーのです）の連番で書くと、TCD010です。TCD第10号というわけです。

 

PHPを最新版にできなかったのは、もしかしたら使っているプラグインのせいかもしれませんが、テーマが古いのは事実です。

 

いつ発売されたのか知りませんが、BlogPressは以前はレスポンシブではありませんでした。数年前にレスポンシブにアップデートされました。

 

私が購入したときは、すでにレスポンシブになっていましたが。

 

2016年の秋に、BlogPressを新しくしたMAGが発売されました。共にブログで使うことを想定したテーマです。よく見るとMAGはBlogPressのデザインと似ています。

 

BlogPressはユーザーが多いせいか、まだサポートを打ち切られてはいませんが、MAGが出た以上、BlogPressが進化してくことはなかろう、MAGに替えたほうがいいかな、となんとなく考えていました。

 

MAGはTCDの連番で言うと、36番です。

 

テーマのHTMLも古い

 

今年の夏、7月のはじめに自分のブログ3つすべてをSSL化しました。

 

SSL化って何？という方はこちらを⇒http と https の違い、常時SSLについてわかりやすく説明します。

 

SSL化の作業は人に頼んだのですが、その方から、テーマを構成しているHTMLが古いから、HTML5に対応しているテーマにしたほうがよい、という助言を受けました。

 

私は娘が大学を卒業して無事就職するまで、つまりあと3年はブログの仕事をするつもりでいるので、「それならば新しいテーマにしよう」と決めました。

 

そこで、7月10日にMAGを購入し、まず、「筆子ジャーナル」ほどアクセスが多くない、ブログ1のテーマをMAGに替えました。

 

Yoshikaさんは、私から風花初芽を購入されたそうですから、ブログ1のことはご存知だと思います。

 

すると、いろいろと不具合がたくさん出て、7月～8月は修正に追われていました。

 

ブログ1でも、スマホ表示でレスポンシブが効かないことがしばしばある、という事態が発生したので、TCDに問い合わせたところ、以下の2点を教えてもらいました。

 

●YouTubeの動画がコンテンツの幅を超えているかもしれない

●広告（アドセンス）のせいかもしれない（広告に関してはサポート対象外）

 

YouTubeの動画がうまくおさまるように、

 

iframe{ width:100%; }

 

というコードを入れろ、と言われたのでそうしたところ、ブログ1の不具合はほぼ解消しました。

 

今でもまれに、スマホを横置きして、縦に戻すと、完全に戻らないときがあるのですが、まあ、許容範囲だと思います。

 

ブログ1で一応、動作は確認できたので、10月になってからブログ2（つまり筆子ジャーナル）のテーマを入れ替えました。

 

筆子ジャーナルでは不具合を解消できなかった

 

ブログ1もブログ2もほぼ同じように運営していますが（100パーセント同じではありません）、ブログ2では、ブログ1では起きなかった不具合が起きました。

 

ブログ1の表示の不具合は、スマホ表示のまま、なんとなく左に寄っている、というものでしたが、ブログ2では、レスポンシブが効かず、不完全なPC表示になることがしばしばあったのです。

 

グローバルナビバーが出て、細い帯のようなメインカラムが左に寄り、下にスクロールすると、両サイドバーが細くでてくる、といった状態です。

 

テーマを入れ替えた直後は、ほとんどこの状態で、スマホ表示からは閲覧できないことが多かったです。

 

実際、読者の方からも、「全然読めなかった」というメールをいただいています。

 

その後、ネットで調べながら、いろいろと修正していたら、多少状態は落ち着いたものの、ふとした拍子に表示がおかしくなる、ということが続きました。

 

特に横置きから縦置きにしたらほぼ確実に不具合が出ました。

 

この点についてはメルマガに書いたのでYoshikaさんもご存知だと思います。

 

TCDにも問い合わせましたが、ブログ1で問い合わせたときと同じ返事が返ってきました。

 

「これは、別のテーマに変えるしかないか」と考えていたところに決定的なことが起きました。

 

iOSのアップデートで表示が壊滅的におかしくなる

 

10月23日（カナダ時間）、iPhoneにアップデート版が届いていたのでアップデートしました。

 

iOS 11.0.3になり、いつものようにブログ2の表示をチェックすると、例の、横にメインカラムが細くべたっとくっついた状態のまま、再読込しても、画像をタップしても、何をどうしても戻らなくなってしまいました。

 

「これはあかん」

 

そう思って、とりあえず、もとのBlogPressに戻しました。そうしたら、一度MAGにしてしまったせいか、PCからして表示が変です。

 

「これはあかん」

 

と、再度MAGにすることにしました。

 

このとき、私のところは夜。日本ではそろそろその日の記事が更新されようという時間だったため、変な表示のままにはしておけませんでした。

 

MAGに切り替えたら、なぜか、スマホ表示がふつうに戻りました。

 

「おや？　戻ってる？」

 

よくよく、管理画面を見てみたら、一度BlogPressにしたせいか、テーマオプションで指定したすべての設定がキャンセルされており、デフォルトの状態になっていました。

 

まだ、2カラムとか3カラムなど何も選択していない状態です。指定していない状態では２カラムでした。

 

このとき、「もしかして、このテーマは2カラムがデフォルトで、それでうまくいくように作ってあるのかも？」と気づきました。

 

MAGでは記事中に任意のコンテンツを入れることができるショートコードが用意されていますが、3カラムでこれを使うと、センターではなく、ちょっとずれて表示されます。

 

このことからも、2カラム前提で作っていることがうかがわれます。

 

このとき2カラムに指定して今に至っています。

 

2カラムにしてからも、毎日スマホで表示をチェックしていますが、大きな不具合は出ていません。スマホをよく使っている日本の友だちにも頼んで、何度か見てもらいましたが大丈夫だそうです。

 

読者からも、今のところ「変です」といったクレームは来ていません。

 

というわけで、今は2カラムを使っています。

 

ブログ1では3カラムで使っており、ブログ２でも、当初はそうする予定でいましたが、スマホでうまく見られない以上、2カラムにするしかありません。

 

なお、これはテーマが悪いというより、私が使っているプラグインや、広告を入れている場所との相性のせいだと思います。

 

以上が２カラムにした理由です。

 

ロゴを替えた理由

 

MAGに入れ替えたとき、ロゴを替えたのは、以前のロゴは透過pngではなかったため、MAGの背景の薄いグレーの上で、ロゴ部分だけ白く浮き出ていたからです。

 

また、BlogPressでは、ロゴは左側が定位置でしたが、MAGではセンターなので、MAGのバランスにあうロゴをデザイナーに発注しました。

 

このとき、3つデザインを提案され、「以前の小鳥もかわいいからこれを使ってもいいと思う」と言われました。

 

しかし、小鳥が文字に対して小さい気がしたので花を選びました。

 

ちなみに、この花は筆子の着物の柄をイメージしたものです。

 

ロゴは、あくまで3カラムに合ったバランスで作ってもらったので、2カラムにした今は、多少見た目がアンバランスに感じるかもしれません。ですが、デザイナーに確認したところ、このバランスでOKとのことでした。

 

情報量が多いブログは3カラム？

 

確かに以前はそう言われていましたが、今は必ずしもそうではないと思います。

 

物販ブログや情報商材を扱っているブログでは、それぞれのレビューページへ誘導するために、サイドバーを2つ使ったほうがいいかもしれません。

 

実際私も、風花初芽のノウハウを使っているブログ（ブログ1と3）では3カラムにしていますし、ブログ2でもそうするつもりでした。

 

しかし、物販にしても、今は、グリッドレイアウト（画面を格子状に区切って、カードを置くようなレイアウト）のテーマで、写真を見せて、任意の記事に誘導する方法もあるかと思います（個人的には好きなレイアウトではありませんが）。

 

いずれにしろ、スマホからのアクセスが圧倒的に多いので、スマホでまともに読めることが最優先です。

 

以前も書きましたが、私のブログは、デスクトップからのアクセスは全体の2割です。

 

スマホからのアクセスが多い話⇒スマホの普及でアフィリエイトで稼ぎやすくなっている。

 

以下は、2017年9月の数字ですが、PCからのアクセスは、ブログ1は21.62パーセント、ブログ2は18.90パーセント。

 

スマホからのアクセスはブログ1、74.25パーセント、ブログ2、71.73パーセント。残りがタブレットです。

 

ブログ2のユーザーの年齢層は高いはずですが、それでも10人のうち2人しか、パソコンでアクセスしないのです。

 

ですから、スマホ表示の最適化がもっとも重要だと思います。

 

なお、右側にサイドバーを2つ並べるレイアウトにもできますが、テーマを替えたとき「全体が大きくて把握できず、非常に読みづらくなりました」というメールをもらったので、わかりやすい2カラムにしています。

 

 

WordPressのテーマを途中で替えると必ず、微妙な不具合が出ます。

 

ブログ1では、これまで3回テーマを替えましたが、そのたびに、アイキャッチの修正やらなんやらしています。

 

たまたま今回はかなり深刻な不具合が出たわけです。

 

私はブログを書いている時間より、不具合修正などのメンテナンスにかけている時間のほうが長いのではなかろうか、と思うほど、毎日あちこち直しています。