simplicity2からLIQUID PRESS（リキッドプレス）のMAGAZINEに変えました

私がWordPress（以下 ワードプレス）でブログ運営を始めてから、もうすぐ1年になろうとしています。

全くの初心者だったので、何をどうすれば良いのか分からない状態でのスタートでした。

そんな素人の私が、なぜたった1年で大変そうな作業である「テーマ（テンプレート）の変更」に挑戦したのか、また作業は難しくなかったのかをお話しします。

最初の相棒はsimplicity2

レンタルサーバーを契約しワードプレスをインストールしてみたものの、標準として搭載されたテーマ（テンプレート）では固定ページを作成するのがやっとで、多くのブロガーさんのようなサイト形式に作ることができませんでした。

インターネットで検索し調査。
調べてみると多くのブロガーさんが利用していたのが、無料テーマのsimplicity2でした。

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

simplicity2は@MrYhiraさん作成の無料で配布されているテーマですが、無料とは思えないほどよく考えられたテーマ。

SEO対策が盛り込まれていたり、記事投稿のビジュアルエディタにはアンダーラインやBOXツールなどが利用しやすく配置されていたりと、初心者にとって助かる機能が充実しているテーマです。

そして一番のオススメポイントは、ユーザーがたくさんいるので、困ったことや分からないことがあったらインターネットで検索すれば直ぐに情報を探し出すことができること。

これには、本当に助けられました。

では、なぜそんな十分なテーマから違うテーマに変えようと思ったのか？

それは、ユーザー数が多いということは、似たデザインのサイトが多いということだから。
似たサイトが多いと、たまたま訪問した閲覧者の印象に残りにくいと思いました。

まだまだ勉強不足の私には、「HTML」「CSS」「php」とサイトをカスタマイズしていくにはスキル不足。
サイトデザインの印象と、私がブログで伝えたいテーマがしっくりこないのです。

「プチセレブ感が感じられない」
「もっと都会的なイメージにしたい」

勉強しながらCSSなどに手を加えるには、お金と時間がかかりました。

何か良い方法はないかと調べていくうちに、サイト運営が軌道に乗っているブロガーさんは、有料テーマを利用していることが多いことに気がつきました。

有料テーマはカスタマイズの必要性が少ないため、カスタマイズにかかっていた時間をブログの記事執筆にまわすことができるという情報まで。

「それでは、さっそく有料テーマにしようじゃないか」

そうと決まれば、有料テーマ探しです。
「ブログが軌道に乗っているブロガーさんと同じテーマにすれば良いかな」と気軽に考えていた私でしたが、よく調べてみたらその人たちと自分は違ったのです。

成功を発信しているブロガーさんにはアフィリエイターが多く、利用しているテンプレートは収益性を考えたテーマ。

有名アフィリエイターが作ったテーマを使っているサイトは、ほとんどがアフィリエイトサイトという印象を受けるものでした。

それらは、サイトにアクセスした時にロゴやタイトルがアニメーションなどで出てくるテーマや、ヘッダーに写真がないポータルサイト風のもの。フォントも基本仕様が可愛かったりと私のイメージとは違うもの。

また、私の周囲から聞く意見に「タイトルとかがホワンと出てくるサイトって、面倒くさくて表示される前に閉じちゃうんだ〜」というものが多くあるので避けたいことと、できればフォントは基本仕様がスタイリッシュなものだとイメージに合うかなと考えていました。

でも、いくら機能が充実していても何万円も投資はできません。
費用対効果が良いテーマを見つけようと、通勤電車の中でもスマホで調べまくりの毎日。
そう考え調べていたところに出会ったのが、リキッドデザイン株式会社が販売している「LIQUID PRESS」シリーズでした。

LIQUID MAGAGINE

LIQUID PRESSとは

”無料から使えるレスポンシブWordPressテーマ”
LIQUID PRESS（リキッドプレス）は、スマートフォン対応で直感的なカスタマイズが可能な、日本語対応レスポンシブWordPressテーマです。 企業サイト向け、オウンドメディア/ブログ向けなど、用途別に取り揃えています。
引用元：公式HPより

LIQUID PRESSは、リキッドデザイン社が配布しているワードプレステーマのシリーズ名です。(価格：情報は2018年6月のものです)

