【HTML+CSS】おしゃれな見出し(Hタグ)装飾デザイン! ブログやWordPressにコピペ:CSSを使わずHTMLコードのみでもOK

目次

使い方

1. 注意点を先に

分かる方は:pを使いたい見出しのhレベルに

本来、WEB(HTML)上で「見出し」というとhタグ(h1〜h6)を使用します。

が、よく分からない方もいると思うので、どなたでもそのまま使えるように

▼ HTMLコード

は、汎用性のあるpタグで作成しています。

hタグを理解できている方が使われる場合は、ぜひ、HTMLコードのpタグをhタグに変えて(h1〜h6とレベル指定して)くださいね。

フォントサイズ

フォントサイズは一応指定してありますが、見出しのレベル(h1〜h6)etc によって調整されてくださいね。

2. WordPressとアメブロでの使い方

WordPressの場合:CSS+HTMLコード

STEP
「CSSコード」をコピペ

使いたいデザインのCSSコードをコピー。それをワードプレスのCSSファイル(下記参照)に貼り付ける。

WordPressの場合
ダッシュボード > 外観 > テーマの編集 > 右側のバーの「Style.css」

すでに色々とコード(暗号みたいなもの)が記載されていると思うので、それらを一文字も消さないように気をつけてくださいね。一番下に貼り付けるので大丈夫です。

これで、デザインが入りました。

STEP
見出しデザインを入れたい部分に「HTMLコード」をコピペ

記事内の、見出しデザインを挿入したい部分にHTMLコードを貼り付ける。
その際、「HTMLで編集ができるモード(下記参照)に切り替えてから貼り付ける」が重要です。

WordPressのブロックエディタの場合
カスタムHTML

WordPressの旧エディタの場合
テキスト(ビジュアルではなく)

アメブロの場合:HTMLコードのみ

アメブロの場合、上記のやり方では、スマホ閲覧時に見出しデザインが表示されません。

ですので、こちらのやり方をオススメします。ただし、一部のデザインは用意できないので、あるものだけでご利用ください。

アメブロだけでなく、WordPressでもこちらのやり方可能です。「HTMLで編集ができるモード」に切り替えてから、アメブロ用HTMLコードを貼り付ける、でOKです。

STEP
見出しデザインを入れたい部分に「アメブロ用HTMLコード」をコピペ

アメブロ用に別途コードを作りました。それぞれのデザインの、各コードの一番下に用意してあります。

▼アメブロ用HTMLコード

だけをコピーして、見出しデザインを入れたい記事の部分に貼り付けてください。

アメブロでの使い方手順は、以上です。

見出しデザイン

それでは、ここからは見出しデザインのご紹介です。ご自由にお使いください。

下線だけ

下線だけの超シンプルなデザイン

おしゃれな見出し


下線を二重に

下線を二重にして色も揃えて

おしゃれな見出し


下線を破線に

下線を点線……にして色も揃えて

おしゃれな見出し


線を上下に

上下に線を引いて、文字を中央寄せに

おしゃれな見出し


背景色+白抜き文字

背景色を付けて、文字は白抜きに

おしゃれな見出し


背景色+白抜き文字+角丸

角丸にしてみました

おしゃれな見出し


背景色+下線

背景色に下線をつけて、より強調

おしゃれな見出し


角丸線で囲み

角丸の線で囲みました

おしゃれな見出し


二重線で囲み+文字を中央

二重線で囲み、文字を中央に配置

おしゃれな見出し


冒頭に線を

文字の前に線を配置して、アイキャッチに

おしゃれな見出し


冒頭に線+背景

冒頭の線に、背景色と下線もつけました

おしゃれな見出し


冒頭の線を太めに+背景

冒頭の線を太めにして、さらにアイキャッチ力を

おしゃれな見出し


吹き出しに

吹き出しにして、文字を白抜きに

おしゃれな見出し


ぺろっとめくれた可愛いデザイン

全体的に可愛く、ステッチ風とぺろっとめくれたデザイン

おしゃれな見出し


下線を2色に

下線を二色にして、シンプルだけれどデザイン性UP

おしゃれな見出し


下線2色 類似色でまとめる

下線の2色を類似色でまとめてオシャレ度UP

おしゃれな見出し


下線グラデーションでニュアンス

ニュアンス。笑 もっとカラフルにしても面白いかもですね!

おしゃれな見出し


