WordPress(ワードプレス)の使い方や、簡単にブログやアフィリエイトサイトが作れる方法もご紹介!テンプレートやプラグインのおすすめもコレを入れとけば間違いなし!

挫折者避難所!ワードプレスの記事内見出しを簡単にカスタマイズする方法と使い方

●お知らせ

アフィリエイトで5000万円稼いだあの道産子アフィリエイターが2018年9月上旬にクロレラ塾を開校します

募集期間はたったの1日ですので、アフィリエイトでお金を稼ぎ、自分の人生を変えたい人は必見です。

 

クロレラ塾概要ページはこちら

 

ワードプレスには数多くの無料テンプレートも用意されていますが、実際使っていこうと思って記事を書いていたら「見出しが気に入らない」ってよくありますよね!

 

そうしてワードプレスの記事内見出しをカスタマイズしようとネット検索し、やり方を真似してみても上手くいかない!

 

そんな方を対象に、誰もが出来る簡単な見出しのカスタマイズ方法とその見出しの使い方をご紹介いたします。

(もちろんワードプレスの無料テンプレートでも使える見出しなのでご安心を!)

 

(見出しのカスタマイズが上手く行かない人はこの記事をしっかりと読んでください

案外そこが落とし穴だったりする物ですよ。)

 

↓今回の記事を動画で見たい方はこちら

 

ワードプレスで記事内の見出しをカスタマイズする方法

ワードプレスの記事投稿画面で使う見出しを変更する際は、基本的にCSSの最下部にこの記事で紹介しているコードを貼り付けるだけで可能となっています。

 

↓ワードプレス管理画面のサイドメニューから「外観」⇒「テーマの編集」と進み、右下にある「スタイルシート」(style.css)を選択。

 

 

↓ここの最下部にこの記事で紹介しているCSSコードをコピペして貼り付ければOKです。

 

 

見出しに関する設定を一発で終らせたいなら、ここから先の注意事項もしっかりとお読み下さい。

大事な所が抜けている事で見出しに関する設定も上手くいかなかったりします。

 

CSSコピーしても反映されない場合

この記事で紹介しているCSSをコピペで追加し、記事作成画面で見出しを付けても装飾が反映されない場合。

そういう方は下記のどちらかをお試しください。

 

  1. 「SHIFTキーを押しながらF5を押す」
  2. 「SHIFTキーを押しながら更新ボタンを押す」 です。

 

実際設定は上手くいっているのに、キャッシュが残っているせいで視覚化されないケースがかなり多いです。

上記どちらかの手順で更新する事でしっかりと見出し装飾が反映されます。

 

h2~h4を指定しよう

基本的にこちらの記事で紹介しているCSSは全てh2になっています。

h3やh4の見出しとして使いたい場合はCSSコードに記載されている「h2」部分の数字を対象となる数字に変更しましょう。

コード内で「h2」が一個の場合もありますし、2個含まれている場合もあります。

h3として使いたいならコード内の全てのh2をh3に変更しましょう。

↓例

 

↑これをh3で使いたいならご自身で置き換えて下記のようにしてからCSSに貼り付けてください。

 

h2は見出し2。

h3は見出し3に対応しています。

↓ワードプレスの記事作成画面です。

 

ワードプレスで使える見出しのCSS

上記注意事項を頭に入れたら、下記の見出しの中から気に入った物をコピーし、ご自身のワードプレスのCSSの最下部に追加してください。

それだけで下記でご紹介している見出しが実際にワードプレスで使えるようになっています。

 


↓CSS

 


 

↓CSS

 


↓CSS

 

 


 

↓CSS

 

 


 

↓CSS

 

 

 

記事内の見出しだけを変更したい場合

↓例えばこちらはワードプレスのテンプレートでデフォルト状態の物なのですが、

 

初期状態だと見出し装飾も何もないので、h2の見出しを変更してみました。

↓そうするとこのようにサイドバーなどにも適用されてしまいました。

もし見出しに設定した物がサイドバーなどに適用され、それが嫌な場合はh2の手前に「.entry-content 」と追加してください。

↓こんな感じに。

 

↓そうすると記事内にだけ見出し装飾が適用されます^^

 

 

 

見出しの色や線の太さを自由にカスタマイズする方法

↓例えばこのCSS

 

赤枠部分は数字を変える事で見出しをカスタマイズ出来ます。

緑枠部分はカラーコードをコピペで置き換えるだけで色を変えられます。

カラーコードはこちら

ちょっと面倒だけど自分好みの色に変えたい方はトライしてみてください^^

 

SEO効果を高める見出し(hタグ)の正しい使い方

