当サイトはアフィリエイト広告を利用しています

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

2015-10-03Web制作

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

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

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

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

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

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

adelle_customize01

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

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

WordPressではじめる かわいいウェブサイト
created by Rinker
¥2,530 (2024/12/08 02:19:15時点 Amazon調べ-詳細)

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

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

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

/*************************************************************************************************************************
Screen smaller than 680px
*************************************************************************************************************************/
@media all and (max-width: 680px) {

  /* Overall */
  .footer {clear: both; overflow: hidden; margin: 0 auto; width: 100%; color: #fff;}

  /* .nav */
  .mobile-nav {display: block; width: 100%; margin: 0 auto; background: #fff;}
  .tinynav {display: block; width: 100%; margin: 0 auto; background: #fff;}
  .nav {position: relative; width: 96%; background: #DA6272; display: inline-block; padding: 2%; margin-top: 40px; clear: both; line-height: 1em; text-transform: none;}
  .nav ul {display: none; list-style: none;}

  /* .footer */
  p.footer-copy {background: #DA6272; padding: 20px; clear: both; font-size: 0.9em; overflow: hidden; margin: 0 auto;}
  p.footer-copy .footer-credit {}

}

/*************************************************************************************************************************
Screen between 681px and 1024px
*************************************************************************************************************************/
@media all and (min-width: 681px) and (max-width: 1024px) {

  /* Overall */
  .footer {clear: both; overflow: hidden; margin: 0 auto; width: 100%; color: #fff;}

  /* .nav */
  .mobile-nav {display: none;}
  .tinynav {display: none;}
  .nav {position: relative; width: 98%; display: inline-block; background: #DA6272; padding: 0 1%; margin-top: 40px; clear: both; line-height: 1em; text-transform: none;}
  .nav ul {list-style: none; max-width: 500px; display: inline-block;}
  .nav a {display: block; padding: 14px 10px; color: #fff;}
  .nav a:hover {text-decoration: underline; color: #fff;}
  .nav ul ul a {display: block; padding: 14px 10px; position: relative; background: #DA6272;}

  /* .footer */
  p.footer-copy {position: relative; background: #DA6272; color: #fff; padding: 10px 30px; clear: both; font-size: 0.9em; overflow: hidden; margin: 0 auto;}
  p.footer-copy .footer-credit {display: block; float: right; width: 55px; height: 11px; background: url('images/footer_credit.png') no-repeat 0 0; text-indent: -9999px; margin-top: 5px;}

}

/*************************************************************************************************************************
Screen larger than 1025px
*************************************************************************************************************************/
@media all and (min-width: 1025px) {

  /* Overall */
  .footer {clear: both; overflow: hidden; margin: 0 auto; width: 1020px; color: #fff;}

  /* .nav */
  .mobile-nav {display: none;}
  .tinynav {display: none;}
  .nav {position: relative; width: 970px; display: inline-block; background: #DA6272; padding: 0 25px; margin-top: 40px; clear: both; line-height: 1em; text-transform: none;}

	.nav:before,
	.nav:after {border: 1.6em solid #DA6272; content: ""; display: block; position: absolute; bottom: 0; top: 0; z-index: 1;}
	.nav:before {border-left-color: #fff; border-right-width: 1.4em; left: 0;}
	.nav:after {border-left-width: 1.4em; border-right-color:#fff; right: 0;}

  .nav ul {list-style: none; max-width: 780px; display: inline-block;}
  .nav a {display: block; padding: 14px; color: #fff;}
  .nav a:hover {text-decoration: underline; color: #fff;}
  .nav ul ul a {display: block; padding: 14px; position: relative; background: #DA6272;}

  /* .footer */
	p.footer-copy :before,
	p.footer-copy :after {border: 1.8em solid #DA6272; content: ""; display: block; position: absolute; bottom: 0; top: 0; z-index: 1;}
	p.footer-copy :before {border-left-color: #fff; border-right-width: 1.4em; left: 0;}
	p.footer-copy :after {border-left-width: 1.4em; border-right-color:#fff; right: 0;}

  p.footer-copy {position: relative; background: #DA6272; color: #fff; padding: 10px 40px; clear: both; font-size: 0.9em; overflow: hidden; margin: 0 auto;}
  p.footer-copy .footer-credit {display: block; float: right; width: 55px; height: 11px; background: url('images/footer_credit.png') no-repeat 0 0; text-indent: -9999px; margin-top: 5px;}

}

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

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

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

style.css

.article .post-date {float: left; margin-right: 10px; background: #DA6272; color: #fff; width: 45px; padding: 18px; line-height: 1em; font-size: 1.2em; text-align: center; text-transform: none;}

Adelle: content-list.php

<?php echo get_the_date( 'M' ) ?><br />

↓　変更

<?php echo get_post_time( 'M' ) ?><br />

Adelle: content.php

<?php echo get_the_date( 'M' ) ?><br />

↓　変更

<?php echo get_post_time( 'M' ) ?><br />

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

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

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

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

style.css

.article {margin-bottom: 50px; padding-bottom: 20px; background: url('images/break.gif') repeat-x bottom center; overflow: hidden; clear: both; color: #333;&nbsp;font-family: "メイリオ", Osaka;}
.article h1.post-title {font: 1.8em "メイリオ", Osaka, 'Lora', Serif; margin: 10px 0 5px 0; line-height: 1.2em;}
.article h1.post-title a {color: #333;}

Adelle: content.php

<h2 class="post-title entry-title">（中略）</h2>

↓　変更

<h1 class="post-title entry-title">（中略）</h1>

Adelle: content-list.php

<h2 class="post-title entry-title" itemprop="headline">（中略）</h2>

↓　変更

<h1 class="post-title entry-title" itemprop="headline">（中略）</h1>

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

<h2 class="post-title entry-title" itemprop="headline">（中略）</h2>

↓　変更

<h1 class="post-title entry-title" itemprop="headline">（中略）</h1>

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

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

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

a:hover {color: #4F392F;}

p.footer-copy a{color: #fff; text-decoration: underline;}
p.footer-copy a:hover{color: #4F392F;}

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

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

pre {overflow: auto; font-family: 'courier new', courier, monospace; font-size: 0.85em; padding: 10px;  margin-bottom:20px;  border: 1px solid #ccc;}

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

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

/*************************************************************************************************************************
Screen between 681px and 1024px
*************************************************************************************************************************/
@media all and (min-width: 681px) and (max-width: 1024px) {

  /* .header form */
  .header-form {clear: both; overflow: hidden; position: absolute; top: 8px; right: 20px;}
}

/*************************************************************************************************************************
Screen larger than 1025px
*************************************************************************************************************************/
@media all and (min-width: 1025px) {

  /* .header form */
  .header-form {clear: both; overflow: hidden; position: absolute; top: 8px; right: 40px;}
}

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

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

.article blockquote {font: 1.2em 'Lora', Serif; display: block; clear: both; margin: 20px 0; padding: 20px 20px 20px 60px; background: #f8f8f8 url('../adelle/images/blockquote.gif') no-repeat 20px 25px; font-style: italic; color: #888;}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {line-height: 1.2em; margin-bottom: 15px; font-family: "メイリオ", Osaka, 'Montserrat', Sans-serif; font-weight: 400; word-wrap: break-word; -ms-word-wrap: break-word;}

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

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

h1 {font-size: 1.6em; color: #000;}
h2 {font-size: 1.4em; color: #000;}
h3 {font-size: 1.2em; color: #333;}
h4 {font-size: 1.2em; color: #333;}
h5 {font-size: 1em; color: #555;}
h6 {font-size: 1em; color: #555;}

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

adelle_customize02

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

/*
Template:		adelle
Theme Name:		adelle-child
Author:			tommy
Version:		1.0
*/

@import url("../adelle/style.css");

pre {overflow: auto; font-family: 'courier new', courier, monospace; font-size: 0.85em; padding: 10px; margin-bottom:20px; border: 1px solid #ccc;}

/* .article */
.article {margin-bottom: 50px; padding-bottom: 20px; background: url('images/break.gif') repeat-x bottom center; overflow: hidden; clear: both; color: #333; font-family: "メイリオ", Osaka;}
.article h1.post-title {font: 1.8em "メイリオ", Osaka, 'Lora', Serif; margin: 10px 0 5px 0; line-height: 1.2em;}
.article h1.post-title a {color: #333;}
.article .post-date {float: left; margin-right: 10px; background: #DA6272; color: #fff; width: 45px; padding: 18px; line-height: 1em; font-size: 1.2em; text-align: center; text-transform: none;}

/* .article misc */
.article blockquote {font: 1.2em 'Lora', Serif; display: block; clear: both; margin: 20px 0; padding: 20px 20px 20px 60px; background: #f8f8f8 url('../adelle/images/blockquote.gif') no-repeat 20px 25px; font-style: italic; color: #888;}

/* hgroup */
h1,
h2,
h3,
h4,
h5,
h6 {line-height: 1.2em; margin-bottom: 15px; font-family: "メイリオ", Osaka, 'Montserrat', Sans-serif; font-weight: 400; word-wrap: break-word; -ms-word-wrap: break-word;}
h1 {font-size: 1.6em; color: #000;}
h2 {font-size: 1.4em; color: #000;}
h3 {font-size: 1.2em; color: #333;}
h4 {font-size: 1.2em; color: #333;}
h5 {font-size: 1em; color: #555;}
h6 {font-size: 1em; color: #555;}

/* LINK */
a:hover {color: #4F392F;}

/* .footer */
p.footer-copy a{color: #fff; text-decoration: underline;}
p.footer-copy a:hover{color: #4F392F;}

/*************************************************************************************************************************
Screen smaller than 680px
*************************************************************************************************************************/
@media all and (max-width: 680px) {

  /* Overall */
  .footer {clear: both; overflow: hidden; margin: 0 auto; width: 100%; color: #fff;}

  /* .nav */
  .mobile-nav {display: block; width: 100%; margin: 0 auto; background: #fff;}
  .tinynav {display: block; width: 100%; margin: 0 auto; background: #fff;}
  .nav {position: relative; width: 96%; background: #DA6272; display: inline-block; padding: 2%; margin-top: 40px; clear: both; line-height: 1em; text-transform: none;}
  .nav ul {display: none; list-style: none;}

  /* .footer */
  p.footer-copy {background: #DA6272; padding: 20px; clear: both; font-size: 0.9em; overflow: hidden; margin: 0 auto;}
  p.footer-copy .footer-credit {}

}

/*************************************************************************************************************************
Screen between 681px and 1024px
*************************************************************************************************************************/
@media all and (min-width: 681px) and (max-width: 1024px) {

  /* Overall */
  .footer {clear: both; overflow: hidden; margin: 0 auto; width: 100%; color: #fff;}

  /* .header form */
  .header-form {clear: both; overflow: hidden; position: absolute; top: 8px; right: 20px;}

  /* .nav */
  .mobile-nav {display: none;}
  .tinynav {display: none;}
  .nav {position: relative; width: 98%; display: inline-block; background: #DA6272; padding: 0 1%; margin-top: 40px; clear: both; line-height: 1em; text-transform: none;}
  .nav ul {list-style: none; max-width: 500px; display: inline-block;}
  .nav a {display: block; padding: 14px 10px; color: #fff;}
  .nav a:hover {text-decoration: underline; color: #fff;}
  .nav ul ul a {display: block; padding: 14px 10px; position: relative; background: #DA6272;}

  /* .footer */
  p.footer-copy {position: relative; background: #DA6272; color: #fff; padding: 10px 30px; clear: both; font-size: 0.9em; overflow: hidden; margin: 0 auto;}
  p.footer-copy .footer-credit {display: block; float: right; width: 55px; height: 11px; background: url('images/footer_credit.png') no-repeat 0 0; text-indent: -9999px; margin-top: 5px;}

}

/*************************************************************************************************************************
Screen larger than 1025px
*************************************************************************************************************************/
@media all and (min-width: 1025px) {

  /* Overall */
  .footer {clear: both; overflow: hidden; margin: 0 auto; width: 1020px; color: #fff;}

  /* .header form */
  .header-form {clear: both; overflow: hidden; position: absolute; top: 8px; right: 40px;}
  .header-text {width: 100px; border: 1px solid #bbb;}

  /* .nav */
  .mobile-nav {display: none;}
  .tinynav {display: none;}
  .nav {position: relative; width: 970px; display: inline-block; background: #DA6272; padding: 0 25px; margin-top: 40px; clear: both; line-height: 1em; text-transform: none;}

	.nav:before,
	.nav:after {border: 1.6em solid #DA6272; content: ""; display: block; position: absolute; bottom: 0; top: 0; z-index: 1;}
	.nav:before {border-left-color: #fff; border-right-width: 1.4em; left: 0;}
	.nav:after {border-left-width: 1.4em; border-right-color:#fff; right: 0;}

  .nav ul {list-style: none; max-width: 780px; display: inline-block;}
  .nav a {display: block; padding: 14px; color: #fff;}
  .nav a:hover {text-decoration: underline; color: #fff;}
  .nav ul ul a {display: block; padding: 14px; position: relative; background: #DA6272;}

  /* .footer */
	p.footer-copy :before,
	p.footer-copy :after {border: 1.8em solid #DA6272; content: ""; display: block; position: absolute; bottom: 0; top: 0; z-index: 1;}
	p.footer-copy :before {border-left-color: #fff; border-right-width: 1.4em; left: 0;}
	p.footer-copy :after {border-left-width: 1.4em; border-right-color:#fff; right: 0;}

  p.footer-copy {position: relative; background: #DA6272; color: #fff; padding: 10px 40px; clear: both; font-size: 0.9em; overflow: hidden; margin: 0 auto;}
  p.footer-copy .footer-credit {display: block; float: right; width: 55px; height: 11px; background: url('images/footer_credit.png') no-repeat 0 0; text-indent: -9999px; margin-top: 5px;}

}

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

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

.header-title {color: #000;}

スポンサーリンク

おすすめ記事セレクション

ADELLE,CSS,PHP,WordPress,カスタマイズ