「見出し」とは?

「見出し」とは、この上に表示されている「見出し」とは?という部分のことです。

サブタイトルなどと呼ばれ、記事の内容をわかりやすくグループ分けするための区切りです。

HTML編集としては「hタグ」と呼ばれるh1~h6まであるタグを使って設定し、重要度によって使い分けます(h1が重要度が高く、h6が重要度が低い)。

「h1タグ」は記事タイトルに使われ、サブタイトルは「h2タグ」「h3タグ」とかになります。

初期状態であればテンプレートの見出しのデザインのままなので、好みの見出しデザインに変更してみましょう。

テンプレートを編集する

FC2ブログにログインしたら管理画面より「テンプレート」を押します。

FC2ブログの見出しデザインを変更する方法3 (1)

テンプレートを複製

テンプレートを編集するときには、

必ず「複製」を行い、元テンプレートの状態を保持したうえで編集するようにしましょう。

編集したいテンプレートの「複製」を押します。

FC2ブログの見出しデザインを変更する方法3 (2)

複製元テンプレートと区別がつくようにテンプレート名を変更しておくと良いでしょう。

名称を変更したら、「更新」を押します。

FC2ブログの見出しデザインを変更する方法3 (3)

複製し名前を変更したテンプレートを編集していきます。「編集」を押しましょう。

FC2ブログの見出しデザインを変更する方法3 (4)

編集する箇所

見出しをカスタマイズするために、「スタイルシート(CSS)」を編集して行きます。

スタイルシートはプロパティと値の組み合わせで定義されます。

テンプレート管理画面の下に「スタイルシート編集」という箇所があります。

FC2ブログの見出しデザインを変更する方法3 (5)

キーボードの「Ctrlキー」「Fキー」を同時に押すと、検索窓が左下に表示されます。

検索窓で「h2」「h3」で検索すると、いくつかヒットすると思います。

テンプレートによって編集箇所が異なりますが、変更点となるスタイルシートのプロパティは同じです。

このテンプレートでは、h2~h5タグまで同じデザインでした。

.p_area .entry_body h2, .p_area .entry_body h3,
.p_area .entry_body h4, .p_area .entry_body h5 {
	background: url(https://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 5px 5px;
	margin: 0 0 10px;
	padding: 5px 0 5px 20px;
}

現在の見出しデザインは次のようになっています。

FC2ブログの見出しデザインを変更する方法3 (6)

先頭に矩形のマークが入っています。簡単にするため削除します。次のコードを削除すればOKです。

background: url(https://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 5px 5px;

この状態から変更しましょう。

背景の色を変更する

単純に背景の色を変えてみます。

色の指定となるカラーコードは、Google検索などで「カラーコード」と検索すると一覧表を見つけることができます。

「#」で始まる3桁または6桁が色を表すコードになります。

緑色にしてみます。背景が代わると文字が見えにくくなるので、文字の色も変更(白色)しておきます。

.p_area .entry_body h2, .p_area .entry_body h3,
.p_area .entry_body h4, .p_area .entry_body h5 {
	background-color: #008000; /* 背景色を指定 */
	color: #FFFFFF;  /* 文字色を指定 */
	margin: 0 0 10px;
	padding: 5px 0 5px 20px;
}

これで見出しの背景に色が入りました。

FC2ブログの見出しデザインを変更する方法3 (8)

見出しを囲う

見出しを線で囲います。線の太さや色も指定できます。角を丸くすることもできます

.p_area .entry_body h2, .p_area .entry_body h3,
.p_area .entry_body h4, .p_area .entry_body h5 {
	border: solid 3px #808080; /* 線の太さと線の色 */
	border-radius: 0.5em; /* 角丸 ←四角い角が良い場合は、この指定を削除する */
	margin: 0 0 10px;
	padding: 5px 0 5px 20px;
}

見出しを囲う線がつきました。

FC2ブログの見出しデザインを変更する方法3 (10)

見出しに下線を付ける

見出しに下線を付けます。下線の太さや色も指定できます。

.p_area .entry_body h2, .p_area .entry_body h3,
.p_area .entry_body h4, .p_area .entry_body h5 {
	border-bottom: solid 5px #0000FF; /* 下線の太さと線の色 */
	margin: 0 0 10px;
	padding: 5px 0 5px 20px;
}

下線だけがつきました。

FC2ブログの見出しデザインを変更する方法3 (11)

下線を点線にすることもできます。

.p_area .entry_body h2, .p_area .entry_body h3,
.p_area .entry_body h4, .p_area .entry_body h5 {
	border-bottom: dashed 5px #0000FF; /* 下線の太さと線の色 */
	margin: 0 0 10px;
	padding: 5px 0 5px 20px;
}

下線が点線になりましたね。

FC2ブログの見出しデザインを変更する方法3 (12)

下線をマーカー風にしてみましょう。

.p_area .entry_body h2, .p_area .entry_body h3,
.p_area .entry_body h4, .p_area .entry_body h5 {
	background: linear-gradient(transparent 70%, #FFFF00 70%);
	margin: 0 0 10px;
	padding: 5px 0 0 20px;
}

下線が見出しの文字に少し重なっています。

FC2ブログの見出しデザインを変更する方法3 (13)

見出しをふせん風にする

もともとのデザインに似ていますが、左端を画像ではなく線で表現しています。

.p_area .entry_body h2, .p_area .entry_body h3,
.p_area .entry_body h4, .p_area .entry_body h5 {
        border-left: solid 10px #FF8C00; /* 下線の太さと線の色 */
        background: #FFFACD; /* 背景の色 */
	margin: 0 0 10px;
	padding: 5px 0 0 20px;
}

ふせんのように見えますね。

FC2ブログの見出しデザインを変更する方法3 (7)

上記では簡単に変更できる見出しデザインを紹介しました。

まとめ

Google検索などで「見出し css」と検索するといろいろなデザインを見つけることができます。

変更箇所を見つけるまでは大変かもしれませんが、デザインの幅が広がりますので、ぜひチャレンジしてみて下さい。

  • FC2ブログのサイドバーについてくる広告を設定する方法
  • FC2ブログの無料会員登録の仕方とログイン画面はコチラ
  • FC2ブログに最新記事をサムネイル画像付きで表示させる方法
  • FC2ブログのページの先頭へ戻るボタンを作る方法

Twitterでフォローしよう

  • 仮想通貨
    【知らないとヤバイ】不労所得は存在しないのか?ウソなのか?
    2021年8月30日
  • 仮想通貨
    【初心者にオススメ】ビットコインや仮想通貨(暗号資産)取引所ランキング
    2021年5月28日
  • 仮想通貨
    【知らない損する】ビットコイン初心者が勘違いしていること5つ
    2021年8月22日
  • アフィリエイト
    アフィリエイト初心者におすすめのASP一覧 11選
    2018年8月18日
おすすめの記事
FC2ブログ カスタマイズ初心者講座
目次1 広告の横並び2 3つの広告を横並びに配置する3 タグの説明4 枠線のデザインについて5 まとめ 広告の横並び 記事に広告を配置すると...
ネット副業種類
目次1 モッピーについて2 メールアドレスを用意する3 モッピーへ登録する4 まとめ モッピーについて モッピーとは、株式会社セレスが200...
アメブロ カスタマイズ初心者講座
目次1 広告が下に長くなってしまうときには?2 ブログ記事の編集3 まとめ 広告が下に長くなってしまうときには? アメブロで記事の中に広告を...