>WordPressテーマ賢威8の見出しデザインをカスタマイズ!2022年9月22日WordPressテーマ賢威8はシンプルなデザインが特徴で私は気に入っていますが、少し物足りないと感じるユーザーも多いでしょう。そこで、ブログの印象をガラリと変える賢威8見出しのカスタマイズ方法を解説していきます。カスタマイズするだけなので、HTML/CSS知識のないブログ初心者でも簡単にできるので参考にしてください。くじ見出しのデフォルトデザイン賢威8の見出しを好みの色にカスタマイズカラー1とカラー2のカラーパレットで色を選ぶ追加CSSにコードを書く賢威8の見出しデザインをカスタマイズ1.好みの見出しデザインのコードを探す2.初期デザインの見出しCSSを無効化する3.見つけたコードを追加CSSに貼り付ける賢威の見出しデザインのまとめ見出しのデフォルトデザイン賢威8デフォルトデザインの見出しは非常にシンプルで、6つのカラーパターンが事前に用意されているだけです。ターコイズの見出しブルーグレイの見出しブラウンの見出しライトブルーの見出しピンクの見出しレッドの見出し賢威8カラーパターンの6種類ターコイズブルーグレイブラウンライトブルーピンクレッドブログに合うカラーパターンを選ぶだけと簡単なので、初心者にも使いやすいと賢威の評判は高いです。」と進めば選択項目が表れます。賢威8の見出しを好みの色にカスタマイズ賢威8に用意されているカラーパターンでは、見出しの色に不満がある人もいますよね?賢威8の見出しを好みの色にカスタマイズする場合、次の2つの方法があります。見出しの色をカスタマイズする方法カラーパレットで色を選ぶ追加CSSにコードを書く上のそれぞれの方法にはメリットとデメリットがあるので、見出しの色をどうやって変更したいかでカスタマイズ方法を選びましょう。1ずつ分かりやすく解説していきます。カラー1とカラー2のカラーパレットで色を選ぶ見出しを好みの色に簡単にカスタマイズしたいなら、カラーパターンと同じ箇所にあるカラー1とカラー2を変更するのがおすすめです。カラーは1~6ありますが、カラー1は見出しの文字色に利用され、カラー2は見出しの背景色やボーダーに利用されています。実際にカラー2のカラーパレットで、見出しの背景色をカスタマイズした動画をご覧ください。id=653]ただし、カラー1やカラー2で見出しの色を変更すると、見出し以外の色も変わってしまいます。変更箇所カラー1見出しh3・h4・h5の文字色、目次の文字色、「続きを読む」の文字色などカラー2見出しh2の背景色、見出しh3・h4のボーダーの色、テーブル(表)の見出し背景色、ページトップなどの斜線部の色カラー1やカラー2で共有する箇所が多く、意図せずに色を変えてしまっている場合があります。h2など決まった見出しだけの色をカスタマイズしたい場合はどうすれば良いのでしょうか?追加CSSにコードを書く色を変えたい見出しと変えたくない見出しがカラーパレットで共有されている場合、追加CSSに色を変えたいコードを記述すれば解決できます。CSSの知識が無い方にとってハードルが高そうなカスタマイズ方法かもしれませんが、解説通り進めれば誰でも簡単にできます。」と進んで最下部の項目にあります。h2見出しだけを赤色にカスタマイズする場合、追加CSSには次のコードを記述します。#FF0000;/*赤色(好みの色コードを記入)*/}では、実際のカスタマイズ前とカスタマイズ後の画像は次の通りです。見出しの色(カスタマイズ前)見出しの色(カスタマイズ後)h3やh4のボーダー色は変わらず、h2の背景色だけが変化したのが分かっていただけたと思います。賢威8見出しの色だけをカスタマイズするのはとても簡単なので、ぜひチャレンジしてください。賢威8の見出しデザインをカスタマイズCSSの知識がある方で、賢威8の見出しデザインをカスタマイズしてみて上手くできましたか?追加CSSにデザインをカスタマイズするコードを記述したのにできなかった方は、手順通りにできていない可能性があります。賢威8の見出しデザインをカスタマイズする手順は、次のとおりです。カスタマイズの流れ好みの見出しデザインのコードを探す初期設定の見出しデザインを無効化する見つけたコードを追加CSSに貼り付ける2を忘れると見出しデザインが上手く反映されない場合があるので、流れに沿って解説します。1.好みの見出しデザインのコードを探す自分で1から見出しデザインのコードを考えても良いですが、見た目の良いキレイな見出しを作るのはなかなか難しいです。初めのうちはネットで公開されている見出しのCSSコードを探してみましょう。コード」と検索すれば、デザイン性の高い見出しを紹介するサイトが出てきます。次の2つのサイトが見出しの種類が豊富でおすすめです。JAJAAAN2.初期デザインの見出しCSSを無効化する賢威8で用意されたデザイン以外を利用する場合、初期デザインの見出しで設定されているCSSは無効化した方が良いでしょう。CSSを無効化しなくてもカスタマイズした見出しが反映される場合もありますが、コードがキレイに上書きされた場合に限ります。詳しい説明は割愛しますので、次のソースコードを追加CSSに記述すればすべての初期デザインの見出しが無効化できます。#333!important;}上記のコードを公開すると、次のように見出しは黒系のシンプルなデザインになります。これで好みのデザインの見出しを反映できる準備の出来上がりです。3.見つけたコードを追加CSSに貼り付ける賢威8の見出しをカスタマイズしたいコードが見つかったら、追加CSSに貼り付けるだけで反映されるので簡単です。そこで、サルワカさんのサイトで見つけた見出しコードを利用して解説します。赤枠で囲った部分の見出しのコードをコピーして、初期デザインを無効化したコードの下に貼り付けます。サルワカさんでは、h1見出しのコードとして紹介されているので、任意のh○見出しに書き換えて公開すれば反映されます。id=653]ただし、背景色が反映されていません!なぜなら、h2初期デザイン無効化にbackgroundを「!important」で強制的に透明色にしているからです。追加CSSで初期デザインと同じbackgroundを記述すれば上書きされるので、「background:transparent!important;」の無効化コードは削除すれば大丈夫です。これでh2は好みの見出しにカスタマイズが完了しました。h3を同じ見出しコードにカスタマイズする場合は、背景色はそのまま反映されるので最後の工程は必要ないですよ。賢威の見出しデザインのまとめ賢威8の見出しをカスタマイズする方法を2つ解説しました。誰でも見出しを簡単にカスタマイズできるカラーパレットと、個別に見出しをカスタマイズできる追加CSSがあり、自分の目的に合う方を選びましょう。同じ賢威を使っている他のブログでも、見出しを変えれば一味違う雰囲気のブログが完成します。一度カスタマイズを覚えれば見出し以外にも挑戦してみると楽しくなりますよ。見出しと連携された賢威の目次をカスタマイズするのが良いかもしれませんね。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。関連記事WordPressテーマ賢威8の背景色をカスタマイズ!ブログの背景色は地味な存在だけど、雰囲気をガラリと変える要素が含まれています。そこで、賢威8で作ったブログの背景色をカスタマイズする方法を解説します。賢威一筋の管理人「ちゃん(@cyan_customizer)」です。...WordPressテーマ賢威8のフォントをカスタマイズする方法!記事の文字サイズや行間・改行を変更する賢威でいくつかサイトやブログを作っていますが、他の賢威で作られたブログを見ると「何か雰囲気が違うな~」と感じるときがあります。...WordPressテーマ賢威8ヘッダー画像(メインビジュアル)の適切なサイズと設定方法!賢威8のメインビジュアル機能を使うと、トップページのロゴ下に大きなヘッダー画像を設置することが可能です。...WordPressテーマ賢威8のアイキャッチ画像のサイズをカスタマイズする賢威8にアップデートされて標準機能になったのが「アイキャッチ画像」です。雨の日ブログ運営者ちゃんブログの更新情報をTwitterでチェックする2014年から副業アフィリエイター!金融系2つを中心に高単価サイトを5つ運営中!本業を辞めずに、SEOについて記事を書き続けています。