Simplicityの見出しをカスタマイズしよう。コピペでできる5つのデザインを紹介

  • このエントリーをはてなブックマークに追加
  • 7

mockDrop_iMac on a table

SimplicityはWordpress初心者でも簡単にカスタマイズできますし、SEO対策も抜群で最高のテンプレートなのですが、カスタマイズ方法を紹介しているサイトがあまりありませんよね。

なので今回はSimplicityの見出しのカスタマイズ方法をご紹介します。基本的にはCSSにコピペするだけなので、初心者の方でも簡単にカスタマイズができると思います。

その他のカスタマイズ方法はこちらを参照してね。

コピペで簡単!Simplicityのカスタマイズまとめ。
このサイトはWordpressを使っています。テンプレートはSimplicityです。これま...

Simplicityの見出しをカスタマイズしよう

シンプルな見出し

カスタマイズ後はこんな感じになります。

見出し

CSSはこちら。

可愛い見出し

女性向けの可愛い見出しにしてみました。

可愛い見出し

CSSはこちら。

h2の吹き出しの左右に空白を入れたい場合は、h2の部分を下記のコードに書き換えてください。

オシャレな見出し

カスタマイズ後のデザインはこれです。h2がデニムみたいでカッコイイですね。

おしゃれな見出し

CSSはこちら。

リボンの見出し

最近よく見かけるリボン風の見出しです。個性を出したい人におすすめ。

リボン風

個性的な見出し

ちょっと変わった見出しです。h4の頭文字が若干大き目になってます。インパクトがあっておしゃれですね。

個性的な見出し

CSSはこちら。

ちなみに、この見出しの場合はメイン部分の枠を消したが綺麗だと思います。Simplicityは初期設定のままだと、メイン部分に区切り線が引いてありますよね。
メイン
このままだと、h2のデザイン上、若干窮屈なので、枠をとってしまいましょう。CSSにこのコードを追加してください。

枠を消すとこんな感じになります。
メイン
トップページの枠は残して、記事ページの枠だけを消したい場合はこちら。

Simplicityの見出しをカスタマイズする際の注意点

さて、いくつか見出しのパターンを紹介しましたが、気に入ったものはありましたか?カスタマイズする場合は、Simplicityの子テーマに追加するだけでOKです。ついでに、初心者の方のためにいくつか補足しておきます。

h2で紹介しているデザインをh3、h4で使いたい場合

h2のリボンの見出しをh3で使いたいな~、とか、h2で紹介されている吹き出しのデザインをh4で使いたい!と思う方もいると思います。

基本的に、h2、h3、h4の数字を書き換えればOKです。具体的にはこんな感じ。

また、Simplicityのh3、h4には初期設定のままだと下線が引いてあります。下線なしのデザインにしたい場合は、こちらを追加します。

色を変更したい場合は、#●●●の部分を変えてください。カラーコードはこちらを参考にしてくださいね。

配色のパターンに迷う方はこちらを参考にしてください。

h3は関連記事・コメント欄にも反映させる

Simplicityの構造上、本文中の見出しだけでなく、関連記事とコメント欄の見出しもh3に指定されています。こんな感じです。

h3

CSSで説明すると、こうなります。

なので、h3のデザインを変更すると、コメント欄や関連記事の見出しも変わるので注意してください。コメント欄や関連記事のデザインを変えたくない場合は、
#comment-area h3,←コメントの見出し
#related-entries h3←関連記事の見出し

この部分を省いてCSSを変更するといいですね。一緒の方が統一感があるとは思いますが・・・

参考にしたサイト

最後に見出しをカスタマイズした際に参考にしたサイトをご紹介します。

サイトのカスタマイズはやっていくうちに自然に覚えます。ちょっと詳しくなりたいな~という方は、1週間くらい勉強すればオシャレなサイトが作れるようになりますよ。

サイト作りが好きな方は、CSSやHTMLの基礎から学んでみるといいかもしれません。




  • このエントリーをはてなブックマークに追加
date-entry
トップへ戻る