ワードプレスの見出しのデザインをおしゃれにしよう♪【オープンケージ＊アルバトロス】

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

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

見出しの役割を教えて！

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

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

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

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

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

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

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

殺風景です。

もちろん

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

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

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

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

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

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

＊ブログテーマ OPEN CAGE はこちら＊

ワードプレスのSEO対策に見出しを使おう*

ワードプレスの見出しをおしゃれにする方法

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

本を読むとき目次を見れば、章毎に何が書かれているのか分かります。

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

見出し毎に、

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

見出しを使って整理された文章は

検索エンジンにも評価してもらいやすく、

SEO対策にもなる

と言われています。

文章が読みやすいとそれだけたくさんの人に記事を読んでもらいやすくなります。

ちなみに、

このブログはOPENCAGE（オープンケージ）のアルバトロスのテーマを使っていますが、

見出しは、『見出し６』まで設定が出来るようになっています。

カスタマイズしない状態だと文字が大小になるだけ。

WordPressの見出しは割と自由にデザインをアレンジできます。

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

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

ワードプレスの見出しデザインはコピペでOK！

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

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

このブログで使用しているコードも紹介していきますね。

ワードプレス見出しデザイン リボンのコード

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

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

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

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

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

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

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

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

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

リボンのコードです

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

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

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

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

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

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

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

ワードプレスの見出しデザイン 縦線を入れるコード

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

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

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

コードはこちら。

コードの意味をチェック

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

HTMLにこのコード

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

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

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

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

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

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

ワードプレスの見出しデザイン 薄い下線を引くコード

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

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

コードはこちらです。

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

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

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

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

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

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

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

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

ワードプレス cssが反映されないときはどうすればいい？

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

使用するブログのテーマによってはデフォルトの見出しのデザインが決まっているので、

コードを上書きするとデザインが崩れてしまうことがあります。

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

私も今の見出しに設定するまでいくつかコードを試したのですが、

同じデザインのコードでもうまく反映するコードとしないコードがあり、やっと完成したのがこの記事に書いたコードでした😅

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

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

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

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

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

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

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

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

デザインに時間を取られると他の作業がおろそかになってWordPressの挫折原因にもなるので要注意です。

デザインをこるのはほどほどに。

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

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

＊ブログテーマ OPEN CAGE『アルバトロス』はこちら＊