ヘッダーのタイトルの位置を変更する方法

 

a1620_000421_m

サイトの一番上に表示されるタイトルの位置は変更することができます。
今回は現在使っているテンプレートGushで説明していきますが、どのテンプレートでも大体同じ作りなので参考になると思います。

タイトルの位置だけでもサイトの印象が変わってくるので、好みの配置に変えてみましょう。

デフォルトのヘッダーはこうなっています。左によっています。

titleposition1

ヘッダーの中はこうなっている

Gushのスタイルシートではこのように設定されています。

titleposition2

メニューの部分も合わせて全部が #header
タイトルと説明文を合わせた部分が #header .hgroup
タイトル部分だけが #header .top_title
説明文部分だけが #header .caption と #header h2
です。

スタイルシートによって付けられている名前は違うと思いますが、大体こんな感じのはずです。
この中で、変更したい場所にタグを書けばいいのです。

文字の位置を変更するタグ

左揃え text-align: left;
中央揃え text-align: center;
右揃え text-align: right;

これをスタイルシートに記述します。

タイトルを右揃えにする場合

#header .top_title {
	margin-bottom: 12px;
	font-size: 36px;
	text-align: right;
}

赤の部分を付け加えます。
タイトルが右端にくっつきます。

titleposition3

説明文を右揃えにする場合

#header .caption {
	color: #222;
	text-align: right;
}

赤の部分を付け加えます。
説明文が右端にくっつきます。

titleposition4

タイトルも説明文も真ん中にする場合

#header .hgroup {
	margin-top: 12px;
	text-align: center;
}

赤の部分を付け加えます。
ふたつとも変えたい場合は、ふたつともを囲っている#header .hgroupに書くと一括で変更できて便利です。
文字が真ん中になります。
スタイルシートによっては#header .hgroupといった括りが無く、#headerに書いた方が良い場合もあると思います。

titleposition5

私はなんとなく右端にあったほうが落ち着くので、タイトルも説明文もtext-align: right;にしています。
組み合わせで色々できるので臨機応変に試してみてください。
おつかれさまでした。

  • このエントリーをはてなブックマークに追加
  • Pocket

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。