下線を透明へグラデーション

すっきり、下線を透明になるようグラデーションに

おしゃれな見出し


ここから先は、Font AwesomeのWEBアイコンを使って作ったデザインです。Font Awesomeを使えるように設定をしないと、下記のコードを入れても表示されませんのでご注意ください。

▼ Font Awesome導入方法は、下記の記事で解説しています。

あわせて読みたい
Font Awesome(WEBアイコンフォント)の使い方・アニメーションetc カスタマイズ方法も【2020年保存版】
Font Awesome(WEBアイコンフォント)の使い方・アニメーションetc カスタマイズ方法も【2020年保存版】【Font Awesomeとは?】Font Awesome(フォントオーサム)は、WEBアイコンフォントを使わせてくれるサービスです。有料のアイコンもありますが、無料のアイコンも十分に...

レ点マーク:Font Awesome

レ点マークをアイキャッチに

おしゃれな見出し


吹き出し+背景+角丸:Font Awesome

背景の上に、吹き出しマークとテキストを白抜きで載せました

おしゃれな見出し


ペン+背景でしっかりアイキャッチ:Font Awesome

ペンのアイキャッチ+背景色+影で、しっかりと目立たせました

おしゃれな見出し


丸吹き出しの中に星マーク:Font Awesome

丸い吹き出しを作って、その中にFont Awesomeの星マークをIN

おしゃれな見出し


点滅メガホン!:Font Awesome

さらに遊んで、メガホンのマークを点滅させてみました

おしゃれな見出し

応用編:色を変える方法

色はCSSコードの中の # から始まる6桁の英数字。ここを変えることで色が変わります。

例)#ffffff → ffffffを変える

必ず半角で。全角になっているとエラーになります。

カラーコードの調べ方は

下記のようなサイトから、希望の色のカラーコードを調べ、差し替えることで、色を変えられます。

あわせて読みたい
HTMLカラーコードHTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽...

もしくは下記のようなサイトから「あ、好き!」という色のカラーコードに差し替えたり。

原色大辞典
WEB色見本 原色大辞典 - HTMLカラーコード
WEB色見本 原色大辞典 - HTMLカラーコード色の名前とカラーコードが一目でわかるWEB色見本

「あ、意味が分かった! できそう!」という方は、ぜひ挑戦してみてくださいね。きっと楽しいです。

動画で解説プチ講座

色の変え方も含めて、下記のカスタマイズ方法を動画内で解説しています。

  • シンプルな破線をカスタマイズ!
  • 背景色の変える
  • 線の色を変え
  • 線の種類を変える
  • 線の幅を変える
  • 文字色を変える

まとめ

また随時、デザインを増やしたり、解説(Font Awesomeのもですね)も増やしていきますね。

ぜひ、飾り囲み枠デザインと併せてデザインを

下記の記事では、同じように、HTML+CSSで作った飾り囲み枠(ボックス)デザインをご紹介しています。

ぜひ、このHタグデザインと併せてデザインをして、あなたのブログ・WordPressのレベルアップに 🙂

あわせて読みたい
【HTML+CSS】おしゃれな飾り囲み枠(ボックス)デザイン! ブログやWordPressにコピペ:CSS使わずHTMLコ...
【HTML+CSS】おしゃれな飾り囲み枠(ボックス)デザイン! ブログやWordPressにコピペ:CSS使わずHTMLコ...見出し(Hタグ)デザインを別ページでご紹介! ぜひ「囲み枠+見出し」セットでデザインしてみてください。(2020年7月20日)https://poppyou.com/heading-design.htmlブ...

マンツーマンでのサポートは

「うまく出来ない……」「もっとこう出来たらいいのに!」といったご相談や「さらにブログを素敵にしたい!」etc の個別相談は、個人カウンセリングでお受けしています。

あわせて読みたい
個人カウンセリング
個人カウンセリング事例を見る料金を知る流れを確認実際のクライアント様からいただいたお声です【どんなことをしているの?】実際に個人カウンセリングを利用されたクライアント様のお話...

PROFILE

WEB集客する個人経営・事業主さんを【デザイン制作 × SEO × ライティング】でサポートする人。 プロフィール

記事のシェア大歓迎! ぜひぜひお気軽にSNSやHPでシェアしてくださいね。もっと情報を密に受け取りたい方にはメルマガ登録がオススメ。

目次
閉じる