サイトのカスタマイズ

ブログ・サイトのデザイン(表示や機能)は、自由に変更することができます。 ここでは、ブログ・サイトのデザインを変更する方法について説明します。

カスタマイズの基礎知識

レイバーネット日本が提供するブログシステムは、Zopeのアプリケーションとして開発されたCOREBlogと呼ばれるシステムです。 COREBlogは、Zopeの機能を使用していますので、サイトのカスタマイズには一般的なHTMLの知識に加え、基本的なZopeの知識も必要になります。

Zopeの機能を呼び出すためには、HTMLのソースコードに「DTMLタグ」と呼ばれるタグを使います。 DTMLタグは、<dtml-キーワード 変数名・式>といった形で使われます。 DTMLタグにはさまざまな種類がありますが、COREBlogでよく使われるタグとしては、 <dtml-comment> と <dtml-var> があります。

<dtml-comment>は、HTMLの <!-- と --> のようにコメントを記述するためのタグです。 ただしHTMLのコメントタグと違って、HTMLのソースコード内には表示されません。

<dtml-var> は、システムで使われている変数やメソッド(関数)、式などの実行結果を表示するタグです。 変数やメソッドの種類は非常に多いのですが、変数名、メソッド名などを見ればだいたいの見当はつくと思います。 たとえば、<dtml-var blogurl>というタグは、Settingsで設定したブログのURLに置き換えられます。

このほかに、<dtml-if>は条件判断、 <dtml-call>は<dtml-var>のように結果を挿入せずメソッドを呼び出し、 <dtml-in>は繰り返し、 <dtml-with>はコンテクストの指示、 などのタグが使われます。

既存のスキンをベースにカスタマイズ

まったく新しいスキンを独自に作成することもできますが、ZopeやHTMLの知識が必要になるため、一般のユーザにはやや難しいと思います。 ここでは、初歩的なHTMLの知識を持つユーザにも比較的やりやすいカスタマイズの方法を説明します。 ここで説明するカスタマイズは、既存のdefaultスキンをコピーし、必要な部分だけを変更する方法です。

まず、既存のdefaultスキンをコピーします。 管理画面の左側に表示されているフォルダアイコンの「skin」をクリックします。 管理画面の右側には、defaultというフォルダが表示されるはずです。 このフォルダの左端のチェックボックスにチェックマークをつけ、下の「Copy」ボタンをクリックします。 画面が書き換えられたら、下に「Paste」ボタンが表示されますから、このボタンをクリックします。

「Paste」をクリックすると、「copy_of_default」という新しいフォルダが作られます。 このフォルダの名前を「myskin」に変更しましょう。 「copy_of_default」の左端のチェックボックスにチェックマークをつけ、「Rename」ボタンをクリックします。 すると、名称変更の画面が表示されますので、「copy_of_default」を消して「myskin」に書き換えます。 「Save changes」をクリックすると、名前が変わっています。 defaultの内容が、myskinの名前でコピーされました。

次に、myskinフォルダをクリックします。 すると、myskinフォルダの中に含まれるオブジェクト(ファイル)が表示されます。 これらのオブジェクトには、HTMLやDTMLタグで書かれたブログのソースコードが含まれています。 この内容を書き換えることによって、デザインや機能を変更することができます。

カスタマイズの例

簡単なカスタマイズの例として、ブログサイトの画面上部に表示されるタイトルバナーを変更してみます。 タイトルバナーは、mybannerという名前の横長のグラフィックファイルとします。

skinフォルダに新しく作ったmyskinを開き、blog_bannerというオブジェクトをクリックします。 するとテキスト領域に、タイトルバナーを表示するためのHTML/DTMLのソースコードが表示され、編集できる状態になっています。 デフォルトのblog_bannerはdivタグで囲まれたtableで、 一行目は高さ10の空行、 二行目は高さ30で、一列目は次の行にまたがるレイバーネットのロゴ、二列目はタイトル、三列目は次の行にまたがる幅270の空行になっています。 三行目は高さ10、一列目は前行のロゴの続き、二行目はサブタイトル、 という構成になっています。

つまり、バナーを張り替えるには、テーブルの部分を書き換えてやればいいということになります。 具体的には、次のように書き換えて、「Save Changes」をクリックします。

<div> <img src="<dtml-var blog_url>/images/mybanner"> </div>

ここでは、自分で作成したバナーのファイルをblogがインストールされたフォルダの下にあるimagesフォルダにあるものとします。 そのために、<dtml-var blog_url>というDTMLタグを使っています。 blog_urlはブログのフォルダですから、このimgタグはブログのフォルダの下にあるimagesフォルダに収められたmybanner、という意味になります。 もちろん、DTMLタグを使わずにストレートにURLを書いてもかまいません。

まだimagesフォルダにバナーファイルを保存していないので、このままではバナーが表示されません。 管理画面左側のフォルダ一覧に表示されているimagesフォルダをクリックします。 続いて、イメージオブジェクトを追加します。 画面右側の上に表示されているプルダウンメニューから「Image」を選びます。 すると、アップロード画面になりますから、「id」に「mybanner」と入力し、ファイル名を選択してアップロードします。

スキンの書き換えとファイルのアップロードが終了したら、ブログで使うスキンを指定し直します。 ブラウザの画面右上の「blog」アイコンをクリックしてブログ管理画面(エントリ一覧)に戻ります。 そして、画面上の「Skins」タブをクリックし、スキンのプルダウンメニューから先ほど追加した「myskin」を選びます。 そして「Change Skin」ボタンをクリックすると、変更が反映されます。

実際に、ブログ画面にアクセスして、バナーが変更されていることを確かめてください。