ブログのヘッダーにタイトルロゴとメニューバー(グローバルナビゲーション)を設置しよう!
2015年09月23日

ブログのヘッダーにタイトルロゴとメニューバー(グローバルナビゲーション)を設置しよう!

タイトルロゴとメニューバー(グローバルナビゲーションというそうです)の設置方法をメモしておきます。
Seesaaブログ準拠で書いていますが、他のブログサービスやWEBサイトでも、ブログパーツ等の追加方法は違えど、CSSで書式を定めて追加部分のHTMLを<div class="○○">で囲むのは同じかと思います。


ブログのヘッダーに独自のコンテンツを追加する方法(基本)


@CSS(デザイン>デザイン設定)に、これから追加するコンテンツの名前と、その書式を記述する。
.コンテンツの名前(半角英数) {
コンテンツの書式(後で詳しく書きます)
}
コンテンツ名は自分で好きに決めていいものですが、CSS内にある他のコンテンツ名と被らないように注意してください。

Aデザイン>コンテンツで「自由形式」をヘッダーに追加する。

Bコンテンツの設定を開いて以下のように記述。
<div class="コンテンツの名前(半角英数)">
内容のHTML(例えばタイトルロゴ画像など)
</div>


ブログの左上にタイトルロゴを設置する方法


参考→タイトルロゴの作り方

@CSSにタイトルロゴの書式を記述する。
例えばこのように。
.title-logo {
padding:10px 0px 0px 25px;
text-align:left;
}
「padding:10px 0px 0px 25px;」は、「上に10px 右に0px 下に0px 左に25pxの余白を設ける」という意味です。(厳密にはまた違う説明があるのですが、分かりやすく言えばそれでいいかと思います)
自分好みの数値に書き換える場合は、上下左右の順番に注意してください。
右の余白が0pxでいいのは、その下に「text-align:left;」があるからです。これは「左寄せにする」という意味です。
中央寄せにしたければ text-align: center; でOK。その場合は、左の余白も0pxにしてください。

日本語訳すると、
title-logoという名前のコンテンツは、
上に10px 右に0px 下に0px 左に25pxの余白を設け、
左寄せで置きます。
となります。

Aデザイン>コンテンツで「自由形式」をヘッダーに追加する。
コンテンツ名は、分かりやすく「タイトルロゴ」にしておくといいでしょう。

Bコンテンツの設定を開き、タイトルロゴ画像のURLを書く。
普通の画像でもいいですが、例えばこのように書くと、マウスを重ねると色が変わるといった仕掛けができます。
<div class="title-logo">
<a href="サイトのURL">
<img border="0" alt="サイト名" title="TOPへ(タイトルロゴにカーソルを合わせた時に出る文字)" src="ロゴ画像URL" onMouseOver="this.src='マウスを上に置いた時用の色違いロゴ画像URL'" onMouseOut="this.src='マウスを離した時用のロゴ画像URL(最初のと同じ)'">
</a>
</div>

日本語訳すると、
このコンテンツはtitle-logoという名前です。title-logoの書式を適用します。
このサイトのトップページにリンクを張ります。
リンクは画像リンクにします。画像の縁に線はなし。この画像は「○○(サイト名)」を示します。カーソルを合わせると「TOPへ」と出ます。ロゴ画像のURLは○○です。マウスを上に置くと○○の画像に切り替わります。マウスを離すと○○(最初のと同じ)に変わります。
あとの部分はHTMLを閉じるための部分です。
となります。


タイトルロゴの右にブログ説明を設置する方法


このままだとブログ説明の位置がめちゃくちゃになっている可能性が高いので、その位置もCSSで設定します。

@CSSにブログ説明の書式を記述する。
Seesaaブログの場合、初めからブログ説明は「description」という名前で設定があるので、それを書き換えます。
.description {
display:block;
margin:-95px 0px 0px 365px;
padding:15px 30px 0px 0px;
color:#333366;
text-align:left;
line-height:150%;
height: 80px;
}

日本語訳すると大体こんな感じです。
descriptionという名前のコンテンツは、
ブロック要素です。(意味は僕にもよく分かりませんが必要です)
他のコンテンツからの距離は、上-95px(タイトルロゴと余白の高さ分上げるということ。こうしないとタイトルロゴの右ではなく下に来てしまうので) 右0px 下0px 左365px(タイトルロゴと余白の幅分右にずらすということ)です。
このコンテンツの中では、上に15px 右に30px 下に0px 左に0pxの余白を設けます。
文字色は#333366にします。
左寄せにします。
行間は150%にします。
このコンテンツ全体の高さは80pxです。


Aデザイン>コンテンツで「ブログ説明」をヘッダーに追加する。
すでにあれば追加する必要はありません。

BSeesaaブログなら何もする必要なし。
他のブログ・サイトで、ブログ説明のHTMLが<div class="○○">で囲まれていない場合は、囲んでください。


メニューバー(グローバルナビゲーション)を設置する方法


@CSSにメニューバーの書式を記述する。
メニューの色など。例えばこのように。
#menu ul{
margin: 0;
padding: 0;
list-style: none;
}

#menu li{
display: inline;
padding: 0;
margin: 0;
float: left;
}

#menu li a{
display: block;
border: 1px solid #666;
background-color: #243341;
padding: 3px;
text-decoration: none;
text-align: center;
vertical-align: middle;
display:table-cell;
color: #F2F2F2;
width: 103px;
height: 30px;
font-family:Meiryo , "Hiragino Kaku Gothic ProN" , "Hiragino Kaku Gothic Pro" , sans-serif;
font-size: 13px;
font-weight:bold;
line-height: 14px;
margin: 2px;
}
#menu li a:hover{
background-color: #28455F;
color: #fff;
}
長いです。ここまで来ると、僕にもよく分かりません\(^o^)/
何か、位置は特に設定しなくても、自然とタイトルロゴやブログ説明文の下に来たんですよね。(適当)

そんな状態なのにできたのは、他の方の書いてくださった記事を参考にしたからです。

グローバルナビゲーション: Seesaaブログ【新システム】カスタマイズ初心者用
http://kasutamumu.seesaa.net/article/425158665.html

Seesaaブログにメニューバーを設置する方法 | メモロウ
http://www.memorou.com/2014/10/seesaa_8.html

メニュー名が複数行になっても中央寄せにするためにいろいろいじったのですが、それについては当てずっぽうでいじっているうちにできたというのが実情なので、ここでの説明は控えさせていただきます。
display: block; と display:table-cell; が並存していていいのかどうかもよく分かりません\(^o^)/ でもそうしないと、ちゃんと表示されなかったんですよね。
とりあえずこのままコピペして、色や幅の部分だけ変えれば、使えるとは思います。

Aデザイン>コンテンツで「自由形式」をヘッダーに追加する。
コンテンツ名は、分かりやすく「メニュー」等にしておくといいでしょう。

Bコンテンツの設定を開き、メニューのHTMLを書く。
<div id="menu">
<ul>
<li><a href="サイトのURL">TOP</a></li>
<li><a href="リンクを張りたいページのURL">メニュー名1</a></li>
<li><a href="リンクを張りたいページのURL">メニュー名2</a></li>
<li><a href="リンクを張りたいページのURL">メニュー名3</a></li>
<li><a href="リンクを張りたいページのURL">メニュー名4</a></li>
</ul>
</div>
<ul>とか<li>というのは、リストであることを示すHTMLタグです。このリストがCSSで定めた「menu」の書式で表現され、メニューバーになるというわけです。
これで好きな数だけメニューを増やせます。

ブログ嫌いな僕の父がよく言うのは、「ブログはどこに何があるのか分からないから読む気にならない」ということですが、メニューバーがあればその不便さは解消されると思います^^
スポンサーリンク
ブログのヘッダーにタイトルロゴとメニューバー(グローバルナビゲーション)を設置しよう!
先月の人気記事 TOP5