• WordPress
    初めてのブログの作り方!初心者が最低限抑えておきたいこと
  • アドセンス以外の広告で稼ぐには ブログ運営
    アドセンス以外の広告で稼ぐ!おすすめクリック広告をご紹介
  • ランディングページ(LP)の作り方と構成について ブログ運営
    ランディングページ(LP)の作り方・構成!重要な7つの要素とデザイン
  • ランディングページはテンプレートを使えばデザイン性の高いページが簡単に作れる ブログ運営
    ランディングページはテンプレートを使えばデザイン性の高いページが簡単に作れる!
  • SEO
    ブログのPVを3日間で1.5倍上げる方法
  • ランディングページが作れない!そんな悩みで作るのを後回しにしてませんか? ブログ運営
    ランディングページが作れない!そんな悩みで作るのを後回しにしてませんか?
  • ランディングページ
    初心者がたった1時間でプロ並みのキャッチコピーを手に入れる方法
  • 無料オプトインアフィリエイトの始め方!初心者にオススメな案件とASP ブログ運営
    オプトインアフィリエイトの始め方!初心者にオススメな案件とASP
  • 便利ツール
    検索順位チェックツール!変動や推移まで保存出来るオススメツールをご紹介
  • 私が実際に使っている便利な無料ツールと書いてあるイラスト お得情報
    便利な無料ツール!私が実際に使っている3選

初心者の方でも簡単に見出しのデザインを変更出来るようにコピペでOKな見出しのCSSのサンプルを集めました。

そして、そのサンプルを使うためのCSSの設定方法についても紹介します。

※お使いのテーマによっては、デザインが崩れてしまう場合もあるので「class」を使う見出しの設定方法も一緒にご紹介します。

見出しをオシャレなデザインに変更して、アナタのサイトをオシャレに変身させちゃいましょう!

見出しCSSの設定方法

見出しは、記事を読みやすくする為に必要なものです。

今回は、様々なデザインの見出しCSSのサンプルを用意しました。

まずは、CSSの設定方法についてです。

あなたのお使いのテーマの中に「style.css」のいうスタイルシートを探してください。

「外観」⇒「テーマの編集」⇒「子テーマ」⇒「style.css」

※子テーマを使ってない方は、「外観」⇒「テーマの編集」⇒「style.css」

その中に、下記で紹介する見出しのCSSをコピーして貼り付けるだけです。張り付けたあとは、ファイルを更新ボタンを忘れず押してね。

【例】最初の「p#sample1」の部分をお使いになる見出し(h2~h6など)に変更してお使いください。

記事作成画面の入力は下記の通り

※お使いのテーマによっては、(h2~h6など)を設定するとデザインが崩れる場合があります。

その場合は、「class」を使って設定すれば大丈夫です。

次は、「class」を使った見出しCSSの設定方法についてご紹介します。

「class」を使って見出しデザインを変更する方法

上記と同じでお使いのテーマの中の「style.css」に貼り付けます。

※上記の「p#sample1」の部分を先ほどは変更しましたが今回はこのままでもOKです!

あなたの分かりやすいものにしてもOKです。

そして、記事作成画面では下記のように記載すれば「class」を使った見出しになります。

記事作成画面の入力は下記の通り

※「p#sample1」の部分を変更した場合は変更した文字にして書いてくださいね。

これで、見出しCSSの設定方法の説明は終わります。

次に、実際に使える見出しCSSのデザインサンプルをご紹介します。

見出しデザインのサンプル見本

まずは、見本です。

それぞれ、何を設定しているのか簡単に説明しますのでサンプルを変更しあなただけのデザインに変更したい場合は参考にしてください。

color

見出しの文字色をカラーコードで指定します。文字色を変更しない場合は、記載の必要はありません。

background

見出しの背景色をカラーコードで指定します。背景色を変更しない場合は、記載の必要はありません。

border(top,right,left,bottom)

「px」で線の太さを指定します。線の種類は「solid(実線)」「double(2重線)」「dotted(点線)」「dashed(破線)」など数種類の線が使用できます。線の色をカラーコードで指定します。

padding

上下左右の間隔を指定します。
値を1つだけ記述した場合は「上下左右」の間隔を指定します。
値を2つ記述した場合は「上下」「左右」の間隔を指定します。
値を3つ記述した場合は「上」「左右」「下」の順に間隔を指定します。
値を4つ記述した場合は「上」「右」「下」「左」の順に間隔を指定します。

font-weight: bold

見出しの部分の文字を太くする場合は、記載します。

background-image

背景に画像を使用したい場合は画像のURLを記述します。画像を使わない場合は、記載の必要はありません。

では、ここから実際にコピペでOKな見出しCSSのサンプル集をご紹介していきます。

シンプルなデザインのサンプル

左線

左線+下線

左線+下線(点線)

左線+下線(大きめの点線)

二本の左線

二本の左線+下線

二本の左線+下線(点線)

二本の左線+下線(大きめの点線)

上下線

二本線で囲む

