WordPress cocoon 見出しを変更したい コピペでおしゃれにカスタマイズ

ワードプレス見出し ブログ

ワードプレス コクーン。簡単!見出しのカスタマイズ

こんにちは。

ブログのテクノロジーの「と」です。

このサイトはワードプレスの無料テーマ「cocoon」を使わせてもらっています。

今回は「cocoon」の見出しの変更の仕方を紹介します。

「cocoon」公式サイトです

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
スポンサーリンク

デフォルトの見出し

「cocoon」の見出しはモノトーンでシンプルです。

これは、ブログを作ったばかりの人にはすごくいいと思います。

シンプルだからこそどんな内容にも合いますね。

しかし、記事が増えてきて自分のブログのカラーと合わなくなってきたのなら見出しのデザインを変更してみましょう。

少し変化が欲しくなってきました。

見出しはどういう仕組みで表示されているのか?CSSについて

コピペで簡単というタイトルだから読んだのに、CSSなんて知りたくないよと言う方は飛ばしてもらって構いませんがコピペするものもCSSですから仕組みを知っておいたほうが理解しやすいと思いましたので先に触れておきます。

コクーンの見出しのデフォルトのCSSを貼っておきます。

CSSは最初全くわからなくて怖くて触れませんよね。

でも簡単なものから少しずつ覚えていくと、なんとなく読めるようになってきます。

本で読んだほうが理解しやすいタイプの人は本で学びましょう。

本は眼にも優しいですし、心が落ち着く感じがしますね。

僕はこの本で勉強しました。

下に貼り付けたCSSを見ると一行目に「article」 h1からh6までありますね。

articleとは新聞や雑誌の記事。論説という意味です。独立した記事であることを示すそうです。

見出し1から6までをどう表示するかをCSSで指定しています。

意味わからないし面倒くさいなら見なくても大丈夫です。

ちょっと興味あるかも?という人は見てください。

良く見ると簡単なことしか書いてありませんから。

  1. .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
  2. line-height: 1.25;
  3. font-weight: bold;
  4. }
  5. .article h3, .article h4, .article h5, .article h6 {
  6. margin-top: 35px;
  7. margin-bottom: 20px;
  8. }
  9. .article h4, .article h5, .article h6 {
  10. font-size: 20px;
  11. padding: 6px 10px;
  12. }
  13. .article h2 {
  14. font-size: 24px;
  15. margin-top: 40px;
  16. margin-bottom: 20px;
  17. padding: 25px;
  18. background-color: #f3f4f5;
  19. }
  20. .article h3 {
  21. border-left: 6px solid #777;
  22. border-right: 1px solid #ccc;
  23. border-top: 1px solid #ccc;
  24. border-bottom: 1px solid #ccc;
  25. font-size: 22px;
  26. padding: 6px 20px;
  27. }
  28. .article h4 {
  29. border-top: 2px solid #ccc;
  30. border-bottom: 2px solid #ccc;
  31. }
  32. .article h5 {
  33. border-bottom: 2px solid #ccc;
  34. }
  35. .article h6 {
  36. border-bottom: 1px solid #ccc;
  37. }
  38. @media screen and (max-width: 480px) {
  39. .entry-title, .article h2, .article h3, .article h4, .article h5, .article h6 {
  40. font-size: 20px;
  41. padding: 10px;
  42. margin: 6px 0 12px;
  43. }
  44. }

どうでした?

案外簡単かもと思えたはずです。

CSSの解説もしながら進めていきます。

CSSでデフォルトの見出しを少し変更してみる

最初は難しく感じるのでちょっとだけ触ってみましょう。

だんだん慣れていきます。

少しだけ変更してみたい場合はこれでいいでしょう。

見出しの見た目を変える やり方

まずはワードプレスのダッシュボード「外観」→「テーマエディタ」へ進みます。

するとテーマの編集というページへ進みます。

1600くらいに見出しに関する部分がありました。

