賢威7で見出しをカスタマイズ!おしゃれデザイン6選【コピペ】

こんにちは、chiakiです。

 

 

賢威7のデフォルト状態は

シンプルかつおしゃれなデザインになっていますが、

 

「シンプル過ぎて少し寂しい・・・」

 

って、気持ちになってしまいますよね。

 

 

せめて、読者が注目する

記事内の雰囲気は変えていきたいところ…。

 

 

なので、今回は

記事内の雰囲気作り上げる

見出し』をカスタマイズして

サイトの印象をガラっと変化させていきましょう!

賢威7の見出しカスタマイズ方法

 

以下の見出しが

デフォルト状態のデザイン。

 

まあ、これでもOKっていえばOKなんですが…。笑

 

少しばかり寂しいですよね~。

(カスタマイズしないと、他の賢威ユーザーと被るし)

 

 

 

賢威7で、

これら見出しをカスタマイズするには、

 

WordPressのメニューから

『外観⇒テーマの編集⇒base.css』に、

進んでいただき『見出し』を検索して下さい!

  • Ctrl+Fで検索窓を出す
  • 『見出し』と入力し検索!!

 

上記の検索をすることにより

何千文字もあるCSSから

見出しを探さなくてよくなります。

 

 

そして、

『見出し』カテゴリーを見つけると、

コードを編集します。

  • 『見出し』カテゴリーを見つけコードを編集する

 

以下のコードが

賢威7の見出しコードです。

 

基本的に使用する見出しは、

『見出し2(h2)』『見出し3(h3)』『見出し4(h4)』なので、

 

それらを好きなように

カズタマイズしていきましょう!

 

 

見出し2を変更する時の注意点

しかし、

『見出し2』をカスタマイズする際に

大事な注意点があります。

 

以下(↓)のことをご覧下さい。

  • トップページの記事タイトルは『見出し2』で構成されている
  • 記事内の記事タイトルは『見出し1』で構成されている

 

このように、

トップページの記事タイトルは

『見出し2』で構成されているんですね。

 

 

変に『見出し2』をカスタマイズすると、

トップページの記事タイトルに影響が出ます。

(色が黒くなったりね!)

 

 

ので、『見出し2』に限っては

かる~くカスタマイズするだけの方が

個人的にはオススメです!

 

 

僕も使用している

角を丸くするカスタマイズは

以下(↓)のコードをご使用下さい。

 

 

これだけでも尖った雰囲気が消えて

柔らかい仕上がりになります^^

 

見出しデザイン6選

 

では、おしゃれ見出し6選の

デザインとCSSコードをご紹介していきます。

 

コピペするだけでOKになっていますので、

これらコードをご自身のCSSに貼りつけて下さい^^

 

 

また、サイズは

全て『見出し3』用に合わせています。

 

『見出し4』で使用させる場合は

ご自身でサイズを変更して下さい^^

 

 

↓↓↓コード↓↓↓

 

 

 

↓↓↓コード↓↓↓

 

 

 

↓↓↓コード↓↓↓

 

 

 

↓↓↓コード↓↓↓

 

 

 

↓↓↓コード↓↓↓

 

 

 

↓↓↓コード↓↓↓

 

以上が、

おしゃれ見出し6選でした。

 

自分だけの

オリジナリティー溢れるブログ構築を

一緒に楽しんでいきましょう^^

 

 

いかがでしたでしょうか?ご参考になれば幸いです。

 

関連記事

  1. 賢威7で『続きを読む』をオリジナル画像にカスタマイズする方法!

  2. WordPressのCSS編集後に反映されない時の対策

  3. 賢威7でグローバルメニューの色を変更【文字・背景・マウスオーバー】

  4. 賢威7のグローバルメニューを最上部に固定&スクロール追従させる方法

  5. WordPressでCSS編集前の注意点!エラーの対策をしよう

  6. 賢威7でアイキャッチ画像のサイズをカスタマイズする方法!

  7. 賢威7でファビコンをたった1分でカスタマイズ!

  8. 賢威7でグローバルメニューを設置する方法について解説

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。