賢威で見出しをカスタマイズ(色やデザイン)する設定方法

 

こんにちわ。

元SEOコンサルタントであり、現在web集客のコンサル企業で働きながら副業でアフィリエイターをしている秋田 健です。

 

賢威最新版の「賢威8での見出しのカスタマイズ方法」をご紹介します。

 

見出しの色やデザインを変えるだけでグッと記事のクオリティーが上がりますし、記事も見やすくなり読了率も上がることで「SEOの観点から見ても高い効果」を期待することができます。

 

あなたも見出しをカスタマイズしてオリジナルのサイトやブログを構築していきましょう!

 

※フォロワー数のキリ番で記事添削企画、不定期に著名人とコラボ企画も開催しておりますので、気軽にフォローしてください!

※あきけん(@akitaken0530

 

◆見出しとは?

見出しとは?

 

「記事の見出し」とは「サイトやブログなどで他の文字とは大きめの文字で記載」されているものや「デザインされている文字の部分」を見出しといいます。

上記の「◆見出しとは?」がまさに見出しとなります。

 

文章をまとめた表題やどんなことが書かれているかの要約になるのが見出しになります。

 

見出しを見ることで「どんなことが書かれているのか理解出来る見出しが読者にとっても良い見出し」です。

 

皆さんも記事を閲覧する際に、「まずは目次」から見ませんか?

そして、その目次の内容(見出し)を見て「読むかどうかを判断している」と思います。

 

当然「求めている答え」が書いてありそうなら読み進めるでしょうし、「求めている答え」がなさそうであれば違うサイトへと遷移しますよね。

アフィリエイターにとって違うサイトへ遷移されることは「離脱」になるわけです。

 

読了率が大きく変わるのが見出しです。

そのため「記事の中でも見出しはとても大切な部分」になりますから時間をかけて考えるべきパーツになります。

 

今後のことも踏まえて・・・

「見出し」がどう表記されているか把握しておきましょう!

 

<表記上>

H1:記事のタイトル

H2:見出し

H3:H2の小見出し

H4:H3の小見出し

 

サイトやブログ運営をしていると「H2」とか「h3タグ」とか表現されることがありますので、上記をインプットしておいてくださいね!

 

使用方法としては・・・

「段階的に使用するのがSEO的に好ましい」とされていますので、SEOを意識するなら段階的にHタグは使っていきましょう。

 

せっかくですから例を出しておきます!

 

使用例<H2>お肉の種類について</H2>

豚肉・鶏肉・牛肉

 

<H3>豚肉</H3>

黒豚・ホエー豚

 

<H4>黒豚</H4>

<H4>ホエー豚</H4>

 

<H3>鶏肉</H3>

比内地鶏・名古屋コーチン

 

<H4>比内地鶏</H4>

<H4>名古屋コーチン</H4>

 

<H3>牛肉</H3>

松坂牛・仙台牛

 

<H4>松阪牛</H4>

<H4>仙台牛</H4>

 

<H2>お肉の種類まとめ</H2>

 

このような流れでHタグを使うのが有効的なSEO対策にもなります。

ぜひ意識して見出しを付けていってくださいね!

 

◆文字色のカスタマイズ設定

文字色のカスタマイズ設定

 

文字色のカスタマイズ設定を2つ紹介します。

「Hタグの文字色だけ変えたい方」は以下で紹介する2つのカスタマイズ方法が簡単ですのでおすすめです。

1.文字色を投稿ページから変更する方法

非常に簡単に文字色を変更できます。

画像付きで解説しますので初心者の方でもご安心くださいね!

 

では早速文字色の替え方を紹介しましょう。

 

まず記事投稿画面で「⊕」の「ブロックを追加」をクリックしてください。

 

丸い+マークの「ブロックを追加」をクリック

 

次に「一般ブロック<見出し」をクリックします。

 

丸い+マークの「ブロックを追加」をクリック

丸い+マークの「ブロックを追加」をクリック

 

見出しを記入して「文字色を変えたい文章をドラッグ」してください。

 

一般ブロックから見出しをクリック

 

「▼マーク」をクリックして「文字色」を選択してください。

 

見出しを記入して文字色を変えたい文章をドラッグする

 

好みの色を選ぶとドラッグで選択した文章の文字色が変更されます

 

好みの色を選ぶとドラッグで選択した文章の文字色が変更される。

 

※好みの色がない場合はカスタムカラーからお好きな色をに変更可能です。

 

※好みの色がない場合はカスタムカラーからお好きな色をに変更可能です。

 

または右側画面のブロックから色設定を選択してお好みに色を指定することでHタグの文字色を変えることもできます。

※「カラーコード」などで調べて反映させることも可能です。

 

または右側画面のブロックから色設定を選択してお好みに色を指定することでHタグの文字色を変えることもできます。

 

こちらの方が簡単に変更できますし、選択する回数なども少ないので右側で変更するのに慣れると記事執筆作業の効率化に繋がります。

 

どちらからでも文字色は変更することができますので自分の行いやすい方法で行いましょう。

2.賢威8の設定から文字色を変更する方法

上で紹介したHタグの文字色の変更方法は「いちいちHタグを編集しなければいけない」ので面倒くさいという方も中にはいらっしゃると思います。

 

そのような方は「賢威の設定から文字色を変更する」ことで、投稿画面では「記事作成だけに集中できるメリット」がありますので是非参考にしてみてください。

 

「外観<カスタマイズ」をクリックしてください。

 

外観→カスタマイズ

 

カスタマイズの中にある「色」をクリックします。

 

外観→カスタマイズ→色→

 

カラー1をお好きな色に変更しましょう。

 

カラー1を変更。

 

カラー1を変更することでH3、H4の文字色を変更させることができます。

ですがTOPページの投稿ページの「続きを読む」などの文字などもカラー1で設定した色になりますのでご注意ください。

 

◆背景色のカスタマイズ設定

背景色のカスタマイズ設定

 

基本的には賢威8のデフォルトでは「H3とH4の背景色は白で統一」されています。

そのため「H2の背景色しか変更することができません」のでご注意ください。

 

先ほど同様に「外観<カスタマイズ<色」と進み、カラー2を変更しましょう。

 

外観→カスタマイズ→色→カラー2

 

カラー2を変更することでH2の背景色が変更されます。

ですがH2の背景色だけでなくサイト、ブログ全て色が変わってしまうのでHタグの背景色だけ変更したい場合はCSSを個別で編集する必要があります。

 

◆デザインのカスタマイズ設定

デザインのカスタマイズ設定

 

「見出しのデザインをカスタマイズする方法」は初心者の方でも簡単に変更できますので安心ください!

 

また「文字色のカスタマイズや背景色のカスタマイズをしたい方」もこの設定を行っておけば、一度の変更であとは投稿画面で変更する手間がなくなりますのでやって損はありません。

 

他のサイトと差別化することもできますのでより一層愛着が湧くサイト、ブログになっていくと思います。

 

やり方としては「見出し CSS」などでGoogle検索して頂くと、さまざまなサイトで「見出しのCSSのコード」が紹介されています。

それをコピー・ペーストしていただければ作業は簡単に終わります。

 

中でもサルワカさんなどで紹介している見出しタグはデザインもおしゃれできっと好みのデザインの見出しが見つかると思いますので参考にしてみてください。

 

それでは早速賢威8の見出しのカスタマイズ方法を紹介していきます。

・賢威8のデフォルトの見出しデザインを無効化する

サルワカさんなどで好みの見出しをコピーペーストしても「賢威8のデフォルトの見出しデザインを無効化」しないと新しい見出しデザインが反映されませんのでご注意ください。

 

そのためにまずは「賢威8のデフォルトの見出しデザインを無効化」していきましょう。

 

WordPressでの作業となります。

「ダッシュボード<外観<カスタマイズ<追加CSS」へと進めてください。

 

ダッシュボード→外観→カスタマイズ→追加CSS

 

以下コードを追加CSSにコピペしてください。

 

<無効化コード>

/*h2~h4を無効化する*/
.article-body h2 {
background: transparent!important;
color: #000;
}

.article-body h3 {
border: none;
color: #333!important;
}

.article-body h4 {
border: none;
color: #333!important;
}

.article-body h5 {
border: none;
color: #333!important;
}

.article-body h6 {
border: none;
color: #333!important;
}

 

下図のようにコピペ出来ていると思います。

 

以下コードを追加CSSにコピペしてください。

 

最後は「公開」をクリックしてください。

 

これで賢威8のデフォルトの見出しのデザインを無効化することができました。

次は「あなたの変更したい見出しデザインのCSSを追加していく方法」になります。

・お好みの見出しデザインのCSSを追加する

先ほど紹介したサルワカさんなどで「お好みの見出しデザインのCSSをコピー」してきてください。

 

コピーしたら再度無効化した時と同じ手順で・・・

「ダッシュボード<外観<カスタマイズ<追加CSS」と進んでください。

 

先ほど無効化したCSSのコードの下に新しい見出しCSSのコードをペーストしてください。

 

先ほど無効化したCSSのコードの下に新しい見出しCSSのコードをペーストしてください。

 

コピペした場合は通常h1タグのCSSになっていますので「変更したい見出しのhタグに変更」してください。

 

数字を1から2に変更すればh2の見出しを変更することができますので、変えたい見出しの数字に変更することを忘れないでください。

 

またH2〜4まで無効化されています。

H2〜4までの全てのデザインを変更するなら問題ないのですが、H3だけ変更した場合はH2とH4のタグは無効化されていますので、デザインのない大きな文字だけの見出しになってしまいます。

 

そのような場合は・・・

無効化でコピペした部分の「無効化したくない部分だけを消去して公開」をクリックしてください。

 

<H3だけ変更する場合>

.article-body h3 {
border: none;
color: #333!important;
}

 

上記記述だけ残してあとは消去しましょう。

この下に新しいH3タグのCSSをコピーすればH3タグだけカスタマイズすることができます。

 

賢威8での見出しカスタマイズ方法はお分かり頂けたでしょうか。

見出しは文言もさることながら、目立つからこそデザインも重要になります。

是非自分らしい見出しにしてサイトデザインを整えてみてくださいね!

 

でわ!秋田 健でした!

 

<合わせて読まれている記事>

 

 

【公式】0Start~放置システム最短サイト構築~

 

無料メルマガ「アフィマガ」について

サイト未完成向けメルマガ登録ページ

サイト完成済み向けメルマガ登録ページ

 

【YouTube】⇒あきけんアフィリエイトガイド