このあたりをチャチャッとやると見た目ががらりと変わります。

h2の見出しの色を変更する

h2の背景色を変えてみましょう。

  1. .article h2 { 見出し2
  2. font-size: 24px;  文字ー大きさ:24px
  3. margin-top: 40px;  マージン領域  余白ー上:40px
  4. margin-bottom: 20px; 余白ー下:20px 
  5. padding: 25px;  パディング領域  余白 25px
  6. background-color: #f3f4f5;

赤くなっている数字が色を表すコードです。

変化を加えている6行目のbackground-colorは背景色のことですね。

色を変更してみましょう。

background-color: #ffffff;(白)

こうすると

こうなります。

background-color: #ffff00;(黄色)

こうすると

こうなります。

h3の見出しの色を変更する

h3も少し触ってみましょう。

.article h3 { 見出し3
border-left: 7px solid #ff0000;(赤)左線 太さ7px 実線 赤
border-right: 1px solid #ccc;  右線 太さ1px 実線 明るい灰色
border-top: 1px solid #ccc;   上線
border-bottom: 1px solid #ccc;  下線
font-size: 22px;
padding: 12px 20px;
}

こうなります

もう少し遊びます

.article h3 {
border-left: 20px solid #ff0000;  太さ20px
border-right: 1px solid #000000;
border-top: 1px solid #000;
border-bottom: 2px solid #ff0000;  太さ2px  赤
font-size: 22px;
padding: 12px 20px;
}

こうすると

こうなります。

もう一回だけ遊んでみます。

.article h3 {
border-left: 20px solid #7fff00; 太さ20px黄緑
border-right: 20px solid #ff0000; 太さ20px赤
border-top: 0px solid #000;   太さ0px
border-bottom: 0px solid #000;
font-size: 22px;
padding: 12px 20px;
}

こうなります

イタリア国旗風です。

デフォルトCSSを少し変更するだけでもこれだけ印象を変えることが出来ました。

コピペでさらに簡単おしゃれに

見出しのデザインを紹介してくれているサイトがあるので気に入ったものがあればコピペしてデザインを好みのものに変えましょう。

デフォルトCSSのリセット

コピペをする前にデフォルトのCSSをリセットしましょう。

デフォルトをリセットしないとおしゃれな見出しコードを見つけてコピペした時にも上の画像のように初期の背景色が残ってしまい残念なことになってしまいます。

新しい見出しがきれいに表示されるようにします。

下のように変更してください。

リセットされて装飾が無くなります。

このようにしてからコピペしてきたコードを貼り付けるときれいに表示されます。

.article h2{

font-size: 24px;

background:none;

padding: 0;
}
 
リセットされたところに見出しのデザインのコードをコピペします。
コピペ後にも色や太さなど好みに変更も出来ますね。
 
.article h2{

font-size: 24px;

background:none;
padding: 0;
border-bottom: solid 3px black; 
}
border-bottom 下線
solid 実線
3px 太さ
black 黒
 
こんな感じになります。
背景色もリセットされているので大成功です。
 
もう少しやってみましょう。
次のコードをコピペしました。

position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}

h2::before {
position: absolute;
content: ”;
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

すると、こうなります。

かなりオシャレなやつですね。

色を変更してみます。

position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;

 

position: relative;
padding: 0.5em;
background: #ff0000;
color: white;

こうなります。

明るいカラーで華やかになりました。

簡単ですのでやってみてくださいね。

この記事のまとめ

コピペで簡単見出しのカスタマイズ。

本当に簡単でした。

見出しのデザインを紹介してくれているサイトは沢山ありますから好みのものを探してみてください。

見出しのカスタマイズがやりたいだけだったのにCSSも面白いと思い挑戦してみたくなったという方がいたら嬉しいです。

最後まで読んでいただき、ありがとうございました。

今回の記事でデザインを使用させていただいたサイトです。

オシャレなデザインがたくさんありますので好みのものがきっと見つかるはずです。

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

コメント

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