言葉の使い方を中心にブログ運営・フリーランスに関することなど、ライティングの仕事に関わる情報を広く紹介するブログです。

Kotoログ

過去24時間の人気記事

ブログリニューアル

テーマを「WING(Affinger5)」に変更しました

投稿日:

スポンサーリンク

<この記事を読むのに必要な時間は約 8 分です>

このブログは昨年の6月からWordPressのテーマに「Luxeritas」を適用していましたが、本日より「Affinger5(WING)」に変更しました。

そこで、ここではテーマを「WING」に変更した理由と、テーマの変更にあたって行ったカスタマイズについてまとめます。

 

「WING」への変更にあたって行ったカスタマイズ

それでは、以下にテーマを「WING」に変更した理由とそれにあたって行ったカスタマイズについて説明します。

 

テーマを変更した理由

上述したように、このブログは一年ほど前からテーマに「Luxeritas」を適用していて、今年に入って月間20万PVを達成するなど順調にアクセス数を伸ばすことができました。

「Luxeritas」は無料とはいっても多機能・高速でSEOにも強いとされているテーマではありますが、今後新しいサイトをいくつか立ち上げたいと思っていたので、それらを作成・運営するために有料テーマの購入を考えるようになりました。

いろいろ候補がある中でも、Affingerは「SEOに強い」ということでいろんなサイトでおすすめテーマとして挙げられていて、以前から気になっていたテーマです。

そして、ちょうど今のタイミングで考えてみた時に、新しいバージョンの「Affinger5」が発売されたばかりということや複数のサイトに適用することもできるなどのことから今回購入を決めました。

早速このブログでも適用することにして、まずはテスト環境にインストールしてカスタマイズをしてみましたが、色やレイアウトを簡単に調整することができ使い勝手が良く、購入して良かったと思っています。

 

カスタマイズでこだわった点

次にカスタマイズする上でこだわった点ですが、まず「WING」を適用すると、テーマの管理画面から基本的なカラーやデザインパターンを選択することができるようになっていて、そこから基本となるカラーやデザインを選択するだけである程度の見栄えのサイトを作ることができます。

ただ、模範的なカラーやデザインにすると、今までのデザインとは雰囲気が大きく変わってしまいます。

それもどうかと思ったので、大幅にイメージを変えることなく、もともと「Luxeritas」を適用していた時の雰囲気を引き継ぐような感じで、シンプルな配色やデザインにすることを重視してカスタマイズを行いました。

 

見出し(h2~h4)のデザイン

上記のことを踏まえて、見出しのデザインや配色をどうしようかと考えたところ、以前のテーマでは以下のような色・デザインにしていたので、それと近い雰囲気になるようにしたいと思いました。

そして、テスト環境でいろいろと試してみた結果、ほとんど違和感のないデザインにすることができました。

とはいえ、これにはCSSをまったくいじっておらず、管理画面の「外観」⇒「カスタマイズ」からカラーコードを入力し、テーマで用意されていたスタイルのなかから「囲みドットデザイン」というものを選択するだけで簡単に現在の状態にすることができました。

 

背景画像

次に背景画像ですが、「Luxeritas」を適用していた時と同じように「Toptal Subtle Patterns」というサイトからダウンロードした画像を使用しています。

このサイトからは、およそ470種類ものシンプルなデザインの背景画像を無料でダウンロードすることができ、どんなデザインでも使いやすくおすすめです。

注意ポイント

個人・商用での利用可とされていますが、サイトのFAQによるとクレジット表記(CSSやHTMLにコメントを追記)が必要だと書かれています。

公式サイト

 

全体の配色

サイト全体の配色については、ヘッダーやフッターなどの広いところは白や黒、タイトル上に表示するカテゴリやサイドバーのタイトルなどの細かい部分はブルー系を中心とした淡い色でまとめました。

これらもデザインや色の指定はカスタマイザーからカラーコードの入力やスタイルの選択をするだけで簡単に行うことができました。

 

タイトル・メニューのセンター寄せ

そして次にヘッダー部分ですが、デフォルトでは左寄せになっていたサイトのタイトルとナビゲーションメニューをセンター寄せにしました。

サイトタイトルについては、「Affinger5管理」から「ヘッダーエリアをセンタリング」にチェックを入れてセンター寄せにすることが可能です。

また、ナビゲーション部分については、以下のページを参照してCSSにコードを追記してセンター寄せになるようにしました。

 

まとめ

以上、WordPressテーマを「WING」へ変更するにあたって行ったカスタマイズについてまとめました。

このブログでテーマを変更するのは2度目ですが、今回はほとんどCSSへの記述をしなくても希望のデザインにすることができました。

また記事を書くためのクイックタグが充実しているので、デザインやレイアウトを工夫して読みやすい記事に仕上げるということもしやすく、楽しく記事を書けそうです。

テーマを変えたことによるSEO効果なども含めて、今後どのようになるか注目してみたいと思っています。

-ブログリニューアル

Copyright© Kotoログ , 2018 All Rights Reserved.