副業/仕事

超簡単!Cocoonの見出しをおしゃれにカスタマイズする方法

cocoonの見出しをカスタマイズ初心者でも超簡単にできた

多くのブロガーが、ワードプレスを使用していると思います。

そして、Cocoonという無料テーマを使っている人が多いでしょう。私のブログでも、Cocoonを使用しています。

今回は、cocoonの見出しをおしゃれにカスタマイズする方法をご紹介します。

CSSの知識のない私でも簡単にできたので、ぜひ参考にしてみください。

この記事はこんな人におすすめ
  • Cocoonの見出しをおしゃれにカスタマイズしたい人
  • HTML、CSSの知識がない人
スポンサーリンク

デフォルトの見出し

すでにCocoonを使っている方ならご存じかと思いますが、初期の見出しはこんな感じです。

cocoonの初期の見出し
cocoonの見出し

私のブログのテーマ色がオレンジなのもありますが、とても派手ですね。デザインはシンプルですが、これでは落ち着いて記事が読めません。

また、多くのブロガ―がCocoonを使用しています。

そのため、初期の見出しをのままだと、一目でCocoonを使っているとわかってしまいます。

それでも問題はないのですが、もう少しおしゃれに見せたいですよね。おしゃれなブログは、ユーザーにも好印象を持たれます。

では、どのようにカスタムするのかご紹介していきますね。

見出しをおしゃれにカスタマイズする方法

見出しをおしゃれにカスタマイズする方法

見出しのデザインを、カスタマイズする方法をご紹介します。

このブログを書いている私は、CSSを少し勉強して途中で諦めた者です。そんな私でも、簡単にカスタマイズすることができました。

1.見出しの初期化

見出しをカスタマイズする前に、既存の見出しを初期化しなくてはいけません。まずは、その手順をご説明します。


手順1:ワードプレスにログインし、左メニューの「外観」から「カスタマイズ」ボタンをクリックします。

カスタマイズに移動する画面



手順2:「追加CSS」をクリック。

追加CSSをクリック

すると、何も書かれていないエディターが開かれると思います。すでにサイトのデザインを変えている方は、コードが書かれているはずです。


手順3:CSSのページを開いたら、見出しを初期化するコードを入力します。(コピペOK)

/*見出し初期化*/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6

{
padding: 0;
background:none;
border: none;
line-height: normal;
}

h1(見出し1)は使わないので、今回はh2~h6だけ初期化します。おそらく、多くの方がh2~h4までしか使わないと思います。

そのため、使わない見出しのコード「.article h〇」の部分は、消すと良いでしょう。

2.使いたい見出しのコードを貼る

見出しにはいろいろなデザインがあります。今回は、サルカワさんのデザインサイトを参考にさせていただきました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。




手順1:まずは、使いたいデザインをサイトから選び、コピーします。

サルカワさんのサイトからコードをコピー
引用サイト: サルワカ | サルでも分かる図解説明マガジン




手順2:初期化コードの下にコピーを貼り付け、見出しの色や文字色を設定してください。

コードをコピーして貼り付ける
見出しの色を変更

コピーするまえに、「. article h2{ }」というコードを入力しておきましょう。「{}」の間に、コードを貼りつけます。




実際に入力したコードがこちらです。

/*見出しデザイン*/
/*見出し2*/
.article h2{
 padding: 0.4em 0.5em;/*上下 左右の余白*/
 color: #383838;/*文字色*/
 background: #fff4ea;/*背景*/
 border-left: solid 5px #ff823a;/*左線*/
}

これを、h3~h6まで行います。


