見出しとは、ブログを書いたときの「サブタイトル」のようなものです。
下記画像をご覧ください。
ピンクの矢印が示す、灰色の部分が『見出し』です。
ちなみに、オレンジは目次です。
コクーンでは、見出しをつくると自動的に目次が作成されます。
この見出し、デフォルトは非常にシンプルなので、デザインを変更してみましょう！
見出しのデザインを選ぶ
自分でわざわざ作らなくても、コピペで簡単に変更できるcssコードを配布してくださっているサイトがいっぱいあります。
ここでは「コピペ可」の、素敵なサイトをいくつか紹介します。
■サルワカ様
■株式会社ゆいまーる様
■POPPYOU様
■Pote Stock様
■NxWorld様
もっと他のデザインが見たい！という方は、「見出しデザイン コピペ」で検索すれば出てきますので、お気に入りを見つけてみて下さい。
見出しを変更する
CSSを知らないと、ちょっと難しい箇所があるかもしれませんが、一緒にゆっくりやっていきましょう！
*********** 作業開始 ***********
❶ 使用したいデザインを探します。
今回は上記で紹介した株式会社ゆいまーる様のデザインをお借りしたので、参考例に挙げさせていただきます。
❷ 下図の枠線内にあるcss（ .strip_border ～ ｝ ） をコピーします。
❸ ワードプレスの左メニュー、「外観」→「テーマファイルエディター」を選択
➍「子テーマ用のスタイルを書く」の中に、cssコードを貼り付け → 更新
表示したくないけど、何のコードか分かりやすくするために使用します
➎ cocoonの見出し2に対応するよう、cssコードを変更します。
➍ でコードを貼り付けましたが、このままでは見出しデザインに変化はないと思います。その理由は、コードの先頭が「.strip_border」になっているからです。
この部分を「.article h2」に変更しましょう。
ｈ2というのは、見出し2のことです。
▼このように対応しています。
h2＝見出し2
h3＝見出し3
h4＝見出し4
h5＝見出し5
h6＝見出し6
※すべて半角入力
■上下の幅を変更したい
padding: 0.25em; → padding: 0.5em;
■見出しの上下に余白を追加する
margin-top:50px;
margin-bottom:25px;
■色を変えたいときは……
#○○○○○○の部分を変えてみてください。
色については、下記のサイトがとても参考になると思います。
*********** 作業終了 ***********
見出しを使ってみる
見出しは、記事を書いたときの左上、「段落」をクリックすると展開します。
cssを変更していますので、今後はここから見出しを選択すれば、設定したデザインが表示されます。
デザインが変わると、本当にサイトの雰囲気が一気に変って楽しいですよね！
お疲れ様でした！
コメント