【Cocoon】コピペで簡単!見出しのカスタマイズ 方法

こんな方に読んで欲しい
  • 見出しを自分らしくカスタマイズ したい
  • でもカスタマイズ はなるべく簡単に済ませたい
みぃ
みぃ

みんなのサイトを覗いているとお洒落な見出しを使ってて羨ましい。

ばう
ばう

自分でコードを書ければいいけどそのために勉強するのもね。。

この記事ではコードの知識不要で見出しをカスタマイズする方法をお伝えしていきます。

1.Cocoonでの初期設定の見出し

見出しH2〜H6の初期設定はこのようになっています。

シンプルで使いやすく、どのサイトでも馴染むものになっています。

あえて代える必要もない見やすい見出しですが、

これを自分のサイトにより合った見出しにカスタイズしていきます。

2.初期設定の見出しをリセットする

カスタマイズ する前に設定されている見出しのデザインをリセットします。

ばう
ばう

リセットできるおまじないだよ!

/* 見出しカスタマイズ(リセット) */
/* H2 */
.article h2{
background:none; /* 背景色をリセット */
padding: 0;
}
/* H3 */
.article h3{
border:none; /* 枠線をリセット */
padding: 0;
}
/* H4 */
.article h4{
border:none;
padding: 0;
}
/* H5 */
.article h5{
border:none;
padding: 0;
}
/* H6 */
.article h6{
border:none;
padding: 0;
}
/* 見出しカスタマイズ(リセット)終わり */

このコードをコピーし、

外観テーマエディター内の、

赤枠内に貼り付けます。

これにより見出しはこのように何も設定されていない状態に戻ります。

ばう
ばう

カスタマイズ しがいのある状態になったね♪

みぃ
みぃ

いよいよカスタマイズね!

捕捉

コード内に

/* ○○ */

という表記があったと思います。

/* と*/で挟んだ○○はCSSに反映されず、自分がわかりやすいようにメモとして残すことができます。

僕が記載したコード内の、

/* 背景色をリセット */

などは何をしているかわかりやすいように書いてあるだけなので消しても問題ないです。

ただし今後Cocoonの様々な箇所をカスタマイズ する場合、都度コードを追加していくので後で見返した際にどこのカスタマイズ をしたコードかわかるように/* ○○ */を自分なりに記載しておくことをおすすめします。

3.見出しをカスタマイズ する(コピペだけ!)

さてカスタマイズ する準備は整いました。

みぃ
みぃ

でも自分でコードなんて書けないよ。。

ばう
ばう

大丈夫、かっこいい見出しのコードを公開してくれている方がいるからコピペするだけだよ!

ここで紹介するのは、@saruwakakunさんが公開しているサイトです。

とてもきれいなまとまったサイトで今後のサイト作りにも非常に参考になると思います。

このサイトで気に入ったデザインを探してそのコードをコピペさせていただきましょう。

みぃ
みぃ

ありがとう、サルワカくんさん!

ばう
ばう

ウェブサイト構築の勉強はコピペして自分のものにしていくことの繰り返しだよ。

4.見出しをカスタマイズ する(詳細)

みぃ
みぃ

でもコピペだけと言われてもどこにどうコピペするのよ!

ではどのように設定すればいいか具体的に見ていきましょう。

①コードをコピーする

コードは先ほど紹介した、

から拝借します。

ばう
ばう

魅力的な見出しばっかりで迷ってしまう。。

例えば上記のような見出しを設定する場合。

コードを表示をクリックすると、

このようなコードが表示されます。

赤枠のところをコピーします。

②コピーしたコードを貼り付ける

コピーしたコードを先ほどリセットのコードを書いた外観テーマエディター内に貼り付けます。

貼り付ける場所は、

このように設定したい見出しのリセットコードの下に貼り付けます。

ばう
ばう

僕は既にH2〜H4を設定しているので、H5を設定していますが皆さんは設定したい見出しのリセットコードの下に貼り付けてね。

③一箇所だけ訂正する

ただ、このままだと、

