【Word Press】見出しデザインの変え方

このブログは『Word Press』を使っていますが、

記事をいくつか書いていると、見出しを目立たせたい！と思うようになりました。

 

 

調べても、htmlとかcssとか出てくると”ムリ～”となって諦めていましたが、

やっと分かりましたので、私のやり方を紹介します。

 

 

 

 

見出しを使う理由と使い方

 

見出しを使うと、

 

[imglist icon=”circle2″ color=”blue”]

1. ユーザビリティを上げる（読みやすくなる）　
2. SEOに効果的

[/imglist]

 

など使用する価値がありますので、ぜひ使いましょう。

 

 

文字を見出しにするには見出しタグを使います。

 

<h1><h2>のようなタグで文章を囲みます。

例）　<h1>テキスト</h1>

 

数字の大きい方が重要度が高く、

<ｈ1>は大体ブログタイトルで使われていますので、見出しでは<ｈ2>以下を使います。

 

 

 

見出しの使い方

 

私は間違って使っていたのですが、記事内の文字を目立たせたくて大きくする時に、

 

 

この段落を使って大きくしていました。

 

 

本来は<font size=“○○px”>テキスト</font> ※テキストのサイズを変えるタグ

にしないといけないのに、この段落を使うと

<h2>テキスト<h2>とかになって、見出し扱いになってしまいます。

 

 

私はタグを理解していなかったので、とりあえず見た目だけ大きくなって安心していたんです　(^_^;

 

文章の途中に見出しタグが入っているという、訳の分からない記事になっていたんですね。

過去記事を直すのも一苦労でした💦

 

 

 

見出しデザインの変え方

 

1．子テーマを作る

 

見出しを変えたり、何かカスタマイズする時は子テーマの方を変えます。

親テーマを編集すると、アップデートした時に編集した内容が消えてしまうからです。

 

 

子テーマのわかりやすい作り方は

【Word Press】エックスサーバーで子テーマを作る方法

に書いたので読んでみてください。

 

 

 

2．見出しのデザインを決める

 

デザインを決めます。

私が使わせてもらっているのはサルワカさんのサイト

 

 

かわいいし、説明も分かりやすいです。反映されない時の対処法も教えてくれます。

探せば他にもありますよ。

 

 

 

 

3．スタイルシートに追加する

 

好みのデザインのcssをコピーして子テーマのスタイルシートに貼り付けます。

（サルワカさんの場合　/＊線の種類なども全部貼り付けて大丈夫です）

 

 

Word Pressの子テーマを有効にしてあると思うので、

『外観』→『テーマの編集』でスタイルシート(一番上）を選択します。

 

 

その下の枠『選択したファイルの内容』の一番下に、

好きなデザインのCSSをそのまま貼り付けます。

 

一番下の赤枠の所です。

 

これでファイルの更新をすれば反映されます。

できていなければ、【shift】+【F5】を押すと反映される場合もあります。

 

 

 

まとめ

 

いかがでしたか？

デザインにこだわるなんて、実はまだ早いのですが見出しくらい変えたいですよね。

 

cssとかもちゃんと説明を読んでみれば案外簡単なので、いつかちゃんと勉強したいですね。

 

いちばんやさしいWordPressの教本第3版 [ 石川栄和 ]