~コピペOK~Cocoonの見出しを簡単カスタマイズ【追加CSS】がちょー便利!

Cocoon

こんにちは。

BEGINNER NET(ビギナーネット)のいけだです。

 

見出しは記事の中でも、パッと目を引く重要な要素ですよね。

今回はCocoonの見出しをコピペでちょー簡単に変える方法をお伝えします。

 

※この記事は、Cocoonをご利用中の方向けに作成しています。
他のテーマをご利用の場合は、セレクタを変更してください。

 

Cocoonのインストール方法やおすすめの理由はこちら。

WordPressのおすすめテーマCocoonをダウンロードして、おしゃれなデザインに変えてみよう
大人気の無料テーマSimplicityの制作者わいひらさんが、2018年、新たに公開されたのが【Cocoon(コクーン)】です。「こんなにすごいのに無料でいいの!?」とびっくりするぐらいすばらしいので、とてもおすすめです!ダウンロード手順を一から解説します。

 

こんな見出しが作れます

ー通常のCocoonの見出し(変更前)ー

Cocoonのデフォルトの見出し

 

ー変更後ー

 

見出しはh1~h6までありますが、よく使うのはh1~h3ぐらいまでなので、今回はh1~h3のみ設定をします。

 

今回はすべてコピペでできるようにこちらの見出しだけで説明します。

一度やってみたら、やり方がわかってくるかと思います。

 

ステップアップして、「他の見出しデザインに変更してみたい!」

という方のためにこちらも用意しましたので参考にしてみてください。

【コピペOK】Cocoonの見出しカスタマイズ~ステップアップ編~
前回はちょー簡単に見出しを変える方法をご紹介しました。 今回は、そのステップアップ編ということで、 「もっと他の見出しがいいな~」 という方向けに、いろんな見出しデザインを用意してみました。 こんな見出しが作れま...

 

よくあるやり方をチラッと見てみましょう

見出しのように、ウェブサイトの見た目は【CSS】というものを使って作っています。

 

見出しを変えたいときは、このCSSを変更する必要があるんですね。

 

よく見かける手順は、

【外観→テーマの編集→スタイルシート(style.css)の編集】

すると、こんな項目が表示されます。

 

え..え..こわくないですか?

 

詳しい人ならわかるかもしれないですが、

初心者だと「どうしよう..」ってなっちゃいますよね。

 

そして、勇気を出して先に進むと待っているのはこんな感じのやつです。

style.cssの編集

 

え?どこに書き込めばいいの?

レベルたかーーーーっっっ!

 

他にも、FTPソフトを使用してテーマをダウンロードして、

変更したものをアップロードするというやり方もあります。

 

FTPソフト?なんか手順がむずかしそう…

 

 

というあなたに!

私が一番簡単だと思うやり方をお伝えします!

 

~始める前に必ず確認~
今有効化されているのが親テーマではなく、【Cocoon子テーマ】であることを確認してくださいね!【外観→テーマでCocoon childが有効ならOK】

 

追加CSSって何?

今回はWordPressに入っている【追加CSS】という機能を使います。

 

追加CSSだとライブプレビューを見ながら変更できる

 

追加CSSを使うと、このようにライブプレビューを見ながら変更することができます。

 

追加CSSに書き込むと、元のCSSに上書きされることになります。

でも、元のCSSが消えてしまうわけではないので安心してくださいね!

 

もし変更前に戻したければ、戻したい項目の追加CSSを削除すれば元に戻すことができます。

 

 

見出しを変更する手順

1.WordPressのダッシュボードにログインします。

Wordpressのダッシュボードにログイン

 

2.【外観】をクリック。

3.【カスタマイズ】をクリック。

外観をクリックしてカスタマイズをクリックする。

 

4.【追加CSS】をクリック。

追加CSSをクリック

 

5.以下のコードをすべてコピーしてください。


.article h1 {
padding: 0.7em;
color: #010101;
background: #e5f3ee;
border-bottom: solid 6px #5dae93;
}

.article h2{
padding: 0.6em;
background: #eff5f3;
border-left: solid 6px #5dae93;
}

.article h3{
padding: 0.4em 0.8em;
color: #494949;
background: transparent;
border-left: solid 8px #a6c7e6;
border-top:none;
border-right:none;
border-bottom:none;
}


 

6.追加CSSに貼り付けます。

追加CSSに貼り付ける

 

7.【公開】をクリック。

公開をクリック

 

 

おつかれさまでした!いかがでしたか?

今回は、簡単に見出しを変更するやり方をお伝えしました。

 

ステップアップ編では、もっとカスタマイズができるように解説しています。

ぜひ参考にしてみてください。

【コピペOK】Cocoonの見出しカスタマイズ~ステップアップ編~
前回はちょー簡単に見出しを変える方法をご紹介しました。 今回は、そのステップアップ編ということで、 「もっと他の見出しがいいな~」 という方向けに、いろんな見出しデザインを用意してみました。 こんな見出しが作れま...