ここでは見出しの使い方をご説明いたします。

まず基本的にワードプレスの記事内にある見出しはそれぞれがhタグという物になっています。

↓ワードプレスの画面右上にある「ビジュアルモード」では、見出しを使ってもこのように見えています。

 

 

↓しかし実際テキストモードで見てみると、ソースはこのようになっています。(画像クリックで拡大可)

 

 

見出し2ならh2タグ。見出し3なら自然とh3タグになっているという意味です。

そしてワードプレスの記事タイトル部分は自然とh1タグが使われています。

h1タグは1記事に一回までしか使ってはいけないので、基本的に記事内で見出し1(h1タグ)は使う事はありません

記事を書く際は見出し2~3をメインに使っていきましょう。

 

見出しの使う順番

見出しはイメージ的には

「大見出し」(h2 見出し2)

「大見出しの中の小見出し」(h3 見出し3)

というイメージで使います。

 

見出しの正しい使い方としては、同じ見出しが続いても良いが順番がめちゃくちゃになってはいけないというルールがあります。

そして上から順番に使うのが見出しの正しい使い方です。

 


↓良い例その1

「大見出し」(h2 見出し2)

「大見出しの中の小見出し」(h3 見出し3)

「大見出しの中の小見出し」(h3 見出し3)

「大見出し」(h2 見出し2)

「大見出しの中の小見出し」(h3 見出し3)

(記事タイトル部分は自然とh1になっている為、自分で使う事はありません。)

 

↓良い例その2

「大見出し」(h2 見出し2)

「大見出し」(h2 見出し2)

「大見出し」(h2 見出し2)

「大見出しの中の小見出し」(h3 見出し3)

 

↓悪い例

「大見出しの中の小見出し」(h3 見出し3)

「大見出し」(h2 見出し2)

(これは見出し2を通り越していきなり見出し3がつかわれている為)

 

↓悪い例その2

「大見出し」(h2 見出し2)

「小見出しの中の小見出し」(h4 見出し4)

「大見出しの中の小見出し」(h3 見出し3)

(順番がめちゃくちゃ)

 


 

これを見ても良くわからない方は、

基本的に記事内では見出し2だけ使うようにした方が間違いなく無難ですよ^^

ワードプレス知識0のアフィリエイター必見!

ワードプレスの使い方トップページはこちら

 

●お知らせ

アフィリエイトで5000万円稼いだあの道産子アフィリエイターが2018年9月上旬にクロレラ塾を開校します

募集期間はたったの1日ですので、アフィリエイトでお金を稼ぎ、自分の人生を変えたい人は必見です。

 

クロレラ塾概要ページはこちら

 

 

アフィリエイトでお金を稼ぐ方法

 

ワードプレスの使い方を覚えたらそのままアフィリエイトサイトを作り、個人がパソコン一台でお金を稼ぐ事も可能です。

 

 

↓youtube動画ではアフィリエイトのやり方を無料で公開しているので、是非とも参考にしてみてください!

 

 


 

当サイトはエッジプラス1というワードプレスのテンプレートを使って簡単に作っています。

 

 

 

 詳細はこちら

 


 

↓メルマガで無料情報を受取って月収100万円目指す方はこちらから登録出来ます。

 

アフィリエイトで稼ぐ為のメルマガ

 


 

 

↓クロレラが有料級情報を公開しているアフィリエイトで稼ぐ方法を記載したメインブログはこちら

 

アフィリエイト初心者が稼ぐ方法

 


 

当サイト運営者の自己紹介

サイト運営者:道産子アフィリエイタークロレラ

まったくの知識0の状態で2015年からアフィリエイトを始め、現在では安定して毎月数百万円を稼ぎ続ける

 

↓日本で最大手のアフィリエイトセンターであるA8.netでは現在ブラックSランクに属しています。

↓その実績を認められ、アフィリエイトセンターからは賞状とフィギュアを貰いました。

税金対策で株式会社を設立するレベルまでたった一人で到達し、現在では代表取締役を勤める生粋のアフィリエイター。

 

↓クロレラがアフィリエイトで稼ぐ方法を教えているメインブログはこちら

アフィリエイトで稼ぐ方法

↓クロレラのyoutubeちゃんねるはこちら

アフィリエイトを動画で学ぶ

基本的に無料で裏情報を公開をしているので、それぞれお気に入り登録・チャンネル登録はお忘れなく!

ワードプレスにおすすめのプラグイン
ワードプレスにおすすめのプラグイン

特定商取引法に基づく表示 プライバシーポリシー 運営者情報&お問い合わせ