前回、おしゃれな無料ワードプレステーマをいくつか紹介しました。
その中でも、特に気に入った”Xeory Base”にテーマを変更してみたので、詳細をレビューしたいと思います！
目次
XeoryBaseとは？
前回も少し紹介しましたが、コンテンツマーケティングについて勉強したい方は一度はたどり着くサイト、“バズ部”が無料で提供しているWordPressテーマです。
前回の記事はこちら！
サイト型テーマの「XeoryExtension」と、ブログ型テーマの「XeoryBase」があります。（ブログに「XeoryExtension」を利用するのももちろんOK！）
当ブログでは、「XeoryBase」の方がマッチしていたので、テーマをXeoryBaseに変えてみた感想についてお伝えします。
テーマ変更ビフォーアフター
Before
First
以前のテーマは無料テーマの“First”こちらもシンプルで使いやすいテーマです。
一部CSSでカスタマイズしているのと、ソーシャルボタンや人気記事一覧などはプラグインを使用して実現しています。
After
Xeory Base
XeoryBase適用後のトップページ。どちらも白基調のシンプルなテーマなので、あまり変わらないと思われるかもしれません。
次の項目では、XeoryBaseへ変更して変わったこと、WordPressテーマを変更する際の注意点などもあわせて紹介します。
WordPressテーマ変更時の注意点
現在、ブログ開設約半年ほどですが、開設してからテーマを変えたことはありませんでした。
「テーマを変えたら、これも変えないといけない」といったところも、忘れないうちに紹介したいと思います。
最初に子テーマ化
WordPressを運用するにあたって、style.cssや、function.phpに変更を加える必要は結構出てきます。
詳細については参考ページへのリンクを貼りますが、インポートした「xeory_base」のフォルダー内のCSS、PHPを変更したとしても、テーマのアップデートがあれば変更は元に戻ってしまいます。
そのため、「xeory_base_child」などの名称で“子テーマ”を作ってカスタマイズすることで、テーマのアップデートによる影響を受けないようにする必要があります。
具体的な手順はこちらをどうぞ！
WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など
今のところは、「style.css」「single.php」「header.php」を子テーマにコピーしてカスタマイズしています。
CSSは必要な部分のみを子テーマで記載した方が良いか？
style.cssを子テーマ化する際に、「丸ごとコピーして追記、変更する」か「必要なブロックだけ、変更を記述するか」というのは結構悩みどころだと思います。
初めてのテーマカスタマイズ時は後者の方法を選択していたのですが、変更箇所が増えていくにつれてどこに何が記載されているのかわからなくなってくるので、今回は「style.cssを丸ごとコピーして追記、変更する」方法としました。
こちらの方が、親テーマとの比較で変更箇所を確認できて楽だと思います。（ホントはGitHubとか使ってバージョン管理した方がいいのか…）
アドセンス広告コード記載部分の引き継ぎ
テーマを変えたからと言ってGoogleアドセンスなどのコードが変更になることはありません。
しかし、single.phpやheader.phpにアドセンスコードを記載している場合は、新しいテーマの方にもコードをコピーする必要があります。
Googleアナリティクスのコードについて
以前のテーマはアナリティクスの解析コードをheader.phpに記載していましたが、Xeoryでは、管理画面にアナリティクスのコードを入力する部分があるため、そこに入力するだけでOKです！
メタディスクリプション、キーワードも入れられます
このあたりの引き継ぎが問題なくできれば、今までと同じ条件での運用が可能となります。
次に、初期設定について紹介します。
Xeoryの初期設定
Xeoryは、カスタマイザーでカスタマイズする項目が少なめです。
ほとんどの設定は、ダッシュボード上の初期設定から行います。
先ほどの項目で紹介した、「メタディスクリプション」などの設定に加えて、サイトロゴや各SNSアカウントの設定も初期設定から行います。
以前はシェアボタンを表示させるプラグインにソーシャルブックマーキングライトを使用していたのですが、Xeoryでは最初からシェアボタンが搭載されています。
また、プラグインを使用していた時は各ボタンの間隔が揃わず悩んでいたのですが、Xeoryのソーシャルボタンは綺麗に整っているため大満足です！
間隔がきれいに揃う！
All in One SEO Packについて
こちらのプラグインはSEO効果を高めるため、ブログ開設当初から使用しています。
Xeoryでは、最初から同等の機能を備えており、公式でもこのプラグインは“不要”と案内されています。
● こちらのテーマにはAll in One SEO Packは不要ですか？
しかし、OGP画像出力などの設定もあるため、少し様子を見てからプラグインの停止を検討しようと思ってます。
プラグイン有効だとmetaタグが重複するのが少し心配…
パンくずリスト
オシャレなパンくずリスト
サイト内で自分がいる位置を示すパンくずリストも最初から搭載されていて、設定の必要はありません！
オシャレなので特にカスタマイズの必要もなさそうですね。
以前は、BreadcrumbNavXTを使用して実現していましたが、こちらのプラグインも使用する必要がなくなりました。
これから変更を加えたい部分
見出しのデザイン
フォントサイズ、マージンが調整されていてとても見やすい
Xeoryの見出しは、フォントサイズやマージンが適切に調整されていて、そのままでもとても見やすいです。
少しだけサイトの雰囲気に合わせて、文字色とデザインを検討したいと思います！
Webフォントの適用
以前はGoogle fontsの「Quicksand」と「NotoSans」をインポートしていました。
Xeoryでの運用に慣れたら、再度Webフォントを導入して違いを確認する予定。
現在GoogleFontsでは、「早期アクセス」として、試験的に日本語フォントの提供を行なっているようなので、こちらも試してみようと思います。
Webフォントの適用については、こちらもどうぞ！
解決したい課題
ロゴがぼやける（解決済）
300px × 60px
Xeoryのロゴ画像は、300×60ピクセルが推奨サイズとなっています。
Retinaディスプレイへの対応を考えて、2倍の600×120ピクセルで作成してアップロードしたのですが、どうしてもぼやけてしまいます。
もちろんPNG画像です。
せっかくテーマのデザインが美しいのに、ロゴがぼやけてしまうとチープなイメージになってしまいますね。
どのみち300×60では物足りなかったので、header.phpに変更を加えて600×120の表示となるよう設定して改善しています。詳細な手順は今後紹介します！
アップロードサイズ1200×240、表示サイズ600×120
アイキャッチ画像の大きさ
トップページ
Xeoryのトップページは、アイキャッチ画像とmoreタグで区切った部分までの文章が抜粋表示される方式です。
これは非常に見やすくて良いのですが、個別の記事に入ったところで、アイキャッチ画像が拡大されず小さいままなのが気になってます。
記事の読み始めに拡大されて出てほしい…
おそらく、single.phpやfunction.phpを触ることになりそうなので調べてみます。
まとめ
XeoryBaseは無料テーマですが、難しいカスタマイズなどしなくてもオシャレ度はグッと増します。
シンプルライフ・ミニマリスト系のブログには是非オススメのテーマです！
見出しのフォントサイズやマージンが適切なため“文章が読みやすくなった”というのが私が一番感じた印象です。
テキストメインの記事を書いていて視認性にお悩みの方は、是非XeoryBaseを適用してみてください！すごく読みやすくなります。
これからもう少し細部のカスタマイズを考えたいと思います。よい情報があればまた記事にします。
それでは、よいブログライフをお送りください^^
![<span class="title">私がミニマリストになるまで[最終回]</span>](https://simple-lifelog.com/wordpress/wp-content/uploads/2022/12/IMG_5717-150x150.jpg "<span class=\"title\">私がミニマリストになるまで[最終回]</span>")
コメントを残す