digital lemonのデジタル通信

ちょっとお得なマネー情報や、投資、ギャンブル。使えるツール・ガジェット・PC機器・PCDJなどをご紹介

ブログカスタマイズ

初心者向け!見出し(hタグ)を使って見やすいブログデザインにしよう

投稿日:

ブログを始めた人の中で、ある日「読みづらいな」と思った経験はありませんか?
そんなブログ初心者の方に向けて、hタグを使って見出しを付けたブログの書き方をご紹介します。

hタグって何?

本文の中に見出しを入れるには、hタグが必要になります。
そもそもhタグとは何かという方に、表記の仕方と見え方をご紹介します。

表記の仕方

<h1>大見出しにはh1</h1>
<h2>中見出しにはh2</h2>
<h3>小見出しにはh3</h3>
<h4>さらに小見出し</h4>
<h5>さらに小見出し</h5>

というように、数字が大きくなるほど小さい見出しになるので、それに合わせて見出しを作りhタグでくくるだけです。
上の表記は一般のブラウザではこのように見えます。
hタグの見え方

hタグの基本は以上のような感じです。
使用する見出しは1から順番に使っていくようにしましょう。(h1の次にh4などにはしません)
1をメインの見出しとして一度の使用とし、それ以外を複数使うという方法にしましょう。
このようにすることで、見やすさとSEO対策を同時にすることができます。

hタグをカスタマイズする

hタグの使い方がわかったところで、次は見出しを派手にして目立つように変えてみましょう。
ブログのCSSを変更することでhタグに装飾をすることができます。

例えば、CSSで1タグの表記が以下のようなスタイルの場合

h1 {
  font-size: 24px;
  border-left: 5px;
  border-left-style: solid;
  border-left-color: #FFD700;
  background-color: #FFFACD;
}

h1タグで文章を打つと
h1タグ
こうなります

上のスタイルを元に、そのスタイルの数値やカラーコードを変えてみます

このように変えて

h1 {
  font-size: 30px;
  border-left: 10px;
  border-left-style: solid;
  border-left-color: #000000;
  background-color: #cccccc;
}

h1タグで文章を打つと
無題
こうなります

以上のように、スタイルシートに見出しのhタグのスタイルを書き換えることで、自分のサイトに合った色や目立ちやすい見出しタグを作ることができます。

見出しデザインの参考になるサイト

CSSを変えればいいというところまでわかれば、あとは覚えなくても大丈夫。
コピペで作れる、見出しデザインの参考になるサイトがたくさんあります。

日刊ウェブログ式

無題

TM Life

無題

streamer

無題

まとめ

このようにして、自分の好きなデザインの見出しを見つけてみてください。
内容がなくても、見出しがかっこいいだけでブログの見え方は180度変わります!
ブログカスタマイズの超入門として、hタグを使った見出しデザインの方法をご紹介しました。

-ブログカスタマイズ
-,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

2014最新版!WordPressに人気記事を表示させる「WordPress Popular Posts」の簡単な設定方法

ページの目次1 「WordPress Popular Posts」とは?2 「WordPress Popular Posts」の設定方法3 WordPressテーマ「STINGER」を使用している場合 …

「SI CAPTCHA Anti Spam」でブログコメント欄に画像認証を追加

@dgtllemonです。 ワードプレスのダッシュボードを見ているとすごい数のスパムコメントが表示されます。 標準で入っている「Akismet」は有効化してますが、それでもこのような感じ。 気にしない …

WordPressで目次を作るプラグイン「Table of Contents Plus」 の使い方

このブログにも設置してあります、記事内容の目次。 目次があることで自分も記事の内容の段落を意識して書くことになり、読み手にとっても知りたい情報へ素早くアクセスすることができます。 今回はWordPre …

WordPressテーマ「STINGER3」の見出しをカスタマイズ

ブログのテーマで使わせていただいているWordpressのテーマ「STINGER3」ですが、 正直言って僕みたいな人間が見出しをカスタムなど言い出す必要は皆無な程、デフォルトの見出しが美しいテーマです …

WordPlessのプラグイン(SyntaxHighlighter Evolved)を使ってソースコードを記事内に表示する方法

「記事の中にソースコードを表示させたい。」 ということはよくありますよね。 しかし当然ながら、そのままソースを書いてもコードは表示されません。 そんなときに便利なのが、WordPressのプラグイン「 …

デジタルレモン

まだギリギリ20代。

人生をちょっと楽しく刺激的にする情報などを配信中。