6月11日の内容 WordPress『カスタマイズ』を使って見出しデザイン変更

6月11日のブログ勉強会の内容は、Wordpressの『カスタマイズ』を使ってCSSを編集し、見出し(H2)のデザインを変更してみました。

見出しデザイン

見出しのデザインは、CSSを編集して変えることが可能です。

初心者のうちは自分で考えるのが大変なので、ネット上で無料で公開されているCSSのコードを利用しましょう。

『CSS 見出し』で検索すると、たくさんのページが出てきます。

↓今回はこちらのサイトを利用させていただきました。

今回はこちらの下のほうにある、『吹き出し』というデザインに変えてみました。


『コードを表示』というボタンを押すと、

このようにコードがでてきますので、全てをマウスでなぞって『CTRL+C』でコピーします。

WordPress『カスタマイズ』→『追加CSS』

WordPressにログインし、『外観』→『カスタマイズ』または、上にある黒いバーの中の『カスタマイズ』をクリックします。

左側メニューの一番下、『追加CSS』をクリックします。

クリックして現れた空白部分に、コピーしておいたコードを『CTRL+V』で貼り付けます。

CSSコードの変更

今回、変更する部分は『見出し2(H2)』ですので、コードの中の『H1』と書いてある部分を、『H2』に変更します。

すると、見本どおりの見出しになります。

色の変更

色のコード(今回は『#e0edff』)の部分を変更することによって、好きな色にすることができます。

色のコードは、『CSS カラーコード』などで探すことができます。

↓一例

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
HTML,CSS 500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

無駄な線を消す

現在使っているテーマ『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は奥が深いので、慣れないと理解が難しいと思いますが、中級者以上になっても、コピペ(コピー&ペースト)でコードを変更することはよくあります。

まずは見よう見まねでいいので、お手本通りにデザインが変更できれば大成功です。

コピペのやりかたがわかったら、ご自身でいろいろ試して遊んでみてください。

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