WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます

WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます

見出しのデザインを設定する方法-h1〜h6の色等の変更

見出しのデザインを設定する方法-h1〜h6の色等の変更

WordPressのテーマ毎に設定されている見出し(h1〜h6)の色や大きさなどのデザインを変更する方法を紹介します。


特に海外のテーマの場合は見出しの装飾が入っていないことも多く、ただ見出しの文字の大きさが異なるのみの設定の場合が大半です。

見出しをかわいくデザインするには、今回の方法をお試しください。

CSS(スタイルシート)の追記方法

見出し(h1〜h6)の色や大きさなどのデザインを変更するためにはスタイルシート(CSS)を設定する必要があります。

そのスタイルシートの設定は、テーマに関係なくWordPress本体の「追加CSS」機能で(昔のWordPressにはなかった機能です)設定をします。

「追加CSS」機能の設定画面の表示方法

 「外観」>「カスタマイズ」>「追加CSS」に移動して、ここにCSSコードをコピペで記載します。

外観のカスタマイズをクリックします。

追加CSSをクリックします。

この部分に見出し(h1〜h6)のCSS(スタイルシート)を記載します。

入力したら忘れずに「公開」をクリックします。

 

スタイルシートがわからない方は下記を参考にしてください。

CSS(スタイルシート)のデザインの記述例について

下記のサイトのデザインをコピーして、CSS(スタイルシート)を「外観」>「カスタマイズ」>「追加CSS」をクリックして表示しCSSを記載します。

CSS(スタイルシート)のデザインの記述例について

下記のサイトのデザインをコピーして、CSS(スタイルシート)を「外観」>「カスタマイズ」>「追加CSS」をクリックして表示しCSSを記載します。

「サルワカさんのおしゃれな見出しのデザイン例まとめ68選」のサイトから下記を例に紹介します。

このデザインのソースは、「ソースを表示」で表示された下記のコードです。

h1 {
/*線の種類(二重線)太さ 色*/
border-bottom: double 5px #FFC778;
}

このデザインは「h1」と記載されているので見出し1のデザインになっています。

このデザインを見出し2に使いたい場合は、この「h1」を「h2」に変更します。

見出し3に使いたい場合は、この「h1」を「h3」に変更します。

色の変更方法はこの#から始まる英数字6桁が色の指定です。

下記のサイト等を参考にして、好きな色に差し替えましょう。

「カラーコード」や「カラーコード見本」「配色見本」等で検索するとたくさんのサイトありますのでその色をコピーします。

 「外観」>「カスタマイズ」>「追加CSS」に移動して、ここにCSSコードをコピペで記載します。

外観のカスタマイズをクリックします。

追加CSSをクリックします。

この部分に見出し(h1〜h6)のCSS(スタイルシート)を記載します。

入力したら忘れずに「公開」をクリックします。

【無料】フォローアップ&公開講座スタート!

~ セミナー概要 ~
・サイト担当者必見!最新WordPress事情
・これからのスタンダードになるElementorエディタによるWordPressの新しい作り方
・Webサイト制作を受注するときの注意点

サイト制作&運営のお悩みを解決しませんか?

~ あなたのための特別カリキュラムでお悩み解決 ~
・制作・運営のちょっとした困ったを解決!
・集客&効率化のアドバイスも!
・オンラインレッスンだから全国どこでも参加可能
・受講後も安心!メールサポート付き

新しいWordPress作成のスタンダード!

WordPressでの制作はこれから大きく変化します!
テーマを選んで当てはめていく作り方から、自分で自由にデザインし、テーマまで作れる講座です。
受講後は、一緒に案件をお願いできる方も募集中!

新着情報

  ピックアップ講座

WordPressに限らず、Canvaの画像編集やサイト運営に関係する内容と、受講生さんからのご質問等で共通な内容も掲載していきます。

  おすすめ画像編集ツール

Canvaバナー
おすすめ画像編集ソフトです。当サイトのアイキャッチ画像やバナー、Instagram用の画像や当サイトのチラシもこちらのCanvaで作っていますよ!無料版で十分です。

 

 カテゴリー
PAGE TOP