ブログの「見出し」をデザインする－Blogger アメブロ－

概要：ブログの「見出し」をデザインする

今回はブログの「見出し」をデザインする方法についてご紹介します。

色々ブログを閲覧していると下記のようなものを見かけませんか？

見出し

「これってどうやって作るんだろう？」と疑問に感じている方もいらっしゃるはず。
実はこれってとても簡単に作ることができるんです。
CSS（スタイルシート）とHTMLの見出しタグ（<h1>～<h6>）を使用するだけです。

では早速「見出し」をデザインする方法について順を追って説明します。今回はBloggerとアメブロを例にしたいと思います。

手順：ブログの「見出し」をデザインする

<h1>～<h6>はHTMLでは見出しタグと呼ばれています。
その名の通り見出しを表示するタグです。

よく本で第1章、第2章などとあると思いますがまさにそれが見出しに当たります。
さらに第1章第3節などのように構成されていれば、第1章は<h2>、第3節は<h3>、そして本のタイトルは<h1>のイメージです。

このブログも

<h1>　→　タイトル
<h2>　→　グローバルナビゲーション（Home、SEOなど）
<h3>　→　記事ごとのタイトル
<h4>　→　コメント欄

となっています。


見出しで構成されたWebサイトは、Googleの検索エンジンから高い評価が得られるので、SEO対策のためにも積極的に活用したいところです。

１．デザイン作成

まずデザインを決めます。今回は<h4>～<h6>をデザイニングしたいと思います。

<h4>

見出しh4

<h5>

見出しh5

<h6>

見出しh6

上記のようなデザインにします。

［CSSソース］
<h4>

h4{
font-size: 100%;
margin:10px 0px;
padding:0 0 3px 9px;
border-left:6px solid #356cc4;
border-bottom:2px solid #356cc4;
}

<h5>

h5{
font-size: 94%;
margin:10px 0px;
padding:0 0 3px 9px;
border-left:6px solid #356cc4;
}

<h6>

h6{
font-size: 88%;
margin:8px 0px;
padding:0 0 3px 6px;
border-left:4px solid #6b93de;
}

font-size：文字の大きさ
margin：罫線の外側部分の余白
padding：罫線の内側部分の余白
border：罫線


これをBloggerとアメブロへ適用します。

２．Bloggerでの編集

Bloggerにログイン後、[テンプレート]　→　[カスタマイズ]　→　[アドバンス]　→　[CSSを追加]でCSSのコード入力画面に進みます。

先程のコードを貼り付けて「ブログに適用」をクリックします。

これで、デザイニングされた見出しタグを使用出来る状態になりました。

Bloggerで見出しをつけたいときは、記事作成の際にHTMLを選択します。
見出しにしたい文章の前後に<h4></h4>を記載します。

するとデザイニングされた見出しを表示することが可能となります。

３．アメブロでの編集

アメブロにログイン後、［ブログ管理］　→　［ブログデザイン>デザインの変更］　→　［CSSの編集］でCSSコード入力画面に進みます。

先程のコードを貼り付けて「保存」をクリックします。

これで、デザイニングされた見出しタグを使用出来る状態になりました。

アメブロで見出しをつけたいときは、記事作成の際に「HTMLタグを表示」を選択します。
見出しにしたい文章の前後に<h4></h4>を記載します。

するとデザイニングされた見出しを表示することが可能となります。


以上で終了です。

スポンサードリンク