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

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

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

見出しの役割を教えて!

 

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

 

*読んでほしい人*

WordPressを始めたばかりの人

見出しを設定するためのコードを調べている人

 

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

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

 

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

 

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

 

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

 

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

殺風景です。

 

もちろん

 

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

 

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

 

*見出しのない記事*

オリジナリティがない

読みにくい

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

 

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

 

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

 

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

 

*補足*
わたしの使用しているテーマはオープンケージのアルバトロスです。
別テーマの人でも同じように設定できると思うので試してみて下さい。

 

見出しはSEO対策にもなる

見出しの役割

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

 

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

 

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

 

見出し毎に、

 

  • 何が書いてある章か
  • どこがポイントか

 

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

 

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

 

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

 

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

 

デザインを変更する方法

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

 

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

 

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

 

1.見出しの役割
  • 記事の内容が一目でわかる
  • 読み返した時に何を書いたか分かりやすい
2.見出しの効果
  • SEO対策になる
  • 読みやすい記事を書いて固定の読者をGET♪
  • ブログにオリジナリティがでる

 

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

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

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

 

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

 

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

 

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

 

これで吹き出しの▼は消えました。

 

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

 

リボンのコードです

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

コードはこちら。

 

コードの意味をチェック

 

「border-left: 10px」の「”10px”」は線の太さ、「#EE8EA0」は線の色を意味しています。

 

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

 

HTMLにこのコード

 

 

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

 

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

 

カラーコード表はこちら

 

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

 

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

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

 

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

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

 

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

 

コードはこちらです。

 

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

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

 

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

 

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

 

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

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

 

 

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

さりぃ♥
デザインはほどほどに。

 

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

 

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

アバター

「さりぃ ❤」です。 IT関連の一般企業勤めのアラサーOL。 2回の転職を経て現職は3年目に突入。 時の流れに身を任せて、気付けば今年で社会人8年目! フリーランス・独立を夢見て副業に勤しむ毎日を送っています。 目標は副業が本業の収入を超えたら起業すること♪ 自分がWordPressを始めた頃の気持ちをテーマに、初心者さんに役立ちそうな記事を丁寧に書いています。 あとは日々こつこつしている副業とその成果についても更新中です♥ 少しでもお役に立てる情報をお届け出来ますように・・