ココログのバージョンアップ

本ブログはココログベーシックです。
ベーシックでも頑張れば何でも出来まっせ。

カレンダーJavaScript更新

カレンダーJavaScriptに下記の不具合がありましたので、修正しました。

【不具合内容】
1日に複数の記事が存在する場合、カレンダーの日付とリンク先がズレてしまう。

ご利用されている場合は、お手数ですが最新ファイルをこちら（calendar.js 50.3K）よりダウンロードして頂き、ココログ管理画面からアップロード（上書き）をお願いいたします。

ココログのカスタマイズ 【カレンダー編（導入）】

カスタマイズカレンダーの導入方法についてご説明します。

【ブログの設定】
設定を「カレンダーを表示」にする必要があります。
設定されていない場合は「デザイン」→「コンテンツ」→サイドバーのコンテンツの「カレンダー」で設定を行って下さい。

次に、「日付ヘッダーを表示」に設定する必要があります。（記事タイトルの上に表示されている日付です）
設定されていない場合は「デザイン」→「コンテンツ」→「日付ヘッダー」で設定を行って下さい。
また、本 JavaScript が対応している「日付の書式」は以下の通りです。

• 2006/02/19
• 2006.02.19
• 2006-02-19
• 2006年2月19日
• 2006年2月19日 (日)
• 2006年2月19日 (日曜日)

上記以外の書式を使用している場合は、「設定」→「表示設定」→「日付の書式」で設定変更を行って下さい。

【JavaScriptの設定】
こちら（calendar.js 50.3K 2006/4/6更新）からJavaScriptのファイルをダウンロードし、利用しているブログのURL直下（http://*****.cocolog-nifty.com/*****/）にファイルをアップロードして下さい。
「コントロールパネル」→「ファイル」からアップロードすることができます。

【2006/4/5追記1】
アップロードするディレクトリは http://*****.cocolog-nifty.com/*****/ です。
http://*****.cocolog-nifty.com/ ではありません。
本サイトを例にすると、http://maximum.cocolog-nifty.com/longer_than_forever/になります。（http://maximum.cocolog-nifty.com/ ではありません）
【2006/4/5追記1 ここまで】

次に「サブタイトル」に下記のコードを記述して下さい。
「ブログ」→「設定の変更」→「ブログのサブタイトル（キャッチフレーズ）」から設定することができます。

<script language="javascript">
<!--
var blogURL = "http://*****.cocolog-nifty.com/*****/";
var blogStartYear = 2005;
var blogStartMonth = 10;
var calendarType;
//-->
</script>
<script language="javascript" src="http://*****.cocolog-nifty.com/*****/calendar.js" type="text/JavaScript"></script>

尚、各値は利用するブログに合わせる必要がありますので、下記を参考にして記述して下さい。

• blogURL：ブログのURLです。
• blogStartYear：ブログを開始した年（西暦）
• blogStartMonth：ブログを開始した月
• calendarType：カレンダーを日本語表示にする場合は、 var calendarType = "J"; として下さい。英語表示の場合はそのまま var calendarType; です。
• src：ブログのURL + calendar.js です。

ここまでの手順で、ひとまず動作するようになるはずです。

【動作しない場合】
上記の手順を再度確認して下さい。
それでも動作しない場合は、次のような原因が考えられます。
他の JavaScriptを 使用していて、そのスクリプトの中で onload を使用している場合、本スクリプト或いは他のスクリプトが動かなくなってしまう可能性があります。
その場合は、他の JavaScript 或いは本スクリプトの onload で関数を呼出している部分を、片方のスクリプトに統合することにより回避できるかと思います。
本スクリプトの方で呼出す関数は checkCreateCalendar(); になります。

【その他】
ここからはオマケ的な内容になります。
当該月カレンダーが表示されるまでタイムラグがあるため、突然ガサっと書き換わるので何となく気持ち悪い感じを受けるかもしれません。
これについては、以下のような感じで対応するのが良いかなと思います。
ちなみに本ブログもこの方法で表示させています。

1. カレンダーは非表示に設定する。
2. 「マイリスト」に「カレンダー」等の名前で「リンク」タイプの新規項目を作成する。
3. 「設定の変更」により「メモの表示」設定を「テキスト表示」に設定する。
4. 追加した「マイリスト」に項目を追加する。この時「タイトル」「URL」は空欄とし、「メモ」に空のカレンダーHTMLを設定する。
   空のカレンダーのソースは以下の通りです。

<div id="calendar" class="module">
  <table>
    <caption>&nbsp;</caption>
      <tr>
        <th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th>
        <th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th>
      </tr>
      <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
      </tr>
  </table>
</div>

もしかしたら説明が足りない部分があるかも知れませんので、その辺は随時追記していきたいと思います。

