« カゼ気味 | トップページ | KYOSUKE HIMURO COUNTDOWN LIVE ~CROSSOVER 05-06~ 1st Stage リクエスト集計結果 »

2005.12.09

ココログのカスタマイズ 【フッタ編】

ブログの全ページに共通のフッタを表示させたいなぁと考えたことはありませんか?
でも、ベーシックプランでは設定することができません。
そこで、JavaScriptを使用してフッタを書き出す方法を紹介したいと思います。

ココログのHTMLですが、次のようなタグがあります。

<div id="footer"></div>
id が footer なので、この部分に書き出すのが良いかなと思います。

そして、手順ですが、まず最初にフッタを書き出すJavaScriptファイルを作成します。
ファイルの中のコードは次のような感じになります。

var footerHtml = 'ここにフッタの内容を書く';
window.onload = function() {
    document.getElementById('footer').innerHTML = footerHtml;
}
これを適当なファイル名(***.js)で保存します。
この時の注意点ですが、文字コードはUTF-8で保存する必要があります。
フッタの内容に日本語を使用している場合、他の文字コードでは文字化けしますので。

完成したらJavaScriptファイルをアップロードして、ブログのサブタイトルに次のコードを追加することで、全ページから参照できるようなります。
ココログのカスタマイズ Vol.1参照

<script language="JavaScript" src="http://ココログのURL/アップしたディレクトリ/ファイル名.js">
作業は以上で終わりです。
後はJavaScriptが自動的にフッタを書き出してくれます。

ちなみに、このページでは以下のようなフッタを設定しています。

var footerHtml = '<img src="URL省略" width="735" height="11"><a
href="#pagetop"><img src="URL省略" width="25" height="11" border="0">[ <a
href="URL省略">JUST A HERO</a> ]&nbsp;&nbsp;[ <a
href="URL省略">ALBUM</a> ]&nbsp;&nbsp;[ <a
href="URL省略">GIGS</a> ]&nbsp;&nbsp;[ <a
href="URL省略">INTERVIEW</a> ]&nbsp;&nbsp;[ <a
href="URL省略">LINK</a> ]&nbsp;&nbsp;[ <a
href="URL省略">LONGER THAN FOREVER</a> ]&nbsp;&nbsp;[ <a
href="URL省略">MASS AGE</a> ]<br><a
href="URL省略">LONGER THAN FOREVER</a>';
コードが折り返されてますが、1行で書いてます。

と書いてはみたものの、フッタを設定したい人っているのかなぁ。。。(^-^;
ちなみに、getElementById('書き出すID名') とすると他の部分も書換え可能です。

|

« カゼ気味 | トップページ | KYOSUKE HIMURO COUNTDOWN LIVE ~CROSSOVER 05-06~ 1st Stage リクエスト集計結果 »

コメント

この記事へのコメントは終了しました。

トラックバック

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

この記事へのトラックバック一覧です: ココログのカスタマイズ 【フッタ編】:

« カゼ気味 | トップページ | KYOSUKE HIMURO COUNTDOWN LIVE ~CROSSOVER 05-06~ 1st Stage リクエスト集計結果 »