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

初心者まま

cocoonのサイドバーをオシャレにカスタマイズしたい

今回は、ブログ初心者さんのお悩みを解決する記事を書きました！

本記事では、以下の内容を解説していきます。

本記事の内容

サイドバー見出しデザインのコード配布
カスタマイズの方法

今回はワードプレスの無料テーマcocoonのサイドバーの見出しデザインをカスタマイズする方法をご紹介していきます！

今回ご紹介するデザインは5つ。
サイドバーをオシャレにしたい方は是非チェックしてみてくださいね♪

【cocoon】サイドバー見出しのカスタマイズ【2STEP】
STEP①：サイドバー見出しデザインのコードをコピー
STEP②：テーマファイルエディターに貼り付ける
Cocoonサイドバー見出しをカスタマイズしてオシャレ度アップへ！

【cocoon】サイドバー見出しのカスタマイズ【2STEP】

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

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

好きなデザインのコードをコピペするだけなので、初心者の方でも簡単にカスタマイズできます。

STEP①：サイドバー見出しデザインのコードをコピー

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

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

見出しパターン①：サイドライン

.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 #fe843f;
}
.sidebar h3::before {
left: 0;
}
.sidebar h3::after {
right: 0;
}
}

見出しパターン②：点線

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

見出しパターン③：グラデーション

.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%);
}

見出しパターン④：白文字枠

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

見出しパターン⑤：白文字枠

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 #fe843f;
}