« Nintendo DS「えいご漬け」はじめました | トップページ | Panasonic「LUMIX DMC-TZ3」買いました!(その1:インプレッション) »

2007年4月24日 (火)

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

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回:サブタイトル部分に簡易メニューを付けてみよう (初めてのココログ・カスタマイズ 様)
これがココログでできるんだ~という発見がいっぱいです。

|

« Nintendo DS「えいご漬け」はじめました | トップページ | Panasonic「LUMIX DMC-TZ3」買いました!(その1:インプレッション) »

プログラム(Perl・HTML・JavaScript)」カテゴリの記事

コメント

初めまして、こんにちは。
記事のご紹介&コメントありがとうございました。

外部ファイルにして再構築不要にする、というのは、
いいアイディアですね!
すべてのページの再構築は、結構時間がかかってしまうので。

投稿: KOROPPY | 2007年4月24日 (火) 15:45

KOROPPYさん
コメントありがとうございました。
これ、サイドメニューにブログパーツやらアフィリエイトやらを貼るようになって気づきました。
Scriptの中身がちょっと力技になってしまうので、もう少しスマートにできないかなと模索中です。

ただ、Script設定を1回済ましてしまえば、変更が楽なのでいいですよ。気に入らなければスクリプトの中身を空にすればリセットできますしね(^-^;)。

投稿: ガジェットWatch | 2007年4月24日 (火) 18:10

こんにちは、はじめまして。
トラックバックありがとうございました。

いいですね、このスクリプト!
つい先日メニューの部分をちょっと修正したら、一緒に入力してあるアクセス解析のタグを消してしまい慌ててしまったのですが^^;、これだったらそんなこともなくなりますね。
しかも再構築なしで修正可能なのはとても助かります。
週末にでも時間が取れたらチャレンジしてみますね。

いい情報を教えて頂いた上に、私のブログも紹介していただけて光栄です。
ありがとうございました(^^)

投稿: tako | 2007年4月24日 (火) 20:51

takoさんコメントありがとうございます。

いやー、実はたいしたことやってないので恐縮です。
出力したいHTMLを全部 document.write() でくくって外部に出しているだけですし。

ちなみに全く同様にSTYLEタグも書き出すことができるので、標準のCSSを上書きしたりする用途にも使えますよ。
JavaScriptファイルの更新だけで全ページに反映できますし、実はこっちのほうが本命かも。
アップロードするまで動作確認ができない点だけが難点でしょうか。

投稿: ガジェットWatch | 2007年4月24日 (火) 23:52

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/153129/14830181

この記事へのトラックバック一覧です: ココログにヘッダメニューを設置する方法:

» メニューをつけてみました [KOROPPYの本棚]
文字書きワールド♪さまを参考に、簡易メニューをつけてみました。 ココログのサイドバーは長くって、操作しにくいなぁと思っていたところ。 これで便利になりそうです。 ソースはこちら。 URLはご自身でアップロードしたファイルのに変更してください。 img alt="left3.gif" src="http://xxxx.cocolog-nifty.com/blog/left... [続きを読む]

受信: 2007年4月24日 (火) 09:59

« Nintendo DS「えいご漬け」はじめました | トップページ | Panasonic「LUMIX DMC-TZ3」買いました!(その1:インプレッション) »