子テーマでブログのデザインをリニューアルしました

先日土曜日の Co-Edo WordPress Meetup Tokyo子テーマのハンズオンに参加したのですが、それを機にこのブログも子テーマを使ってリニューアルしてみました。

これまでは(確か去年の春くらいから?)Circa というテーマを独自にカスタマイズした下のようなデザインを使っていました。

以前のデザイン。Circa テーマをベースにしたもの。
以前のデザイン。Circa テーマをベースにしたもの。

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

Fictive テーマをベースにした新しいデザイン。
Fictive テーマをベースにした新しいデザイン。

今回デザインを変えるにあたって、最初は Twenty Fifteen テーマをベースにしようかと思っていたのですが、実際やってみると色のアクセントの使い方がなかなか難しく他のテーマを探すことにしました。個人的な制約として WordPress.com に持っている英語サイトのテーマとデザインを揃えたいという点があったので、WordPress.com の無料テーマの中から Fictive を選んでみました。

子テーマリニューアルおすすめです

フルスクラッチからテーマを作ることは最近もうなくなってしまったのですが、子テーマ方式ならそんな私でも気軽にデザインを変えることができます。このサイトの場合、カラースキームはほぼいつも変わらないので CSS のカスタマイズ自体は1時間足らずで終わりました(ほぼ、色コード置換とフォントサイズの微調整のみ)。オリジナリティは出したいけどメンテナンスも含め手間はなるべく掛けたくない、という私のような人にはおすすめの方法です。

Fictive テーマの元の色合いなどは以下の画像のような感じ。アクセントカラーとヘッダー画像を変えただけでだいぶ雰囲気が変わりますよね。

カスタマイズ前の Fictive テーマ。
カスタマイズ前の Fictive テーマ。

リニューアルの際に活用したサイトなど

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

Comments

“子テーマでブログのデザインをリニューアルしました” への2件のフィードバック

  1. […] ベースの Automattic 製テーマを親テーマとした子テーマを使っています。こういう使い方としての子テーマを作るのは _s […]

  2. […] 前回このサイトのテーマを変えた時は、CSS でけっこう細かくベーステーマのフォントを上書きしていましたが、今回はフォントサイズとフォントファミリーをこのプラグインでコントロ […]

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください