ココログにヘッダメニューを設置する方法

Blogのタイトルと説明が出ている部分にヘッダメニューを設置してみました。
ちょっと無理やりな方法なのですが、ヘッダメニュー以外にもいろいろ応用が利くやりかたです。
ご存知の方も多いと思いますが、ご参考になれば。

前提知識
具体的なやりかたの前にちょっと前提知識を。

ココログではHTMLタグをヘッダやサイドメニューに入れることができます。
ヘッダの場合、入れる場所は「ブログのサブタイトル(キャッチフレーズ)」の部分。
管理画面の「ブログ」→「設定」→「基本設定」のところにあります。

ここ、普通はテキストのみを書いていると思いますが、HTMLタグをそのまま書くことが可能です。
ここをうまく利用すると、今回のようなメニューを作成したり、標準のスタイルシートを書き換えたり、アクセス解析用のタグを埋め込んだりできるわけです。

ちなみにサイドメニューに入れる場合は「マイリスト」の「リンク」を使い、コメント欄にタグを入れます。
これについてはいろいろなページで解説されているので、探してみてください。

基本設計
さて、サブタイトル欄に直接タグを書いてもいいのですが、そうするとちょっとした変更のたびに「ブログへの反映」が必要になります。
時間もかかる作業ですし、トラブルの可能性もゼロではないので、できればそんな作業は避けたい。

というわけで、今回はサブタイトル欄から一旦外部JavaScriptを呼び出し、そのScript内でHTMLを生成することにしました。(このあたりが「ちょっと無理やり」なところ)。
Scriptは「document.write()」の嵐になってしまうのですが、こうしておけば「コントロールパネル」→「ファイル」でJavaScriptを上書きするだけで、サイト全体へ設定を反映させることが可能です。ここが今回のキモですね。

具体的な設定
(1)JavaScriptを書いてアップロードし、(2)ヘッダから呼び出すという2段階で進めます。

(1)JavaScript
下記のようなファイルをメモ帳などでローカル(あなたのPC)の中に作ります。
ファイル名は何でもいいですが、慣例的に ○○.js とするのが普通です。
ただ、保存するときの文字コードはUTF-8にしてください。
ココログのデフォルト文字コードはUTF-8なので、それ以外の文字コードでスクリプトを記述してしまうと、呼び出されたときに日本語が化けてしまいます。

// ヘッダメニュー
document.write('<div style="margin:15px 0px 0px 0px; width:665px; padding:5px; background:#abb3cd; color:#ffffff; float:left">'); //←色は適当に。
document.write('<a style="color:#ffffff" href="http://gadgetwatch.cocolog-nifty.com/">トップページ</a> | ');
document.write('<a style="color:#ffffff" href="http://gadgetwatch.cocolog-nifty.com/gadgetwatch/archives.html">バックナンバー</a> | ');
// ↑こんな感じでHTMLを出力し、リンクを追加します。
document.write('</div>');
document.write('<div style="clear:both"></div>');

1行目のスタイルで指定している「float:left」と最後のの「clear:both」がポイント。
これがないとFirefox系で表示が崩れます。

保存したら、ファイルをココログへアップロードします。
場所はどこでもいいですが、「common」などのフォルダを作っておくと修正がやりやすいかも。
アップロードしたら一旦ファイルをクリックして、URLを取得しておきましょう。

(2)サブタイトル
サブタイトルの設定はこのスクリプトを呼び出す記述だけです。
設定が終わったら、「ブログへの反映」が1回必要です。

(あなたのココログのサブタイトル)
<script src="ここにJavaScriptファイルのURLを記述" type="text/javascript"></script>

あとは見栄えなどを調整しながら、(1)のファイル修正～アップロードを繰り返せばOK。
多少手間はかかりますが、それでも毎回反映がいらないぶんこちらのほうが楽だと思いますよ。
工夫次第では何でもできるので、お試しください。

関連サイト
メニューをつけてみました (KOROPPYの本棚 様)
まさにココログを「使い倒している(^-^;)」感じです。
メニューもきれいにまとまっていていい感じですよね。

第35回：サブタイトル部分に簡易メニューを付けてみよう (初めてのココログ・カスタマイズ 様)
これがココログでできるんだ～という発見がいっぱいです。