【簡単】WordPressの見出しデザインを自分好みに装飾する方法

皆さん気付いてますか?

実は当ブログの見出しを変更したんです!

前より良くなったでしょ(^^

 

今回はWordPressの見出しデザインを
自分好みに装飾する方法をわかりやすく解説していきます。

難しそうだけど意外と簡単にできるんです♪

 

リファインSNOWの見出しデザインは微妙…

リファインSNOWはとても使いやすくて
凄く良いテンプレートだと思います。

(お世辞じゃなくマジで)

 

しかし、

「この見出しはちょっとなー」って正直思っていました(^^;

なんか固過ぎるんですよね。

特にh4(見出し4)は使いたくても使いづらいレベルのデザイン性…(^^;

前回の記事でh4をどうしても使いたくて、
使ってみましたが・・・

 

「やっぱ無理!」

って事で、思い切って
見出しデザイン全体(h2~h4)を見直してみました(^^

 

それがこれ!

 

 

シンプルにまとめてみました!

どうですか?
前よりも良い感じじゃないですか?

ちなみに見出しのカラーは、
テンプレートのイメージカラーである紺色で統一しています。

 

実は皆さんが思っているよりも
すごーく簡単に見出しデザインが変更できます。

では早速やり方を解説していきますね!

 

WordPressの見出しデザインを変更するには

見出しデザインを変更するには、
テンプレートの『CSS』をいじる必要があります。

・ ・ ・

・ ・

ちょっと待ってください!

CSSって聞いて諦めないでください(^^;

 

 

めちゃくちゃ簡単ですから!

いじるって言ってもほぼ『コピペ』するだけですから!

 

大丈夫です。誰でもできますよ(^^

 

見出しデザインのCSSを探せ!

WordPress管理画面の『外観』から『テーマ編集』を開いてください。

すると『スタイルシート(style.css)』ってありませんか?

右側のテーマファイル内のどこかにあるはずです。

 

見つけたらクリックしてファイルを開いてください。

 

リファインSNOWの場合は、

【注意!】このファイルは編集しないでください。

って書いてありますが華麗にスルーします。

 

直接スタイルシートを編集するため
不安な人は念のためバックアップ取っておいた方がいいです!

 

僕はもちろん
バックアップとりましたよ。

 

次に、ファイル内をスクロールしていって、

『見出し装飾』または『変更したい見出しタグ(h1~h6)』を探してください。

 

↑このような箇所です。

どうでしょう。見つかりましたか?

 

キーボードの『Ctrl』+『F』で
『h2』や『h3』等を検索かけた方が早いかもしれません。

 

見つかったら次に進みましょう(^^

 

コピペで見出しをカスタマイズする方法

 

「どんな見出しに変更しようかしら…」

「俺ってデザイン力ないし…」

「そもそもCSSなんて全くわかんね…」

 

はい。

そんなあなたの悩みを解決します。

⇒【CSSにコピペでOK】プロデザイナーが作った見出しタグはこちら

 

どうでしょう?

お気に入りの見出しデザインは見つかりましたか?

 

僕はこちらで選びましたが、
他にも探せば見出しデザインのCSSコードを
公開しているサイトは色々ありそうですよね。

 

ちなみに見出しのカラーは後から簡単に変更可能です。

先にお気に入りの形を探してください。

 

お気に入りのCSSコードが見つかったら!

早速、スタイルシートにコピペしていきましょう!

編集箇所はこちらです。

変更したい見出しタグの{}の中を張り替えていきます。

スタイルシートの{}の中を全消しして、
お気に入りのCSSコードを張り付けましょう。

 

それだけでOK!

簡単ですよね?

 

見出しタグのフォントサイズを変えたい時

先ほど紹介したサイトのCSSコードには、
文字サイズの指定がされていません。

なので{}の中に、以下のコードを追加して下さい。

font-size: 16px;

数字は好きな文字の大きさを指定しましょう。

 

見出しデザインのカラーを変更したい時

コピペしたCSSコードの中にあるカラーコードを変更すれば
任意の見出しカラーにすることができます。

⇒カラーコード表はこちら

 

また、CSSコードによっては、
『RGB』でカラーの指定をしているコードもあります。

その場合は、rgb()の中の数字を変更します。

RGB値を算出するには以下のツールを使うと便利です。

⇒RGB値からカラーコードに変換するツール

 

見出しデザインが反映されない場合

キャッシュが残っている可能性があるので、
ブラウザのキャッシュをクリアしてみて下さい。

それか他のブラウザで確認してみても良いと思います。

 

他には、コードのコピペミス、編集する箇所が間違っている
等が考えられます。

 

WordPressの見出しデザインをオシャレにできる!

このように簡単に変更できるので、
自分好みの見出しデザインにカスタマイズしてみて下さいね!

 

それにしても、ゆかちぃ可愛いですよね・・(*^^*)

今後もフリー素材ゆかちぃをガンガン使っていきます!

(意味の分からない宣言)

 

【収益を一気に加速させる】MOMOTA式アフィリエイト講座

MOMOTAメルマガ
↑ 詳細はこちらをクリック ↑

  • 【初心者必見】アフィリエイトの正しい実践手順と思考法
  • 現在も成果を上げ続けている最新ノウハウの提供
  • 検索結果の上位表示を狙う圧倒的なブラックハットSEOの暴露
  • 遠回りせずに最短ルートで月収100万円を達成させる方法  …etc.
  • 期間限定】メルマガ登録特典があります♪
氏名 
メールアドレス 

2件のコメント

  • tnton

    おはようございます。
    ワードプレスがなかなか思う様に使いこなせなくて半泣き状態の時があります(;´・ω・)
    凄く丁寧に分かり易く説明されていて、参考になりました。
    ありがとうございます。

    • MOMOTA

      おはようございます!WordPress難しいですよね(^^;

      見出しデザインについては、変更したついでに備忘録的な感じで書いてみました。参考になって頂いたみたいで嬉しいです(^^

      またWordPressについて書きますね~。コメントありがとうございました!

コメントを残す