見出しのデザインをコピペで簡単にカスタマイズする方法

お使いのWordPressを
もっとかっこよくしたい方へ

コピペで簡単にデザインを
変える方法がありますよ!


あび

この見出しのデザインを
もっとかっこよく変えたいのだけど、
どうやったらできるの?

 

 


村重

ああ、それはね、
CSSを書き換えたらできるよ


あび

CSSってなんじゃ・・・?

 

CSSの概要

CSSというのは、

そのまま「シーエスエス」と読むのですが、

簡単にいうと、サイトのデザインについて
書いてあるプログラムのことです。

プログラムの話になるので
ややこしく見えるかもしれませんが

よく見たら、わりとシンプルな英語で書いてあるので
(英検3級の私でも大丈夫な程度)
慣れたら、そんなに怖いものではありませんよ。

3回くらいいじってみたら
慣れていただけるんじゃないかなと思います。

気軽に遊んでみてくださいね^^

 

CSSをカスタマイズしたときのイメージ

cssでどんなことができるのか?
見出しを例に、流れをご説明しますね。

たとえば、私の見出しのデザインは
こうなっています。

上の大きめなのがピンク、

下のやや小さめなのが、
ベージュに、アクセントにちょっと紫を入れています。

ここでは、下のやや小さい方を、例にとってご説明しますね。

下の小さい方は見出し(head lineヘッドライン)の4番なので
プログラム上は「h4」と呼ばれます。

見出しはhの1から6まであります。
ブログを書くときにいれるコレですね。
 ↓ ↓

このh4のCSSがどうなっているのか、
詳しく見てみましょう。

なんか、ごちゃごちゃ書いてありますが
同じ紫色が見えますね。

なんだかよくわかりませんが、
じゃあ、この色の番号を変えてみましょう。

色の番号は、「Web色辞典」がわかりやすいですよ。
https://www.colordic.org/

「クリムゾン dc143c」でも入れてみますか!

  ↓ ↓

すると・・・

赤になりました!!
ださいけど(笑)

使い方としては、こんなかんじです。

一箇所書き直すだけで、全てに適用される

CSSの便利なところは、この一箇所の番号を
書き換えるだけで、

これから書くh4はもちろん
今までに書いたh4も全部、まとめてごっそり
全部同じデザインになるんです。

 

さらに、CSSの内容がよくわからなくても
CSSのデザインをたくさん
紹介してくれているサイトがあるので

コピペするだけで

がらっとデザインが変えられちゃいます^^

とっても面白いですよね^^

見出しのカスタマイズ手順

では、見出しをカスタマイズするときの
実際の使い方をご案内します。

テーマは「Graffeジラフ」でご説明します。

どんなデザインにするか選ぶ

まずは、現在のデザインを、
どう変えたいかを決めましょう。

インターネットで検索すると、いろんなサイトがありますが

おすすめはこちら
私も利用させていただいています^^

CSSのコピペだけ!
おしゃれな見出しのデザイン例まとめ68選

https://saruwakakun.com/html-css/reference/h-design

 

このサイトから、おしゃれ系の
「角がぺろっと剥がれるデザイン」にしてみますね。

デザインを選んだら、「コードを表示」を押します。

そうすると、CSSが出てくるので、
コピーしておいてください

<出てくるCSSの例>

 

「CSSカスタマイズ」にはりつける

では、ブログの画面から
上部の「カスタマイズ」を押してください。

 

すると、左側からメニューが出て来ますので、
一番下の「追加CSS」を開きます。

 

CSSを記入する欄が出て来ますので
そこに、先ほどコピーしたCSSを貼り付けてください。

 

 

すると・・・

こんなに簡単にデザインがかわりました!!!

これでお好きなデザインに、
カスタマイズできますね。

 

見出しの番号を変更する

もともとの、サルワカさんのサイトで
ご用意くださっているCSSは「h1」
(見出しの1番用)と書いてあります。

ほかの見出しに使いたいときは、
このh1の数字を書き換えてあげれば使えますよ。

ですが・・・

 

トラブル発生!!!

これで完了、らくちん♪
と、思っていたら・・甘くない、トラブル発生です。

h1の時は、うまく表示されていたのに
h3に変えたら、なんだか表示がおかしくなってしまいました。

お使いのテーマや、見出し番号によっては
うまく反映されない場合があります。

その原因と対策は、こちらにまとめました。

合わせてご覧ください。

Lightningの見出しがカスタマイズできない理由と解決策

Follow me!

村重敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。