このようになってしまいます。

みぃ
みぃ

あれれ、見出しの前に白い丸が表示されてないわよ。。

この原因は98行目の

h1:before {

にあります。

ここで指定しなければいけないのはh1ではなく、86行目に記載されている.article h5となるので、

.article h5:before{

に書き換えます。

すると、

のように設定できます。

みぃ
みぃ

あら簡単。余裕ね!

ばう
ばう

。。次に背景色や文字色を変更する方法を案内するよ。

④文字色と背景色を変更してみる

文字色を指定しているのは、

color: #505050;

です。

この「#505050」が色を決めているカラーコードになるのでここを好みの色に代えていきます。

同じように背景色は、

background: #dbebf8;

です。

みぃ
みぃ

カラーコードはどこで確認すればいいの?

ばう
ばう

僕が利用しているサイトを紹介するよ♪

色々なサイトがあるので気に入らなければご自身で「カラーコード」で検索してみてください。

例えば文字色と背景色を、

/* H5 */
.article h5{
border:none;
padding: 0;
color: #f5f5f5;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #e95295;/*背景色*/
vertical-align: middle;
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

.article h5:before{
  content: '●';
  color: white;
  margin-right: 8px;
}

このように変更すれば、

こんな見出しにすることができます。

注意

そのほかにも自分でコードが書ければ色々とカスタマイズ できます。

が、カスタマイズ は凝りすぎると時間ばかりかかってしまいます。

ひとまずコピペして自分の好みの色に代えるくらいでやめておくことをおすすめします。

既に記事で利用している見出しは後から変更しても変更した見出しに反映されます。

まずは記事をいっぱい書いて落ち着いたらじっくりとカスタマイズしましょう!

みぃ
みぃ

自分のオリジナルの見出しができるとワクワクするよね!

ばう
ばう

自分のサイトのデザインを意識しつつ、見やすさを重視して何より楽しんでカスタマイズしよう♪

5.【追記】タイトルをカスタマイズする場合

タイトルを編集する際は、なんて指定すればいいの?

というご質問をいただきましたので、追記しておきます。

タイトルは、

.article h1.entry-title{

}

で指定できます。

後は{ }にお好みのコードをコピペしてカスタマイズしてみてください。

6.【追記】bauの設定している見出しコード

bauさんの見出しのコードをおしえてください!

というありがたいお言葉もいただいたので下記に全て公開します!

/* 見出しカスタマイズ */
/* H1 */
.article h1.entry-title{
	padding:12px 12px 12px 12px;
	    background: #f4f4f4;
    border-left: solid 10px #4682b4;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
	color: #708090;
}
/* H2 */
.article h2{
background:none;
padding: 0;
 position: relative;
  background: #f5f5f5;
  padding: 5px 20px 5px 40px;  
font-size: 20px;  
color: #778899;
}
.article h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #e95295;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -0.5em;
  top: 50%;
border-radius: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  box-shadow:0 5px 15px -5px rgba(0,0,0,.8);/*下線*/
}
/* H3 */
.article h3{
	border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
padding: 5px 20px 5px 5px;/*文字の上下 左右の余白*/
font-size: 20px;  
  color: #778899;/*文字色*/
  background: #f5f5f5;/*背景色*/
  border-left: solid 10px #e95295;/*左線*/
}
/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
padding: 5px 20px 5px 0px;
font-size: 20px;  
 color: #778899;/*文字色*/
border-bottom: solid 3px #eebbcb;
  position: relative;
}
.article h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #e95295;
  bottom: -3px;
  width: 40%;
}
/* H5 */
.article h5{
border:none;
padding: 0;
color: #f5f5f5;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #e95295;/*背景色*/
vertical-align: middle;
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}
.article h5:before{
  content: '●';
  color: white;
  margin-right: 8px;
}
/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}
/* 見出しカスタマイズ終わり */
ばう
ばう

長くて申し訳ない。。皆さんのサイトに合う見出しの参考になれば嬉しいです!

コメント

タイトルとURLをコピーしました