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

Cocoonサイドバーの見出しデザインをカスタマイズ【5パターン】

Cocoonサイドバー見出し

Cocoonサイドバーの見出しデザインをカスタマイズする方法を解説!

今回は、サイドバー見出しデザインを5つ紹介します。

Cocoonサイドバーの見出しデザインをオシャレにしたい方は、是非チェックしてみてくださいね。

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

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

Cocoonの使い方マニュアル

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

Cocoonサイドバー見出しのカスタマイズ2ステップ

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

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

好きなデザインのコードをコピペするだけなので、簡単。

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

では、いくつかCocoonサイドバーの見出しデザインを紹介します。

好きなものがあったら、コードをコピーして使ってください。

見出しパターン①

見出し1
.sidebar h3 {
    background: none;
    font-size: 18px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 26%
    border-top: 3px solid #696969;
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}

なお、このデザインについて参考にした記事は下記です。

見出しパターン②

見出し2
.sidebar h3 {
  border-bottom:2px dotted #191970;/*下線の太さ、種類、色*/
  background:transparent;/*背景を透明に*/
  padding:10px 0 5px 3px;
}

なお、このデザインについて参考にした記事は下記です。

見出しパターン③

見出し3
.sidebar h3 {
    background: none;
    padding: 0;
    font-size: 16px;
    letter-spacing: 2px; 
}
.sidebar h3:first-letter {
    font-size: 1.5em;
}
.sidebar h3:after {
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
    background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}

なお、このデザインについて参考にした記事は下記です。

見出しパターン④

見出し4
.sidebar h3 {
    background-color: #d2b48c;
    padding: 7px 20px;
    margin: 40px 0 20px;
color: #fff;
 border-radius: 7px ;
	font-size: 1em;
}

見出しパターン⑤

見出し5
  h3.widget-sidebar-title {
    color: #333333;                     
    background: #ffffff;                
    padding: 0.25em 0.6em;          
    border-top: none;                   
    border-right: none;               
    border-bottom: none;              
    border-left: solid 6px #355998;     
  }

なお、このデザインについて参考にした記事は下記です。

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

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

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

以上です。

まとめ|Cocoonサイドバー見出しをカスタマイズしてオシャレ度アップへ!

今回は、Cocoonサイドバーの見出しデザインをカスタマイズする方法を解説しました。

デフォルトから変更することで、ぐっとオシャレな印象になりますね。

サードバーがオシャレになって気分上々!

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

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

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

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

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

ぜひ、一度SWELLの公式サイトを覗いてみてくださいね。

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

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

コメント

コメントする

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

CAPTCHA

タップできる目次
閉じる