/*見出し3*/
.article h3{
 border-bottom: solid 3px #490700;
 position: relative;

.article h3:after {
 position: absolute;
 content: ” “;
 display: block;
 border-bottom: solid 3px #ff823a;
 bottom: -3px;
    width: 30%;}

/*見出し4*/
.article h4 {
 position: relative;/*相対位置*/
 line-height: 1.4;/*行高*/
 display: inline-block;
}

.article h4:before, h4:after {
 position: relative;
 font-family: “Font Awesome 5 Free”;
 display: inline-block;
 font-size: 1.0em;
 color: #ff823a;
}

.article h4:before {
 content:”\f053″;/*アイコン種類*/
 padding-right: 0.5em
}

.article h4:after {
 content:”\f054″;/*アイコン種類*/
 padding-left: 0.5em
}

/*見出し5*/
.article h5{
 padding: 0.4em 0.5em;/*上下 左右の余白*/
 background: #fff4ea;/*背景*/
 border-left: solid 5px #ff823a;/*左線*/
}

/*見出し6*/
.article h6 {
 padding: 0.25em 0.5em;/*上下 左右の余白*/
 background: transparent;/*背景透明に*/
 border-left: solid 5px #ff823a;/*左線*/
}

ほぼコピペなので、ここまでは簡単にできると思います。見出しのデザインが豊富なので、選ぶのに時間を取るかもしれませんね。




では、当サイトの新しい見出しがこちらです。

新しく設定した見出し

当ブログのテーマ色が明るいオレンジなので、凝ったデザインではなくシンプルなものを選びました。

スポンサーリンク

3.見出しの余白を整える

上記で終わりにしても問題ありませんが、見出しと本文の間がかなり空いています。

見出しの余白が無修正の場合




私のブログでは不格好になってしまうので、「margin」というコードを使って修正しました。

margin : 2em 0em -0.7em 0em

左の数字から、上右下左の余白を整えています。私は上を広くし、下の余白を狭くしました。



その結果がこちら。

見出しの余白を修正した結果

だいぶ近づきましたね。これを、h6まで行います。

見出しの完成形

これで、見出しのカスタマイズが完了しました。けっこう、詰め詰めなかんじになりましたね。




では、完成したコードがこちらです。

/*見出し初期化*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6

{
padding: 0;
background:none;
border: none;
}

/*見出しデザイン*/
/*見出し2*/
.article h2{
 padding: 0.4em 0.5em;/*上下 左右の余白*/
 color: #383838;/*文字色*/
 background: #fff4ea;/*背景*/
 border-left: solid 5px #ff823a;/*左線*/
 margin : 2em 0em -0.7em 0em;/*余白*/
}

/*見出し3*/
.article h3{
 border-bottom: solid 3px #490700;
 position: relative;
 margin : 2em 0em -0.7em 0em;/*余白*/
}

.article h3:after {
 position: absolute;
 content: ” “;
 display: block;
 border-bottom: solid 3px #ff823a;
 bottom: -3px;
    width: 30%;}

/*見出し4*/
.article h4 {
 position: relative;/*相対位置*/
 line-height: 1.4;/*行高*/
 display: inline-block;
 margin : 2em 0em -0.7em 0em; /*余白*/
}

.article h4:before, h4:after {
 position: relative;
 font-family: “Font Awesome 5 Free”;
 display: inline-block;
 font-size: 1.0em;
 color: #ff823a;
}

.article h4:before {
 content:”\f053″;/*アイコン種類*/
 padding-right: 0.5em
}

.article h4:after {
 content:”\f054″;/*アイコン種類*/
 padding-left: 0.5em
}

/*見出し5*/
.article h5{
 padding: 0.4em 0.5em;/*上下 左右の余白*/
 background: #fff4ea;/*背景*/
 border-left: solid 5px #ff823a;/*左線*/
 margin : 0em 0.3em 0.2em 0em;/*余白*/
}

/*見出し6*/
.article h6 {
 padding: 0.25em 0.5em;/*上下 左右の余白*/
 background: transparent;/*背景透明に*/
 border-left: solid 5px #ff823a;/*左線*/
}

とても長くかんじると思いますが、ほぼコピペなので作業時間はそれほどでもありません。

ブログの雰囲気と色さえ定まっていれば、サクサクいけるでしょう。

私のブログは、見出しを変えたことで優しい雰囲気になりました。これでブログを見に来てくれた方も、落ち着いて読んでいただけるでしょう。

初心者におすすめの見出しデザインサイト3選

ここでは、おしゃれな見出しデザインを掲載しているおすすめのサイトをご紹介します。


・CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

今回私が参考にさせていただいたサイトです。シンプルなものから、可愛いものまで一通りそろっています。

とくに強いこだわりがなければ、こちらのサイトでカスタマイズできるでしょう。

サルワカ | サルでも分かる図解説明マガジン




・シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

シンプルな見出しが多いサイトです。シンプルなものが多いので、少し色を変えるだけでクールな見出しを作れるでしょう。

ハウツー系のブログにおすすめです。

NxWorld




・CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】

可愛い見出しにしたい方は、こちらのサイトがおすすめです。水玉模様や花柄のデザインがあります。

私もこちらのサイトを参考にしようと思いましたが、ブログのテーマに合わなかったので断念しました。

第0版 | PCとインテリアが好きなアラサーOLの雑多なブログ

まとめ:見出しをカスタマイズしたら自然とCSSの知識が入ってくる

CSSの知識が身につく

見出しのデザインを変えていると、自然とCSSの知識が頭にインプットされます。

他のサイトからHTMLをコピーしてくるだけでは、ブログのバランスがおかしくなります。

そのため、微調整をしなくてはなりません。その過程で、なんとなくこのコードはここのことだろうな、というのがわかってきます。

私は一度CSSの勉強を諦めた身です。そんな私でも、こうしておしゃれな見出しに変えることができました。

やってみると意外と面白いので、みなさんもぜひ、おしゃれなブログにカスタマイズしてみてください。

コメント