こちらのブログではSimplicityテーマを利用しております。
本当に使いやすいです!

Simplicityのスッキリとしたデザインは飽きるものではありませんが、いかんせん人気テーマで利用している方が多いため、カスタマイズしてデザインを変えてみたいと思います。
実際に姉妹サイトで使っていたデザインです。

before

atu-simplicity-header-before

見出し1(h1)は特に手を加えていません。
サイトイメージに合わせてフォントも変更しているため、印象がかなり異なりますね。

aftrer

atu-simplicity-header-after

変更内容

  1. 素材を用意し、サーバアップします。
  2. SimplicityのCSSを修正します。

WordPressの管理画面から外観>テーマの編集を選択し、style.cssを編集します。

※Simplicityを直接編集するとアップデートが難しくなってしまいますので、子テーマSimplicity childを利用すると良いでしょう。

CSSの内容と、ちょっとだけ説明

body {
  font-family: "Hiragino Mincho ProN","HG明朝E","MS P明朝", serif;
  letter-spacing: 150%;
}
.article h2 {
  border:none;
  margin: 40px -29px 20px;
  background:url(/wp-content/uploads/yyyy/mm/h2.png) no-repeat 16px 46px;
  font-size:24pt;
  letter-spacing: 240%;
}
.article h3 {
  border:none;
  background:url(/wp-content/uploads/yyyy/mm/h3.png) no-repeat left bottom;
}
.article h4 {
  border:none;
  margin-top:30px;
  margin-bottom:15px;
  padding:8px 0 12px 0;
  background:url(/wp-content/uploads/yyyy/mm/h4.png) no-repeat left bottom;
}
  • フォントは明朝体で設定
  • h2~h4まで、親テーマでborderが設定されていますが、そのままですと画像+borderになってしまうため、border:none;で上書きします。
  • 画像の繰り返しを避けるためにno-repeat設定
  • h2は画像と文字の重なりを調整したかったため、「左から16px、上から46px」といった位置指定を行いました
  • h3~h4は、文字数が多く改行が発生した時にも文字が画像と重ならないように画像位置をbottomで設定。(ただし未検証)

リンク

素晴らしいテーマ

Simplicity
http://wp-simplicity.com/

素材

FREE LINE DESIGN
http://free-line-design.com/

の素材を利用いたしました。ありがとうございました!

スポンサーリンク
ad_336
コメントの入力は終了しました。