WordPress（ワードプレス）の見出しって何？見出しの意味は？工夫すると読みやすくなる！見出しをおしゃれにデザインしよう♪【＊CSS・HTMLコードあり＊】【オープンケージ＊アルバトロス】

ワードプレスので書いたブログの記事に見出しをつけたい。

見出しのコードを調べている。

見出しの役割を教えて！

こんな人の疑問解消します😊

ワードプレス を使って書かれたブログをみていると、こんな風に色付きの縦線がついたタイトルを目にしませんか？

このタイトルはWordPressのブログでは”見出し”といいます。

見出しは投稿画面で文の始めに設定するだけで簡単に設定できます。

ただ文章を読むより、文面に強弱がついて読みやすいし、なんだかおしゃれ。

WordPress初心者の頃、記事を書くと勝手に文面もいい感じに編集されるのだと思っていました😊💦

でも実際は、何も設定しない状態の記事はこんな風に・・

殺風景です。

もちろん

こっちの方がシンプルで読みやすい

と思う人もいるかもしれませんが、個人的には

と思うので、見出しのデザインにはこだわりたいところです。

ブログの仕様によっては変更できるデザインに限りがありますが、この縦線を入れるデザインはシンプルで簡単♪

すぐに出来てしまう上に、自分のブログに合わせカラーも変更できるのでおすすめです😊

デザインを変えるとブログが一気にサマになります！

見出しはSEO対策にもなる

見出しの役割

見出しのない文章にはメリハリがなく、そのままだと目次のない本みたいです。

本を読む時でも、目次を見れば、章毎に何が書かれているのか分かりますよね。

ワードプレス の見出しも同じ役割りをします。

見出し毎に、

を書くと、読む側から見てもとっても見やすい文章が出来上がるのです😃

見出しを使って整理された文章は検索エンジンにも評価してもらいやすく、SEO的にもいいと言われています。

文章が読みやすいと記事を読んでもらえる確率も上がるし、正にいいことづくめの機能。

見出しは、『見出し６』まで設定が出来るようになっていますが、カスタマイズしない状態だと、文字が大小になるだけです。

デザインを変更する方法

WordPressの見出しは割と自由にデザイン可能です。

自分のブログのカラーを出せるような、❤おしゃれでかわいい見出し❤にしてみるのも楽しいと思います。

CSSやHTMLにコードを書きこむと割と自由にカスタマイズできます。

見出しをデザインする方法

見出しのデザインを紹介したブログはたくさんあります。

わたしはまだ自由にコードをさわれるレベルではないので、基本的には他のブロガーさんが記事にして下さっているコードをひろってきます😅

わかりやすさで言うと、こちらのブログがブロガーさん御用達。

個人的にはこちらの方のデザインする見出しがガーリーなデザインで気に入っています💕

このブログで使用しているコードは以下の通り。

見出し２に使用しているコード：リボンのデザイン

まずは記事の本文のメインの見出しになる『見出し２』のコードから。

見出し１はタイトルに使われいてるので、WordPressの記事はこの見出し２から始まります。

見出し２は記事の中では一番大きく目立つ副題的な存在です。

アルバトロスのテーマだとデフォルト表示は吹き出しなので、そのまま見出し２を設定すると、吹き出しのデザインが反映します。

わたしはガーリーなデザインが好きで、他に同じテーマを使用している人と比べて少しオリジナル感を出したかったので、リボンの形になるコードを使用することにしました❤

はじめこちらのサイトのコードを参考にしてデザインしていたのですが、このままのコードを使うとデフォルトの吹き出しデザインと重なってデザインが崩れたりと、なかなかうまくいきませんでした・・。

現在使用しているアルバトロスのテーマはお問合せ窓口があるので、そこに問い合わせしてリボンのコードを教えてもらいました😅

まずはこのコードをCSSに入力して吹き出しの三角形を消します・・

でもこのままではリボンのデザインにはならないので、併せてこのコードもCSSに入力。

リボンのコードです

CSSのコードが入力できたらHTMLにはこのコードを入力します。

※<>のコードで見出しをはさみます。

これでリボンの見出しが完成します！

吹き出しの逆三角形の消し方はアルバトロスのサイトにも載っています。

リボンのデザインにするのなら、参考に出来るのは吹き出しの▼を消すコードまでです。

リボンのデザインにする場合は上に書いたコードを足して下さいね。

「#f70c6a」のカラーコードを変更すると色も変えることができます。

見出し３に使用しているコード：縦線を引くデザイン

私は見出し２の内容をさらにテーマ分けする時に見出し３を使用しています。

最初に紹介したシンプルでおしゃれな縦線のラインが入ったデザインです。

この見出しもいろいろな人のブログで見かけますよね😊

コードはこちら。

コードの意味をチェック

CSSのコードだけだとこんな感じでシンプルな縦線だけが入るので

HTMLにこのコード

を入力してカラーをつけて下さいね。

「#EE8EA0」のコードを変えれば色を変更出来ます。

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

「10px」の数字をかえれば線の太さの変更ができます。

例えば、「5px」にして、カラーコードを「#ff1745」に変更すると、細めの赤色の縦線になります。

線が細いと、繊細で上品な雰囲気のデザインになりますね😊

見出し４に使用しているコード：薄く下線を引く方法

見出し４は補足事項や、FontAwesomのアイコンと併せてチェック項目を強調したい時に使っています。

薄っすらとグレーの下線が入ったデザイン。

コードはこちらです。

下線はCSSにコードを入力するだけで反映します。

これで文章を見出し４に設定するとグレーの下線が入るのですが、

これでけでは何かものたりない

という人は、HTMLからFontAwesomのアイコンのコードと、

文字に色を付けるコードを合わせるて入力すると

こんな風にアレンジすることもできます♪

このデザインのコードはこちらです。

※ただ、このコードはクラッシクエディターに入力すると、更新時に自動削除されてしまうことがあるので、カラー変更はCSSからカラーコードを指定する方法がおすすめです。この辺はFontAwesomの使い方の記事で書きますね。

テーマによってはコードのデザインがうまく反映しない

テーマによって使用できるコードが違う

使用するブログのテーマによってはデフォルトの見出しのデザインが決まっているので、コードを上書きするとデザインが崩れてしまうことがあります。

また、ネット上で紹介されているコードはそのままコピペしても、ブログ上にうまく反映しないことも・・。

私も今の見出しに設定するまでいくつかコードを試したのですが、同じデザインのコードでもうまく反映するコードとしないコードがあり、やっと完成したのがこの記事に書いたコードでした😅

アルバトロスのテーマを使用している方はこの記事に書いたコードであれば確実に反映します。

よかったら参考にして下さいね。

反映に時間がかかることがある

見出しにデフォルトの設定があるブログテーマを使用していると、CSS/HTMLのコードを追加しても画面上に反映するのに時間がかかるかもしれません。

先に書いた通り、アルバトロスのデフォルト設定の吹き出しがなかなか消えず、このブログでは見出し２に入力したコードが画面上に反映するのに半日～1時間かかりました。

最初コードの入力が間違えているのかと思い、コードを変更して何度かやり直してみたりと時間をかけてしまいました。

時間を置いて画面を再読み込みしてみるとうまく反映することがあります。

画面にうまく反映しないと、原因を探すのに無駄に時間をかけてしまいます。

デザインに時間を取られると肝心の記事書きがおろそかになってWordPressの挫折原因にもなるので要注意ですね。

デザインはほどほどに。

今回の記事は特に同じブログテーマを使用している人に参考にして頂けると思うので、時間短縮、お役立ち情報になれば幸いです。

それでは本日はこの辺で😊💤