WordPressのテーマエディタで記事の見出しのデザインを修正したい!

WordPressのテーマエディタで記事の見出しのデザインを修正したい! ブログ

WordPressから見出しのデザインを変更したい!

けど、やり方がわからない…

なんて人、多いんじゃないんでしょうか?

かく言うぼくもわからなかったのですが、勉強して試行錯誤しながら見出しの修正をしたので備忘がてらやり方をまとめました。

よかったら参考にして下さい。

もう既に知っている人からしたら基本的な内容だとは思います。
もし、間違っているところがあれば、
ぜひ教えてください。

WordPressから変更する

注意 : 
 ここでは、テンプレートにCocoonを使ってる人に向けての説明になります。
 Cocoonについては別の記事で説明します。

WordPressから見出しを変更する場合は、Cocoon設定から変更する必要があります。

Cocoon設定画面に移動し、
「全体」のタブを開きます。

「キーカラー」から自分の設定したい色を選択しましょう。

この場合、色の変更のみで見出しの形を変えることができません。

また、見出し以外にもサイトの至るところが一気に変更されてしまいます。統一感が取れるため、とても便利な反面、変更したくない箇所も変わってしまう可能性があるため注意が必要です。

HTML、CSSから変更する

WordPressのテーマエディタを使って見出しをHTML、CSSで変更することが出来ます。

今回ぼくはこの方法で見出しのデザインを変更しました。

ブラウザ上で試しに変更してみる

いきなりWordpressで変更する前に、まずは試しに変更したらどうなるのかを試してみましょう。

ブラウザで自分が変更したいページを開きましょう。

F12キー」を押しましょう。

もしくは、右クリックをして
要素の検証」を選択しましょう。

こんな画面が出ると思います。
左上にあるボタンをクリックして確認したい要素を選択しましょう。
そうするとwebページ上の要素の設定値を確認することができます。

こんな感じ。

設定値をクリックすることで、設定値を変更することが出来ます。

注意: ここでの修正はあくまでも修正後の確認だけで、実際に反映はされないのでお気をつけください。

自分のサイト以外でも参考にしたいサイトがあれば、ぜひ要素の検証して参考にしていきましょう!

Wordpresで実際に見出しを変更する

ブラウザ上で修正する内容が固まったら、いよいよWordpressで見出しを変更していきましょう。

WordPressのホーム画面より

外観」⇒「テーマエディタ

を選択しましょう。

このような画面が表示されます。

右上から編集したいテーマを選択しましょう。

Cocoonの場合は「Cocoon」を選択します。

続いて、右のサイドバーから修正したいファイルを選択します。

今回は見出しのデザインを変更するため、CSSファイルを選択します。Cocoonの場合はstyle.cssでした。

選択するとCSSファイルの内容を変更することが出来ます。

CSSがわからないという方には別の記事で説明します。

今回は、見出しのH2とH3を変更したいので、CSSファイル内から対象のクラスを見つけましょう。

エディタを選択した状態で「Ctr + F」を推すと検索することが出来ます。

ブラウザで修正した内容を入力していきましょう。

入力が完了したら必ず保存しましょう

保存しないとデザインが保存されないので注意しましょう!

これで見出しの修正は完了です。

お疲れ様でした。

まとめ

いかがでしたでしょうか?

自分でも変えられそうな気がしてきたのではないでしょうか?

難しそうだと感じる方は、一度ブラウザの要素の検証で色々と試してみるのがいいでしょう。

HTMLやCSSの勉強がしたいけど、なにから手をつけていいのかわからないという方には、ここら辺のサイトが初心者にも優しくておすすめですよ!

  • Progress
  • ドットインストール

それでは~