Twenty Thirteenで見出しのデザインを変更

CSSを使用すると画像を使用せずに、見栄えのする見出しを表示することができます。「Twenty Thirteen」のスタイルシートに見出しのデザインを追加して、見出しのデザインを変更します。

はじめに

「Twenty Thirteen」で見出しのデザインを変更します。

スタイルシートで見出しのデザインを定義

スタイルシート(style.css)で見出しのデザインを定義します。1ページで複数回使用される可能性のある見出しは、「id」属性ではなく、「class」属性で作成します。

<CSS定義例>※本稿のように表示されます。

.h001{
	position:relative;
	padding-left:16px;
	padding-top :3px;
	border-bottom:1px solid #209020;
	font-weight: bold;
	font-size: 16px;
	line-height: 28px;
}

.h001:before{
	content:'';
	height:26px;
	width:4px;
	display:block;
	position:absolute;
	top:3px;
	left:0;
	background-color:#209020;
	border-left: 2px solid #209020;
	border-radius:2px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
}

見出しタグの修正

見出しタグで「class」属性を追加して、CSSで定義した見出し表示の定義を指定します。

<CSS定義例>

<h5 class="h001">見出し</h5>

おわりに

「Twenty Thirteen」でCSSを使用して、見出しのデザインを変更しました。

関連記事(Twenty Thirteenの各部個別の表示をカスタマイズ)

  1. Twenty Thirteenのメニューから検索フォームを削除
  2. Twenty Thirteenのフッターにコピーライトを表示
  3. Twenty Thirteenで見出しのデザインを変更
  4. Twenty Thirteenで記事に枠を表示
  5. Twenty Thirteenでリストマーカーに画像を設定
  6. Twenty Thirteenでサイトのロゴをヘッダーに表示

関連記事(目次)

  1. インターネットで情報発信!

コメントを残す

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

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)