【2006/4/5追記2】
コメントを受け付けるように設定を変更しました。
ご質問がございましたら、ご記入ください。
また、個人的な都合により、回答までに時間が掛かる場合があるかと思いますが、ご理解の程宜しくお願いいたします。

ココログのカスタマイズ 【カレンダー編（仕様）】

ココログのカレンダーはイケてない！
何で今月のカレンダーしか表示されないの？
他社のブログのようなカレンダーが欲しい！
ということでJavaScriptで作ってみました。
コイツが以前日記で書いた「prototype.js を使用したあるもの」です。

違いが分かるように左側に両方表示させてますが、上がカスタマイズしたカレンダーで、下がココログのデフォルトのカレンダーとなっています。
カスタマイズしたカレンダーの仕様は以下の通りです。

• 見出しの <<（前月）と >>（次月） のリンクをクリックすると指定月のバックナンバーに遷移でき、当該月のカレンダーが表示されます。
• <<（前月）ですが、ブログ開始月を設定することにより、ブログ開始前月へのリンクは非表示となります。
• >>（次月）ですが、未来月へのリンクは非表示となります。
• カレンダーの日リンクをクリック指定した場合（固定リンクも同様）、当該月のカレンダーが表示されます。

ざっとこんな感じです。
仕組みとしては、URLからそのページの年月を取得するようにしています。
年月が取得できた場合は、その月のカレンダーが表示され、カテゴリーページなど年月が取得できないページの場合は今月のカレンダーが表示されます。

現在は、他の人も簡単に導入できるようにスクリプトを整理中です。

prototype.js を使用中

prototype.js を使用して、ココログのカスタマイズに使える”あるもの”を作っているのですが、これがなかなか大変。
”あるもの”を思い付いた所までは良かったのですが、ココログの仕様が予想以上に複雑なのですよ、これが。
時間もなかなか取れないので、もう少し掛かりそうな感じ。

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

ブログの全ページに共通のフッタを表示させたいなぁと考えたことはありませんか？
でも、ベーシックプランでは設定することができません。
そこで、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名') とすると他の部分も書換え可能です。

ココログのカスタマイズ 【ナビゲーション編】

今回はタイトルの下にあるナビゲーション部分について紹介したいと思います。

ナビゲーションの部分のHTMLは、例によってサブタイトルに無理矢理入れてしまいます。
実際のコードは次のような感じで、<ul>～</ul>がサブタイトルに入力する部分です。（リンク先URLは省略しています。また、CSSファイルも同様に入れる必要がありますが、これも省略しています。Vol.1参照）

<h2>
    <ul>
        <li><a href="url" id="menu1"><span class="nodisp">JUST A HERO</span></a></li>
        <li><a href="url" id="menu2"><span class="nodisp">ALBUM</span></a></li>
        <li><a href="url" id="menu3"><span class="nodisp">GIGS</span></a></li>
        <li><a href="url" id="menu4"><span class="nodisp">INTERVIEW</span></a></li>
        <li><a href="url" id="menu5"><span class="nodisp">LINK</span></a></li>
        <li><a href="url" id="menu6"><span class="nodisp">LONGER THAN FOREVER</span></a></li>
        <li><a href="url" id="menu7"><span class="nodisp">MASS AGE</span></a></li>
    </ul>
</h2>

CSSがOFFでも認識できるように、HTML上ではテキストリンクにして、それぞれを<li>で囲んであります。

これにスタイルを定義します。
まず、<h2>全体に背景画像を指定しています。

#banner h2 {
    width: 760px !important;
    height: 100px !important;
    background-image: url(ココログURL/image/menu_photo.gif) !important;
}

<ul><li>の基本スタイルは次のように指定しています。

#banner h2 ul {
    float: right !important;
    margin: 40px 0px 0px 0px !important;
}
#banner h2 ul li {
    float: left;
    list-style-type: none;
}
#banner h2 ul li a {
    display: block;
    font-size: 0px;
    height: 20px;
}
.nodisp {
    visibility: hidden !important;
    line-height: 20px !important;
}

メニューごとに幅と背景画像を指定しています。

#banner h2 ul li a#menu1 {
    width: 60px;
    background: transparent url(ココログURL/image/c_menu_03.gif) no-repeat 0px 0px;
}

実は、この背景画像がポイントとなります。

このブログのナビゲーションですが、ロールオーバー時の画像の切換えは、JavaScriptではなくCSSで行っています。
まず、用意する背景画像ですが、下のように通常の画像とマウスオーバーした時の画像を繋げたものにします。

そのまま表示すると上のようになりますが、スタイルで height:20px; を指定しているので、通常は上半分だけが表示されます。
次に、マウスオーバー時ですが、次のようにスタイルを指定しています。

#banner h2 ul li a#menu1:hover,
#banner h2 ul li a#menu1:active {
    background-position: 0px -20px;
}

