このブログは無料テーマのcocoonを利用していますが、初心者でも使いやすくおすすめ。
今回はブログ運営の初心者向けに、cocoonで見出しの装飾をカスタマイズする方法を解説していきます。
見出しの装飾
cocoonの初期設定では、見出しはこのようになっています。
初期設定のままだとちょっと味気ないので、これを自分の好きなデザイン・色に変えてオシャレなブログにしたいところ。
まぁ言うてる僕がSimple is Bestがモットーなので、たいした装飾はしてないんですけどね。…本当はできないだけです。
では、cocoonで見出しを装飾するには管理画面の「外観」から「カスタマイズ」を選択します。
カスタマイズの画面に移行するので、「追加CSS」を選択します。
初めて追加CSSを開いた場合、以下のような画面になるので「閉じる」を押しておきましょう。
閉じるを押すと、コードを記入する画面が表示されます。
見出しに限りませんが、色んなカスタマイズを行う際はここに記入していくことになるので、この操作は覚えておくといいですね。
見出しの装飾をするコードは以下になります。
.article h2{
}
この{}内にデザインとなるコードを記入するわけですが、h2をh3にすれば見出し3が、h4にすれば見出し4のデザインをカスタマイズできます。
とはいえ、CSSがわからなければカスタマイズもクソもないですね。僕もCSSはさっぱりなので、見出しのCSSが書かれているサイトを紹介しておきます。
こちらのサイトで各デザインの「CSS」をクリックし、下に出てくる{}内のコードを先ほどの追加CSSの｛｝内にコピペすればOK！
他にも「見出し 装飾」と検索して好みのデザインを探すのもアリです。
ちなみに、CSSを追加していくと何がどのカスタマイズか意味不明になってくるので、実際には以下のように記入しておくとわかりやすくなります。
/*見出し*/
.article h2{
}
当ブログの見出し
せっかくなので、このブログの見出しをどのようにしているかを解説しておきます。と言っても、僕はcocoonで最初から設定されているものをチョロッといじっただけ。
最初はあれこれ試してみたものの、考えだしたらキリがなくてシンプルにブログの色と合わせるだけにしました。
これがcocoonのデフォルトです。
.article h2 {
font-size: 24px;
padding: 25px;
background-color: #f5f6f7;
border-radius: 2px;
}
.article h3 {
border-left: 7px solid #888;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-size: 22px;
padding: 12px 20px;
}
.article h4 {
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
}
これを僕は以下のようにカスタマイズしています。
.article h2 {
font-size: 24px;
padding: 25px;
background-color: #0000FF;→背景色の変更
color:white;→文字色の変更
}
.article h3 {
border-left: 10px solid #008080;→見出し左の1本線の太さと色の変更
border-right: 10px solid #008080;→見出し右の1本線の太さと色の変更
font-size: 22px;
padding: 12px 20px;
background-color: #00FFFF;→背景色の変更
}
.article h4 {
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
background-color:#CCFFFF;→背景色の変更
まずはデフォルトの見出しでそれぞれの箇所を少しいじってみて、どこがどのように変化するかを確認していくと理解しやすいかもしれません。
ちなみに、色のCSSはこちらのサイトで調べることができます。
まとめ
見出しはブログを読むうえで目を惹くポイントでもあるので、できればオシャレに仕上げたいところですが、考え出すと泥沼にはまってしまう恐れもあります。
カスタマイズの作業自体は簡単なので、お好きなデザインを探して自分好みの色合いに仕上げてやりましょう！
cocoonでカテゴリー別の新着記事を表示する方法を解説しています。
設定不要で便利なプラグインを紹介しています。
コメント