こんにちは、ユスティナです！
ブログのデザインをもっと良くしたい、そしてなによりスマホでの表示速度を速くしたい――そんな期待を込めて、人気テーマ 「SWELL」をついに購入しました。
私はそれまでずっと無料テーマの「Cocoon」を使っていて、しかもブログ初心者でバックアップの経験もゼロ。そんな私が初めて有料テーマに挑戦した結果は…まさかの大失敗。最後は奇跡的に救われるという、冷や汗ものの体験になりました。この教訓が少しでも参考になればうれしいです。
SWELLを試そうと思ったきっかけ
Cocoonについて
「Cocoon」は無料なのに高機能で、シンプルで使いやすく、ブログ初心者にも人気のテーマです。ブログを立ち上げた当初は別のワードプレステーマを使っていたのですが、100％GPLで自由にカスタマイズできる無料テーマがあると知り、Cocoonに切り替えました。SEO対策、広告管理、モバイルフレンドリー対応など、便利な機能が一通りそろっています。
ずっとCocoonを使っていて不便はなかったのですが、記事が時系列で並ぶブログ型のレイアウトが中心なので、もっと簡単にサイト全体を整理して見せたいと思うようになりました。カスタマイズ性は高いのですが、私自身まだCSS、HTMLの理解が足りなかったこともあり、無料テーマゆえの限界もあるなと感じていました。
Cocoonの公式ホームページへアクセスする。
SWELLとの出会い
そんなときに目に入ったのが、SNSやブログ界隈で大人気の有料テーマ 「SWELL」。見た目が洗練されていて操作性も高く、スマホ表示がとにかく速い、そして100％GPL（好きにカスタマイズできる）というのも大きな魅力でした。
Googleの検索評価にもスピードは関わってくるし、読者にストレスなく見てもらえるのは大切なこと。
ただ、SWELLはWordPressテーマの中でも価格が高め。初めての有料テーマだったのでなかなか決断できなかったのですが、いろいろなレビューを読んでいくうちに、移行手順を丁寧に紹介している人が多く、実際に移行に成功して操作のしやすさや表示速度の改善を実感している声がたくさんあるのを知りました。それが最後の後押しになりました。
これでブログがもっと快適になるかもしれないと期待して、思い切って購入。実際に買ってみるとインストールはとてもスムーズで、Cocoonサポート用のプラグインも問題なく導入できました。記事数もまだ50に満たないし、微調整するくらいで済むだろうと、そのときは思っていたのです。
SWELLの公式ホームページへアクセスする。
SWELLへの移行
想像以上に大変だった移行作業
いざSWELLに切り替えてみると、すぐにこれは大掛かりな作業になると悟りました。
初心者ながらもCocoonで積み重ねてきたCSSやHTMLのカスタマイズは、ほとんどそのままでは反映されず。記事内のCocoon特有の装飾も崩れてしまい、サイト全体のページを一つひとつ見直し、書き直す必要がありました。
さらに、トップページにはデフォルトでSWELL特有のアピールエリアが表示され、サイト全体の構造も大きく変わってしまいました。Googleアドセンス広告が表示されなくなったり、メニューなどで使っていたウィジェットの配置も崩れるという状況に。
管理画面での操作方法も変わり、そもそもどこを押せば何が変わるのか、まずは研究するところから始めないといけない。
ちょっとした模様替えのつもりが、気づけば家ごと建て直すような大工事に発展していたのです。
Cocoonに戻したら大惨事
とりあえず一旦、テーマを元に戻し、スムーズに移行する方法を考えることにしました。これまで慣れ親しんできたCocoonなら、少しずつ整えていけば大丈夫。そう思っていたのですが…。
実際に戻してみた瞬間、元のレイアウトは崩れ、記事内の見た目も壊滅的。広告も全く表示されなくってしまい、戻して今まで通りカスタマイズし直せば元通りになるだろうという甘い考えは、一瞬で砕け散りました。
私自身、コーディングの知識があるわけではなく、HTMLやCSSを自分で一から書けるわけでもありません。どこを修正したら直るのかも分からないし、そもそもどこに問題があるのかも判断できない。そんな状態でブログ全体がカオスと化したので、とりあえず、バックアップから復元しようと決断しました。
Cocoonへ戻した後
復元中に起きた大トラブル
幸いにもバックアップはきちんととっていました。普段から使っていたのがUpdraftというバックアップ用のプラグインです。WordPressのデータを丸ごと保存して、必要なときに復元できる便利なツールで、多くのユーザーが利用しています。
私はその仕組みを理解していなかったため、なんと復元中にサーバー側の容量が足りなくなり強制的にエラーが発生してしまいました。
その結果、サイトは503エラーで完全にダウン。ワードプレスの管理画面にも入れず、真っ青になりました。
慌ててサーバーの容量を追加購入しましたが、コントロールパネルからの復元方法もわからず、もうブログ終わったかも…と半泣き状態。
自動バックアップに救われた話
絶望していたときにふと思い出したのが、サーバーについているInstallatron（インストラトロン）という機能です。多くのレンタルサーバーに標準で入っている、自動バックアップと復元をしてくれるツールのことです。
実は、Installatronのバックアップは容量をかなり使うため、普段から過去の記録は削除していました。前日のファイルも消したばかりだったので、もう何も残っていないだろうと半信半疑で確認してみることに。
すると、なんと前日の夜、奇跡的に自動バックアップが走っていたのです。藁にもすがる思いで復元を実行すると、ブログは見事に元通り。あのときの安堵感は今でも忘れられません。
学んだこと
今回の一連の大騒動で痛感したのは、テーマ移行は決して気軽にできるものではないということです。テーマを変えればすぐに元通りになるだろう――そんな考えは完全に間違いでした。バックアップはマストです。
また、バックアップはプラグイン任せにせず、できればサーバー側のものと二重で準備しておく必要がありますし、サーバー容量も常に余裕を持たせておかないとトラブルが起こったときに簡単に詰みます。
自分のサイトは大丈夫と思い込んでいましたが、実際は初心者のわたしにとって大きな壁でした。結果として、自分にはやはりCocoonをカスタマイズしていくやり方が合っていると強く実感しました。
【その後】CocoonでSWELL風サイト型トップページを作ってみた
あれからCSSやHTMLを大幅に調整し、Cocoonを使って、なんと憧れだったサイト型トップページを作ることができました！
サイト型トップページとは、Swellブログ風のデザインで、コンテンツをカテゴリ別に整理し、おすすめ記事や最新記事を横並びに表示して、一目で「どんなサイトなのか」がわかりやすいデザインのことです。
日記のように記事が時系列で並ぶブログ型に比べて、ポートフォリオのように整理された印象になります。
デザインはSimple is Bestを意識して仕上げていて、こんな雰囲気になっています。画像は横にスクロースクロールして下さい。
表示スピードについては、PCはぐんと改善しましたが、スマホは以前とあまり変わらず。ただ、地道にPageSpeed Insightsを見ながらエラーを修正しつつ、これから少しずつ高速化していこうと思います。
実はトップページを作る際に参考になったサイトさんがあり、コードをそのままコピペするだけで自分好みのデザインにカスタマイズできて、とても楽しかったです。やっぱり私には、CSSを勉強しながら自由にデザインを変えられるCocoonが一番合っていると実感しました。
Special Thanks
サイト型トップページを作る際に参考になったブログです。
▲ コピペするだけで簡単に使えるCSSコードが豊富で、コード内に丁寧な説明もありとても勉強になります。
▲ シンプルでおしゃれなデザインづくりのヒントをたくさんいただきました。コピペでそのまま使えるCSSコードもあり。
まとめ
SWELLは間違いなく素晴らしいテーマです。デザインは美しく、機能性も高く、スマホ表示の速さは特に魅力的です。ただ移行作業は想像以上に大変で、すでにサイトをカスタマイズしていた私の場合、まるでサイトを一から作り直すような覚悟が必要だと痛感しました。
私は最終的にCocoonに戻り、HTMLとCSSカスタマイズを重ねてトップページを整えることに成功しました。やってみると意外と簡単で、やっぱり自分にはCocoonがしっくりきます。高速化については、これからも少しずつ地道に改善していくつもりです。
ただし、これはあくまでもブログ初心者で、しかもサイトのバックアップ経験ゼロの私の場合の話です。ブログの環境や設定は人それぞれなので、大きなトラブルなく移行できる方もいると思います。
きちんとバックアップを準備していて、サーバーの容量にも余裕があるなら安心ですし、HTMLやCSSでの細かいカスタマイズよりも手軽にデザインを楽しみたい方であれば、SWELLに移行しても快適に使いこなせるはずです。
これからテーマ移行を考えている方は、どうか私のようにパニックにならないよう、準備とバックアップをしっかり整えてから挑んでくださいね。
コメント