WordPressテーマ「ADELLE」をカスタマイズしてみた

2016-03-18WordPress

こんにちは、とみーです。

このサイトはWordPressテーマADELLE を使用させていただいてます。
シンプル可愛いデザインを探していたところ、こんな素敵なテーマに巡り合えてとても幸せです

ですが、やっぱり自分らしさを出したい気持ちもありADELLEをカスタマイズすることにしました。

これからカスタマイズしようと考えている方は、カスタマイズ前に子テーマを作成することをお勧めします。

メリットや作成方法など、詳しくは子テーマを作成するのページをご覧ください。

WordPressのカスタマイズを楽に! 子テーマを作成しよう

こんにちは、とみーです。WordPressのテーマって本当に色々ありますよね。 とても気に入ったテーマがあって…

カスタマイズ前のスクリーンショットです。

adelle_customize01

カスタマイズは基本的にスタイルシートの変更です。外観 > テーマの編集 から変更可能です。

こちらの書籍にもADELLEのカスタマイズ例が載ってますので、参考にしてみてくださいね。

スポンサーリンク

ヘッダー/フッターの色を変更する

真っ黒だと主張しすぎなので、もっと可愛い色にしたいと思います。
色は#DA6272にしてますので、違う色にしたい場合は#DA6272を置き換えてもらえればOKです。

それと英字が全て大文字になるようになってますので、その設定を外します。

日付の背景色と表示形式を変更する

ヘッダー/フッターと同じく日付の背景色を合わせ、更に○月となっているので英語表記にしたいと思います。

※スタイルシート外をいじりますので、テーマのバージョンアップと同時に再編集する必要があります。

style.css

Adelle: content-list.php

↓ 変更

Adelle: content.php

↓ 変更

文字色とスタイルを変更する

そもそも真っ黒って目に優しくないらしいので、本文の文字色をダークグレー(#333)にします。
文字は読みやすいメイリオにしましょう。MacにはメイリオないのでOsakaを次点で指定しておきます。あと斜体好きじゃないので記事タイトルの斜体を外します。英語だと斜体かっこいいんですけどね。

というか記事タイトルがH2なのはどういうことかと。H1にしようそうしよう。

※スタイルシート外をいじりますので、テーマのバージョンアップと同時に再編集する必要があります。

style.css

Adelle: content.php

↓ 変更

Adelle: content-list.php

↓ 変更

Adelle: 固定ページテンプレート (page.php)

↓ 変更

リンクのマウスオンの色を変更する

リンクにマウスを乗せると色が変わるのですが、デフォルトは黒なので茶色に変更します。チョコレート色っていう名前の色です。名前は可愛らしいけど結構濃いめ。

あと、フッターの色を変えたことでリンク文字が見づらくなってしまったので、白に変更してリンクだと分かるように下線を引きます。

preタグの下に余白を追加する

コードを表示するのはpreタグを使っているんですが、下の段落の文字が枠にくっつくので余白を設定します。

ヘッダーの検索フォームを縦方向に中央揃えする

微妙に上寄りになっているので少し下にずらします。

blockquoteタグのフォントをもう少し小さくする

引用タグの文字が大きすぎます。。。1.2emが文字の大きさなので、もっと小さくしたい人はそこを変えてください。

見出しのスタイルを変更する

まずフォントのデフォルトをメイリオ、次点をOsaka(Mac用)にします。

個々の見出しの変更は以下で行います。随時変えていく予定なのでとりあえず親テーマからコピーしてきただけです。

「見出し 見本」でググると見本がいっぱい出てきますので、お好きなスタイルシートを{}の間にコピペしてください。
本文中の見出しにのみ適用したい場合は「.article 」を前につける必要があります。

子テーマスタイルシートまとめ

とりあえずこれで完成です! 使っていくうちに気になることがあったら都度変えていきます。

adelle_customize02

補足:サイトタイトルの文字色を変更する

私はタイトル画像を作成するつもりなので何もしてませんが、サイトタイトルの文字色を変えたい場合はこれをコピーしてお使いください。