テーマ名	主な対象	概要	価格（税別）
LIGHT	メディア	シンプルなデザインと機能を追求した オウンドメディア/ブログ用テーマ	無料試用版あり ※試用期限ナシ・サポートナシ ¥3,600
MAGAZINE	メディア	本格的メディアを瞬時に構築 オウンドメディア/ブログ用テーマ	¥8,900
INSIGHT	メディア	コンテンツ分析βツールを搭載 オウンドメディア/ブログ用テーマ	¥8,900
SMART	メディア	オシャレなデザインと機能を追求した オウンドメディア/ブログ用テーマ	¥7,900
CORPORATE	ビジネス	多言語化可能な高品質企業サイト コーポレート/ビジネスサイト用テーマ	¥9,900
APP	アプリ	アプリLPを簡単作成/運用 アプリランディングページ用テンプレート	¥9,900
PORTFOLIO	ギャラリー	美しいポートフォリオサイト ポートフォリオ/ギャラリー用テーマ	¥6,900
LIQUID	ワードプレス 公式テーマ	レスポンシブ＋PC表示切替可能な 国産のWordPress公式テーマ	無料

私が選んだのは、「MAGAZINE」。

MAGAZINEには、次のような3つの特徴があります。

• レスポンシブプラスを標準搭載
  スマホでもPCでもユーザーのデバイスにあわせて自動的に表示が切り替えられる「レスポンシブ対応」に加え、ユーザー自身でPC表示とスマホ表示を切り替えることができるという優れもの。
  自分がスマホでネットサーフィンをしている時にPC画面を見たいと思うサイトがあるので、これは嬉しい機能です。
• カスタマイズを簡単にできる工夫
  テーマを設定するときは、WordPress管理画面のライブプレビュー機能で変更内容をプレビューしながらできます。
  まだカスタマイズに慣れていない初心者にオススメですが、初めてテーマを着せ替える中級者にもオススメ。
• Bootstrap4に対応している
  世界中で利用されている最新版のフレームワーク「Bootstrap4」を採用しているので、保守性・拡張性が確保されていて安心の品質。

今はスマホでの閲覧が50パーセントを超えているので、レスポンシブ対応は必須項目。
おまけにカスタマイズも簡単にできそう。
企業が販売しているため信頼感があるし、費用対効果も悪くない。

探し回った結果、2018年6月16日に「MAGAZINE」をダウンロード購入し、そのままサイトデザインをリニューアルしました。

テーマを変えるための事前準備

テーマを変えるのに、ただ「外観」→「テーマの変更」で行って良いものなのでしょうか。

変更するのは初めてなので、手探りで作業を進めます。

バックアップをとる

まずしなければならないのは、当然ですがバックアップです。

私はレンタルサーバーの有料バックアップ機能は契約していないので、プラグイン「BackWPup」を利用。

画面の中水色のボタンをクリックすると、ワンクリックでバックアップがとれます。

これで、もしもの時にも戻せるので安心。

カスタマイズしたCSSをテキストでコピー保存

当サイトでは、Googleアナリティクスやヨメレバ・カエレバなどのコードを追加していました。

「style.css」や「header- insert.php」「footer- insert.php」に追加したコードをMacBookの「メモ」にコピペし保存。
これで新しいテーマに着せ替えても、また直ぐに同じコードを貼れます。

あと、これは必要なかったのですが、プラグイン名の一覧と概要もコピーしておきました。
実際にテーマを着せ替えてみるとプラグインは引き継がれたままだったので、この作業はいらないようです。

テーマを変更

いよいよテーマの着せ替えに入ります。

「外観」（ハケ型のアイコン）から「テーマ」を選択。

下のような画面が表示されます。

上記画面の左上が、「MAGAZINE」です。

ライブプレビューでカスタマイズ

すでにMAGAZINEを有効化してから撮影したので、お隣のSimplicity2を例にすると、カーソルオンで「ライブプレビュー」ボタンが表示されます。そこをクリックすると、実際の画面を見ながらカスタマイズができます。

画像引用：公式HPより

トップページはスライドショーを挿入することもでき、強弱のある「リスト型」とアイキャッチを強調した「カード型」から選ぶことができます。

画像引用：公式HPより

