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

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

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

見出しの役割を教えて!

 

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

 

*読んでほしい人*

WordPressを始めたばかりの人

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

 

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

 

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

 

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

 

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

 

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

 

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

 

殺風景です。

 

もちろん

 

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

 

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

 

*見出しのない記事*

オリジナリティがない

読みにくい

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

見出し毎に、

 

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

 

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

 

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

 

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

SEO対策にもなる

 

と言われています。

 

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

 

ちなみに、

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

リボンのコードです

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

コードはこちら。

 

コードの意味をチェック

 

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

 

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

 

HTMLにこのコード

 

 

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

 

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

 

カラーコード表はこちら

 

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

 

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

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

 

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

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

 

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

 

コードはこちらです。

 

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

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

 

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

 

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

 

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

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

 

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

さりぃ♥
デザインをこるのはほどほどに。

 

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

 

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

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

現在このブログテーマはOPEN CAGEの『ストーン』に変更されています。

*Share this article !*

コメントを残す

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

CAPTCHA


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