6月11日のブログ勉強会の内容は、Wordpressの『カスタマイズ』を使ってCSSを編集し、見出し（H2）のデザインを変更してみました。
見出しデザイン
見出しのデザインは、CSSを編集して変えることが可能です。
初心者のうちは自分で考えるのが大変なので、ネット上で無料で公開されているCSSのコードを利用しましょう。
『CSS 見出し』で検索すると、たくさんのページが出てきます。
↓今回はこちらのサイトを利用させていただきました。
今回はこちらの下のほうにある、『吹き出し』というデザインに変えてみました。
『コードを表示』というボタンを押すと、
このようにコードがでてきますので、全てをマウスでなぞって『CTRL+C』でコピーします。
WordPress『カスタマイズ』→『追加CSS』
WordPressにログインし、『外観』→『カスタマイズ』または、上にある黒いバーの中の『カスタマイズ』をクリックします。
左側メニューの一番下、『追加CSS』をクリックします。
クリックして現れた空白部分に、コピーしておいたコードを『CTRL+V』で貼り付けます。
CSSコードの変更
今回、変更する部分は『見出し2（H2）』ですので、コードの中の『H1』と書いてある部分を、『H2』に変更します。
すると、見本どおりの見出しになります。
色の変更
色のコード(今回は『#e0edff』）の部分を変更することによって、好きな色にすることができます。
色のコードは、『CSS カラーコード』などで探すことができます。
↓一例
無駄な線を消す
現在使っているテーマ『Stinger8』のメニューは、上下にグレーの線が設定されています。
先ほどのコードを貼り付けただけでは、上下の線が消えないので、CSSで消す必要があります。
消す場合は
border-top:inherit;
border-bottom:inherit;を、『h2』のかっこの中に追加します。
完成品
今回は、吹き出しのデザインにして、背景を黒、文字を白に変えてみました。
h2 {
position: relative;
padding: 0.6em;
background: #000000; /*背景の色*/
color:#ffffff; /*文字の色*/
border-top:inherit;
border-bottom:inherit;
}
h2:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #000000; /*吹き出しの色*/
width: 0;
height: 0;
}↑上記のようにコードを書き換えると、
↑このような吹き出しのデザインになります。
まとめ
今回は、ワードプレスのカスタマイズ機能、『追加CSS』を使って見出しのデザインを変えてみました。
CSSは奥が深いので、慣れないと理解が難しいと思いますが、中級者以上になっても、コピペ（コピー＆ペースト）でコードを変更することはよくあります。
まずは見よう見まねでいいので、お手本通りにデザインが変更できれば大成功です。
コピペのやりかたがわかったら、ご自身でいろいろ試して遊んでみてください。