立体的なボックス風

立体的なボックス風

二重線

左右に日本線

角が丸いボックス型

丸型

ロケットの形風

タグ風

立体のボックス風

【スポンサーリンク】

オシャレなデザインのサンプル

四角が二つ□

四角が二つ+色付け

四角が二つの別デザイン

四角が二つの別デザイン

四角が二つの別デザイン

蛍光ペン風

2色のボーダー

グラデーション

グラデーション

2色のボーダー

左線と塗り

左線と塗り(立体)

左線と四角い塗り(立体)

両線と四角い塗り(立体)

ステッチ風

二重線

タグ風

左側を尖らせたような形

左側を尖らせたような形

文字が光っているように見えるバー

両側が浮いているように見えるバー

内側に凹んで見えるバー

吹き出し

リボン風

リボン風

ボーダーのリボン

角が剥がれているようなデザイン

ステッチ風

ボーダー

手書き風

矢印

最初の文字のデザインを変える

ボーダー

ボーダーの下線

アイコンを使ったデザインのサンプル

FontAwesomeを使うことでアイコンを使った見出しも簡単に出来ちゃいます!

FontAwesomeを使うには、wordPressのヘッダーにある魔法の一文を入れるだけで使えるようになります。

(もう一つ、アイコンをダウンロードして使う方法もありますが私的には、この方法がオススメ!なので、ダウンロードして使う方法の説明は省かせてもらいます)


下記のコードをコピーして、お使いのテーマの編集でヘッダー部分に入れてください。

上記コードを<head>〜</head>の中に貼り付けてください。

それをすると、下記のCSSをそのまま使えばアイコン付きの見出しが使えるようになります。

アイコンを変更する場合

アイコンを変えたい場合は、FontAwesomeのサイトのアイコン一覧から好きなアイコンを選びその中に書いてあるUnicode:をコピーして変更すればOKです。

content: "\f046";/*アイコンのユニコードを記入*/

の黄色の部分をそのアイコンのユニコードに変更すればOKです!

二重線とアイコン

アイコン付きのボーダー

両線とボーダー

両線とボーダー

左にアイコン

左にアイコン

両側にアイコン

両側にアイコン

左側にアイコン

左側にアイコンとグラデーション

左側にアイコン

左側のアイコンの位置をちょっと上に

左側のアイコンの位置をちょっと下に

左側のアイコンの位置をちょっと上に

立体的なバーにアイコン

立体的なバーにアイコン

ステッチ風にアイコン

ステッチ風にアイコン(丸型)

三角形にアイコン

三角形にアイコン

三角形にアイコン(立体)

三角形にアイコン(ボーダー)

タグ付きのバー

タグ付きのバー

タグ付きのバー

タグ付きのバー

ワンポイント

ワンポイント付きのバー

ワンポイント

【スポンサーリンク】
関連キーワード
  • 記事内にphpを直接使わずPCとスマホの条件分岐する方法
    記事内にphpを直接使わずPCとスマホの条件分岐する方法
  • WordPress子テーマ作り方・有効化方法!カスタマイズ前に必ず準備しよう
  • パソコンのみで表示されるテキストウイジェットを作る方法について
    賢威7ウイジェット追加!パソコンのみで表示されるテキストウイジェットを作る方法
  • 見出しデザインCSSの設定方法!コピペ出来るサンプル82選
  • スマホのみで表示されるテキストウイジェットを作る方法について
    賢威7ウイジェット追加!モバイル(スマホ)のみで表示されるテキストウイジェットを作る方法
  • 賢威7の装飾タグ一覧!WordPressバージョン
    賢威7の装飾タグ一覧!WordPressバージョン
ついに浮気しちゃいました!

ついに、浮気をしてしまいました・・・そう、ワードプレスのテーマです。

これまで、有料のテーマは何個も購入してますが、この便利屋のブログはCSSの記事とかの変更が面倒なので、なるべくテーマの変更を控えてましたが、一目ぼれをしてしまい衝動を抑えられず、ついに変更に踏み切りました。

見てもらいたい記事をスライダーで表示させることが出来たり、CSSが分からない人でも「入力補助」の機能を使って記事作成画面で、簡単にボタンの作成とかランキングの作成、会話の吹き出しの作成などが出来るので、マジで楽!

これまで、CSSやらいじってカスタマイズをしてきましたが、それがこのテーマには最初から入っているので、驚き。1年半前に出会っていれば、もっと記事に時間がかけられて、収益も上がってたのかな。。と思いつつ苦笑。

とりあえず、ブログを始めたばかりの人にとっても始めて1年以上経ってる私のような人にとっても、このテーマは欲しかった機能が揃ってる!という感じでした。まー私の説明よりも公式ページでその魅力を確認してみてください。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事
ブログのPVを3日間で1.5倍上げる方法
SEO
2017年の6月に立ち上げた別のブログがある事をしたおかげで、1.5倍アクセスがアップしました。 この期間中、新しい記事の投稿は一切してませ...