> デザインが綺麗でおしゃれ!評判のSWELLをレビュー!

Cocoonの「見出しだけ」をカスタマイズ|他のh3タグに影響させない方法

Cocoon見出しのカスタマイズ方法

Cocoonの「h2、h3見出しだけ」をカスタマイズする方法を解説!(h4以下はデフォルトを使います)

通常、「見出し」をカスタマイズする場合、h2タグ、h3タグをカスタマイズするのですが、その時に問題が発生します。

Cocoonサイドバーの見出しもh3になっているので、サイドバーにも適用されてしまうんです。

サイドバーは個別にカスタマイズしている場合、重複してしまってオカシな見た目に・・・。

そんなトラブルも回避できる方法なので、ぜひ見ていってくださいね。

たった2ステップ、コピペするだけでオッケー。

WordPressテーマおすすめランキング

Cocoonの使い方マニュアル

テーマ名WordPressテーマ「Cocoon」
価格無料
開発者わいひらさん(@MrYhira
タップできる目次

Cocoon「h2、h3見出しだけ」のカスタマイズ2ステップ

見出しカスタマイズ

Cocoonの見出しをカスタマイズする手順は下記の通りです。

  1. 見出しデザインのコードをコピー
  2. テーマファイルエディター(style.css)にコードを貼り付ける

コードをコピペするだけなので、簡単ですよ。

ステップ①:見出しデザインのコードをコピー

では、Cocoon見出しデザインを紹介します。

当サイトの見出しに似ているデザインにしました。

見出し1

使いたい場合は、コードをコピーして使ってください。

/* 見出し2 */
.article h2{
background:none;
padding: 0;
}
.article h2{
  padding: 0.8em;/*文字周りの余白*/
  color: #393f4c;/*文字の色*/
  background: #f5f5f5;/*背景の色*/
  border-left: solid 5px #778899;/*左線 太さ 色*/
}

/* 見出し3 */
.article h3{
    border: none;
    padding: 0;
}
h3{
  position: relative;
  padding: 0.25em 0;
}
.article .entry-content >h3:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(119, 136, 153), transparent);
  background: linear-gradient(to right, rgb(119, 136, 153), transparent);
}

見出しだけをカスタマイズするには、h3の部分に .entry-content > を追加するのが重要ポイントです。

これをしないと、サイドバーなど他のh3にまでカスタマイズの効力が及んでしまいますので・・・。

ここでは1つのパターンのみの紹介となりましたが、これ以外の見出しデザインにしたい場合は、下記の記事で好きなデザインを探してみて下さい。

ステップ②:テーマファイルエディターに貼り付ける

下記の通りに、先ほどコピーしたコードを「テーマファイルエディター」に貼り付ければ完了です。

STEP
「外観」→「テーマファイルエディター」をクリック
テーマファイルエディター
STEP
 (style.css)にコードを貼り付けて「ファイルを更新」
コードの貼り付け

以上です。

まとめ|Cocoonの「見出しだけ」をカスタマイズ!

今回は、Cocoon「見出しだけ」をカスタマイズする方法を解説しました。

デフォルトから変更することで、オシャレな見た目をゲットできます。

あわせて、サイドバーの見た目なども変更しておくのがオススメ!

コピペするだけなので、ぜひ使ってみてくださいね。

【参考】SWELLのサイドバーは初めからオシャレ

ちょっとカスタマイズが面倒だなぁ・・・と思っているあなたへ。

当サイトでも使用しているSWELLは、CSSなどのコードを使わなくてもオシャレです。

他の細かいところまでオシャレなので、見た目にこだわりたいなら、超絶おすすめなWordpressテーマ。

ブログの見た目をサクッとオシャレに指定方は、一度SWELLの公式サイトを覗いてみてくださいね。

\ Cocoon開発者もイチオシする有料テーマ /

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

タップできる目次
閉じる