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で会員動画サイトが作れる!

\動画コンテンツで新しい収益を!/

オンライン講座機能付き
WordPressテンプレート新発売

多言語化によるお悩みを解決します

\導入費用のみ!月額費用は不要/

管理画面からカンタン更新!
AI翻訳+人力翻訳の使い分けも可能

 開催中のWordPress講座・セミナー

 WordPress・サイト運営のお悩みを解決します

女性講師によるマンツーマンレッスン開催中!
・オンラインレッスンだから全国どこでも参加可能
・2011年から150回を超える研修実績あり
・受講後も安心!メールサポート付き
・受講中の録画動画をお渡しします

 はっちゃんセミナー公式SNS

 はっちゃんYouTubeチャンネル

無料セミナー・お役立ち情報を配信中!

公式メールマガジンもあります!

新着情報

  新サービス開始しました

WordPressで会員動画サイトが作れる!
オンライン講座機能付きWordPressテンプレート新発売!→詳しくはこちら

多言語化によるお悩みを解決します!
管理画面からカンタン更新!AI翻訳+人力翻訳の使い分けも可能→詳しくはこちら

  ピックアップ講座

最新のAIコンテンツ生成とSEO対策が
6時間しっかり学べるコンテンツマーケティング講座(オンライン開催)→詳しくはこちら

 

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

  ピックアップ記事

 カテゴリー
公式Facebook
公式LINEアカウント

友だち追加

こちらのURLからお友だち登録できます。
https://lin.ee/CbqqEEI

公式メールマガジン

こちらのURLからメルマガに登録できます。https://www.8seminar.com/mailmagazine-form

PAGE TOP