私は、スライドショーを設定し、強弱のある「リスト型」にしました。

ページ下部にはプラグインを入れておくと「人気記事」が表示されたり、投稿記事には「関連記事」が自動的に表示されるので、サイト内での回遊性アップにつながると嬉しいですね。

SNSアカウントと連携させる

ライブプレビューのメニューにSNS連携メニューがあるので、初めての人でも簡単にできるようになっていました。

連携させると、直ぐにアイコンが表示されます。

私はTwitterとInstagramを設定しました。

また、最初から設定されている「SNSでフォローする」エリアには、アイキャッチ画像と画像から自動抽出した背景色でフォローエリアが表示されます。

私が一目惚れしたのは、「問い合わせボックス」。プロっぽい感じしませんか？

style.cssなどを貼り直す

MacBookの「メモ」に保存していたコードを、新しいテーマに貼り直します。

貼る場所も簡単に分かるようになっているので安心してください。

また、30日間の無料メールサポートがついてるのも日本の企業ならではですね。

完成！

作業にかかった時間は、なんと2時間足らず。

それでいて、満足感の高いデザインへと変更できました。

上記画像の左が旧デザインで、右が新しくしたデザインです。
（スマホで見ると上が旧デザインで、下が新デザイン）

どうでしょうか。少しスタイリッシュな感じになったでしょうか。

変えてから分かった困ったこと

ワードプレスのテーマを変更している人の多くがアフィリエイターさんなのもあり、MAGAZINEの情報はインターネットでほとんど出てきませんでした。

そのため、着せ替えてからわかったこともお話しします。

個別CSSでの追加ではなくて、Simplicity2のテーマ自体に組み込まれていたCSSがいくつかあったこと。

それは・・・

1. インフォメーションBOXで装飾
2. アンダーラインをツークリックで引く
3. フォントサイズをワンタッチで変更する
4. 外部サイトのURLをカード形式で表示させる

の4つに戸惑いました。
上記4つの問題については、プラグインを3つ導入することで解決。

1,については、「AddQuicktag」をインストールし、タグを生成し保存しておきました。

保存しておくとビジュアルエディタにプルダウンメニューで表示されるので、数種類作っておくと便利です。

2,3については、「TinyMCE Advanced」をインストール。

TinyMCE Advancedは、ビジュアルエディタをカスタマイズできるプラグインです。

これでアンダーラインやフォント変更アイコン、ついでにテーブルアイコンも表示させることができました。

4は、「Pz-LinkCard」を導入。

※2020年1月追記：グーテンベルグになってからは、埋込がブロックでできるようになったので、随時切替作業中。
「Pz-LinkCard」は外す見込みです。

Pz-LinkCardを有効化するとビジュアルエディタに「リンクカード作成」というボタンが表示されます。

クリックするとポップアップで入力画面が表れるので、そこにカードで表示させたいURLを入力するだけ。
簡単にカード表示させることができます。

ワードプレスのテーマを変えてみて

感想を一言で表現すると「簡単」。

テーマを変更するのは、もっと大変な作業なのかと思っていました。
ところが、実際に挑戦してみるとほんの数時間で変更できてしまい、あまりのアッサリさに拍子抜け。

しかし、これは自分にあったテーマを選んだということと、有料テーマならではの完成度の高さから得られた恩恵なのかもしれません。

MAGAZINEはブログに向いたデザインが簡単にできるテーマで、カスタマイズも分かりやすくなっています。
公式HPにはFAQもあり、困ることもなく着せ替えができました。

無料テーマで運営しているけれど、カスタマイズに時間がかかるというブロガーさんは、MAGAZINEを試してみませんか？
カスタマイズを気にせずに済むかもしれません。

また、もし自分のサイトに新鮮味を感じられなかったり、デザインがしっくりきていないというブロガーさんがいたら、有料も視野に入れたテーマ変更を検討してみてはいかがでしょうか。

ブログ作りは、楽しくてしているものだと思います。

自分自身が見て楽しいサイトを作れると良いですね。

今回私が購入した「MAGAZIN」は、下記の公式ページから購入できます。

日本語対応高品質WordPressテーマ

レンタルサーバーは、ワードプレスと相性の良いXserverを利用しています。 

気になる人は公式HPで確認してみてください。