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

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

 

 

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

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

 

 

 

 

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

 

見出しを使うと、

 

[imglist icon=”circle2″ color=”blue”]
  1. ユーザビリティを上げる(読みやすくなる) 
  2. SEOに効果的
[/imglist]

 

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

 

 

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

 

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

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

 

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

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

 

 

 

見出しの使い方

 

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

 

 

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

 

 

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

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

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

 

 

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

 

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

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

 

 

 

見出しデザインの変え方

 

1.子テーマを作る

 

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

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

 

 

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

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

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

 

 

 

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

 

デザインを決めます。

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

 

 

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

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

 

 

 

 

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

 

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

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

 

 

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

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

 

 

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

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

 

一番下の赤枠の所です。

 

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

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

 

 

 

まとめ

 

いかがでしたか?

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

 

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

 

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

 

 

 

 

 

画像の説明文