素人でもCSSのカスタマイズはできます！
見出し2
1. 見出し3
  1. 見出し4
    1. 見出し5
      1. 見出し6
アイキャッチ画像の作り方
目次もカラフルに

素人でもCSSのカスタマイズはできます！

中学生のときにガラケーで文字や背景の色を変えたり、チカチカさせたり文字が横に流れていくようにしたりと、必要な装飾はコピペでブログをやっていました。（懐かしい…）

今も大して知識がないので、様々なブログ様から「あ、これいいな」と思ったところからコピペさせてもらって、何とかここまでカスタマイズすることができました。

カスタマイズについては全て無料のものしか使っていません！

ブログ収入ができたら課金して改造していきましょう。

コピペ自由なので、もし気に入ったものがあればどうぞ

適度に装飾して、見やすいブログにしていきましょう。

見出し

cocoonのデフォルトだと見出しは6パターンあります。

私は見出し2と4を好んで使っています。5は項目が多ければたまに程度です。

6個あってもなかなか使い切れない…w

見出し1

タイトルは自動的に見出し1が使用されています。

.article h1 {
letter-spacing: 0.2em;/*文字間*/
border-bottom: solid 3px black;/*線の種類（実線）太さ色*/
}

見出し2

丸角色つき見出しです。

.article h2 {
letter-spacing: 0.2em;/*文字間*/
color: #fff;/*文字色*/
background: #77ccbb; /*背景色*/
padding: 0.5em 0.75em;/*文字周りの余白*/
border-radius: 0.3em;/*角の丸み*/
}
.article h2:before {margin-left: 0.5em;}

見出し3

左端が色つきの見出し

.article h3 {
letter-spacing: 0.2em;/*文字間*/
border-left: solid 10px #77ccbb;/*左カラー*/
}

見出し4

上下の線でシンプルな見出し

.article h4 {
letter-spacing: 0.2em;/*文字間*/
border-color: #77ccbb;
}

見出し5

点線見出し

.article h5 {
letter-spacing: 0.2em;/*文字間*/
border-bottom: dashed 2px #77ccbb;
}

見出し6

これは特にカスタマイズせず、そのままです。

アイキャッチ画像の作り方

サルワカさんのページで紹介されている無料で使えるツールを使っています。

FLAT ICON DESIGNプロフィールアイコンでも使用していますが、かわいくて商用利用可能な素材サイトです。同じアイコンでも色が微妙に違うものがあったり、背景の有無やサイズも選ぶことができます。このサイトを左上には他の無料素材サイトへ飛べるリンクがたくさんあります。

マンガ文字とかも無料なのか…！まだ使ったことないから今度使ってみよう（＾ω＾）FLAT ICON DESIGNのサイトひとつで必要な素材が全て無料で揃います。
Unsplash無料でオシャレな写真がダウンロードできます。日本語で検索しても画像は出てきますが数が少ないので、英語で検索しましょう。「犬」と検索すると20件程度ですが、「dog」で検索すると3000件以上ヒットします。
写真をアップしているのが外国の方が多数だからだと思います。
英語が得意でなくても単語を入れるだけで検索できるので簡単に探せます。
Canva
オシャレな素材をここで組み立ててアイキャッチ画像を作成しています。無料登録すると作った画像がサイト内に保存できるので、あとで修正したいときにも便利です。このサイト内にもテンプレートや素材があるので、何か物足りないなというときにはここの素材も使っています。有料機能もありますが、基本的には無料の範囲内で十分な機能が揃っています。