先日土曜日の Co-Edo WordPress Meetup Tokyo で子テーマのハンズオンに参加したのですが、それを機にこのブログも子テーマを使ってリニューアルしてみました。
これまでは(確か去年の春くらいから?)Circa というテーマを独自にカスタマイズした下のようなデザインを使っていました。

今回のデザインは、Fictive というテーマを親テーマにしました。このブログを始めて以来ずっと使っているピンクとベージュ系の色調は保ちつつ、ガーベラの花のモチーフではなくて別の画像を使ってみました。

今回デザインを変えるにあたって、最初は Twenty Fifteen テーマをベースにしようかと思っていたのですが、実際やってみると色のアクセントの使い方がなかなか難しく他のテーマを探すことにしました。個人的な制約として WordPress.com に持っている英語サイトのテーマとデザインを揃えたいという点があったので、WordPress.com の無料テーマの中から Fictive を選んでみました。
子テーマリニューアルおすすめです
フルスクラッチからテーマを作ることは最近もうなくなってしまったのですが、子テーマ方式ならそんな私でも気軽にデザインを変えることができます。このサイトの場合、カラースキームはほぼいつも変わらないので CSS のカスタマイズ自体は1時間足らずで終わりました(ほぼ、色コード置換とフォントサイズの微調整のみ)。オリジナリティは出したいけどメンテナンスも含め手間はなるべく掛けたくない、という私のような人にはおすすめの方法です。
Fictive テーマの元の色合いなどは以下の画像のような感じ。アクセントカラーとヘッダー画像を変えただけでだいぶ雰囲気が変わりますよね。

リニューアルの際に活用したサイトなど
- Hextractor: CSS をペーストまたは URL で指定すると含まれる色を抽出してくれるサイト。
- Creative Market: サイドバーのヘッダーに使った花柄のベクター画像をこちらで購入しました。
- WordPress.com Themes: ログインすると無料テーマをダウンロードできるようになっています(Fictive は WordPress.org のテーマディレクトリにもあります)。
コメントを残す