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. インターネットで情報発信!

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

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