つまり、マウスオーバーしたら背景画像の座標を上に20px移動させているのです。
このようにスタイルを指定することによって、JavaScriptと同様の効果を実現することができます。

ちなみに、背景画像の座標を移動させるのではなく、通常用とロールオーバー用の画像を2つ用意し、スタイルで各々の背景画像を指定するという方法も考えられます。しかし、この方法だとチラつきが目立ち、あまりよろしくないです。

ナビゲーションについては、こんな感じです。
うわぁ、もう12月だ。。。

ココログフリー版

ココログのフリー版っつーのがリリースされました。
現在のベーシック／プラス／プロより機能が多いのですが、どういうことでしょうか。。。(-_-;
ベーシック／プラス／プロのバージョンアップは3月とのこと。。。フリー版の方が先ですか。。。
とりあえず、カスタマイズネタが無駄にならないように、情報収集しなくては。

っていうか、管理画面がメチャ重いです。
でも、フリー版の方は軽いらしいです。
わけわからん。(-_-)

ココログのカスタマイズ Vol.2

今回から具体的なカスタマイズ方法を説明していきたいと思いますが、最初に注意点がありますので、まずそこから説明します。

ココログのHTMLのコードですが、色指定などデザインに関する記述はありません。
デザインは全て別ファイルのCSSに実装されていて、HTMLのコードにはそのCSSファイルを参照する記述があるだけです。
つまり、HTMLとデザインが切り離されているので、CSSファイル1つだけを置き換えてしまえば、デザインをガラリと変えることができるわけです。
ココログのテンプレート変更では、この仕組みを利用していると思われます（多分）。
このCSSファイルはstyles.cssというファイル名で、ココログ編集ページの「コントロールパネル」→「ファイル」から確認することができます。

で、実はこのstyles.cssの存在がちょっと曲者なのです。
選択して削除できるので、別に気にしなくてイイじゃんと思うかも知れませんが、なんと、新しい記事を作成するなど、何かしらの操作でstyles.cssが勝手に復活してしまうのです。
ということで、styles.cssが常に存在していることを前提に、自作CSSを記述していく必要があるのです。

例として、タイトルを画像に変更する方法を紹介します。
まず、ココログのタイトルのHTMLですが、下のような構造となっています。

<div id="banner">
    <h1><a href="http://ココログのURL/" accesskey="1">タイトル</a></h1>
</div>

通常のHPなどであれば、普通にid="banner"の<h1>のスタイルを記述するだけで良いのですが、ココログではstyles.cssに既に定義が存在しています。
このような場合、それぞれのスタイルに !important を記述することで、自作CSSのスタイルの方を優先的に適用させることができます。
次のコードがこのページで使用しているCSSです。

#banner {
    color: #000 !important;
    background-color: #000 !important;
    border: 0px !important;
    text-align: left !important;
    padding: 0px !important;
}
#banner h1 a:link,
#banner h1 a:visited,
#banner h1 a:active,
#banner h1 a:hover {
    line-height: 30px !important;
    display: block !important;
    width: 266px !important;
    height: 30px !important;
    text-indent: -9999px !important;
    background-image: url(image/title_02.gif) !important;
}

やりたいことは、<h1>のテキストは表示させないようにして、背景に画像を指定するという感じなのですが、styles.cssの定義を上書きする必要があるので、結構余計なスタイルを記述しています。
ちなみに、記述する内容は、設定されているテンプレートのstyles.cssによって変わりますので、上のコードはあくまで参考ということで。

それから、次のような手順で作業すると効率的かなと思いました。
1. 目標デザインに出来るだけ近いテンプレートに変更する。特に背景色は同じモノが良い。
2. テンプレートを変更したら、styles.cssをダウンロードして、別名で保存。
3. そのファイルを編集して、完成したらアップ

かなり長くなりましたが、今回はこの辺で。

ココログのカスタマイズ Vol.1

ココログのデザインテンプレートって、気に入るモノが無いですよね。
実はベーシックプランでも、頑張ればデザインをカスタマイズすることができます。
HTMLとCSSの知識が必要になりますが、その方法を紹介していきたいと思います。

まず、ココログでは、サブタイトルにHTMLタグを入力することができます。
（「ブログ」タブ → 「設定の変更」→ 「基本設定」 → ブログのサブタイトル）
このサブタイトルは、全てのページに記述されます。

それから、ファイルもアップすることができます。
（「コントロールパネル」タブ → 「ファイル 」タブ → 新規ファイルのアップロード）

つまり、CSSファイルをアップして、各ページからそのCSSを参照するように記述することで、自分の好きなようにデザインできるようになります。
ちなみに、このページではサブタイトルに以下のコードを入力しています。

<link rel="stylesheet" href="http://ココログのURL/longer.css" type="text/css">

どのディレクトリからでも参照できるように絶対パスで指定してます。

今回はここまでです。