今日は、ブログシステムをサイト内に導入する準備に取り掛かりました。

あらゆる意味で“フリー”なパッケージがないものかと調べてみると、非常に良さそうなサイトが見つかりました。

Nucleus CMS Japan
http://japan.nucleuscms.org/

サイトのデザインやレイアウトをスキンとテンプレートで自由にいじれます。

さらに、操作メニューの文言も、言語ファイルの中身を書き換えるだけで簡単に変更できます。

これです、私が求めていた理想形

いやね、自分でブログシステムを一から組んでみようとも一瞬思ってみたりもしたが、
スコア分析画面を作るのにも二の足を踏んでいる人間がナニをバカな
という声が聞こえた気がしたので即刻却下した経緯があるんですよ。

「でも単なる趣味のページにシェアウェアもどうかな~、でもフリーウェアもどうせロゴを外すなーとか色々制約がありそうだし、サイトデザインにマッチするように自由にデザイン変更しようと思ったら、どうせコードを全部見てひとつひとついじっていかなアカンのやろな~」
なあんて思っていたのですが。

それはまるで神龍やドラえもんのように、まさしく“夢を叶えてくれる”パッケージが存在していたのです。(いや、ナニヲイマサラ、とか言わない約束で。)

ダウンロードしたファイルの中には、こんな文言も書かれています。

私たちがフリー・ソフトウェアについて口にする場合は自由のことに言及しているのであって、価格のことではありません

私たちのGNU General Public Licenses(一般公有使用許諾書)は、フリー・ソフトウェアの複製物を自由に頒布できること(そして、望むならこのサービスに対して対価を請求できること)、ソース・コードを実際に受け取るか希望しさえすれば入手することが可能であること、入手したソフトウェアを変更したり新しいフリー・プログラムの一部として使用できること、以上の各内容を行なうことができるということをユーザ自身が知っていることを実現できるようにデザインされています。

パーフェクトでございます。

これなら自分のサイトデザインを損なわずにブログシステムを導入できます。

ちなみに本日文体が妙に丁寧なのは、nucleus様に対するリスペクトフルな気持ちの表れでございます。

いやホント、テンション上がりまくりました。

早速ダウンロード・インストールをして(これ自体3分もかからない)、管理画面を見てみました。

blogページは、各パーツごとに出力する内容(タグを含むソース)を定義する“スキン”と呼ばれるものと、blogデータを展開するのに使われるひな形である“テンプレート”によって出力されるようです。

スキン内の定義内容はどの部分にblogデータを展開するのか、どのテンプレートを使用して展開するのかなどの指定を含み、スキン内で指定されたテンプレートをひな形に、blogデータが指定された場所に出力されるのです。

従って、これらのパーツをいじることによってデザインを自由に変更出来るわけです。

そしてこれらのスキンおよびテンプレートは直接ファイルを開いてコードをいじるのではなく、管理画面上のフォームで書き換えができるようになっています。

ただし、直接書き込めるのは基本的にhtmlのみで、phpコードは別ファイルに書いておき、あらかじめ用意されている変数を用いてコール(<%phpinclude(xxx.php)%>)するという仕組みになっています。

管理画面も直感的に扱えるインターフェイスとなっており、本当にパーフェクトです。

では、さっそく。

ちょっといじることにしました。

オタメシで、デフォルトのものをコピーしてnonukesというスキン作成しました。

html自体の変更はあとまわしにして、まずは読み込むスタイルシートを変更。
bodyのbackgroundを変更して。
bodyのfont-familyを変更して。
h1のheight、widthを変更して。
h1 aのbackground-imageを設定して。

さあ、どうだ。画面表示。じゃん。

うわ。

うちのサイトと同じデザインになった。

paddingやmarginの微調整は必要ですが、ほぼ思い通りにできました。

こうなると、上がりまくるこのテンションの持って行き場が困ります。

さあ、どうしてくれようか。

そうだ。とりあえずグローバルナビゲーションをしっかり作ろう!

、、、だから、ナニヲイマサラ、は言わない約束でしょ?

いや、実は現時点ではボウリング関係しかコンテンツがなく、グローバルナビゲーションを配置しようにもナビゲーションが1個だけという、なんとも情けないことになってしまうのでグローバルナビゲーションは作ってなかったんです。ですが、ブログシステムを導入したらコンテンツが増えるため、この際作ってしまおうと。

というワケで、ブログシステムの導入が今日の主題だったはずがあらぬ方向へと作業が進んでしまいました。

まあ、html自体は単に<h1>直下に<dl>を配置し、<dd>に各カテゴリーのトップページへのリンクを記述し、<h1>および<dl>を<div id="header">で内包する、というだけのものです。

// ◆◆◆ ヘッダーの記述 printHeader($path,$category,$siteTitle)
function printHeader($x,$y,$z)
{
  print "<div id=\"header\">\n";
  print "  <h1><a href=\"{$x}\"><span class=\"hidden\">{$z}</span></a></h1>\n";
  print "  <dl id=\"{$y}\">\n";
  print "    <dt>カテゴリー</dt>\n";
  print "    <dd id=\"banner1\"><a href=\"{$x}bowling/\"><span class=\"hidden\">ボウリングの紆余曲折</span></a></dd>\n";
  print "    <dd id=\"banner2\"><a href=\"{$x}beetles/\"><span class=\"hidden\">カブトムシ飼育の紆余曲折</span></a></dd>\n";
  print "    <dd id=\"banner3\"><a href=\"{$x}construction/\"><span class=\"hidden\">サイト構築の紆余曲折</span></a></dd>\n";
  print "    <dd id=\"banner4\"><a href=\"{$x}profile/\"><span class=\"hidden\">しょおもな人生の紆余曲折</span></a></dd>\n";
  print "  </dl>\n";
  print "</div>\n\n";
}

あとはスタイルシートで<dd>をfloat:leftして横並びにし、それぞれの<a>に対して背景画像を設定するだけです。

これまでの経験から、作業は「らっという間(copyrighted by サンドウィッチマン 富澤さん)」に終了しました。

できた~、と思っていたら、はなこさんが横でポツリ。

力の抜けたようなフォント(あんず文字およびホリデイMDJP03)なんだから、どうせなら力の抜けた感じのナビゲーションにしたら?例えば、それぞれのナビゲーションをサイトタイトル両脇にばらばらに散らすとか

なんという悪魔の囁き。

「めんどくさい」という言葉を発する前に「ならやってやれ」という脳内指令が下りました。

いや、別にはなこさんが悪いワケじゃないんだよ、別に。だから別に。

“意地”というかなんというか、とにかくボクの腐りかけた脳から指令が下ったんですって。

だから、別に誰のせいとかじゃないんだよ、はなこさん。いや別に。

と、いうワケで、タイトルの両脇にナビゲーション。

言葉でいえば簡単だが。

いや、簡単にしようと思えば簡単にはできる。

htmlソース上で<h1>の上下に<dl>を配置すればいいんだから。

ただ、“html文書”としての論理構造を考えるとそれはあまりにも不自然すぎる。

やっぱり、<h1>⇒<dl>というカタチは崩せない。

となると、、、スタイルシートのアレか。

たしか、positionプロパティでrelativeやらabsoluteやらを指定するんだっけ。でも、なんだかヤヤコシイしブラウザによって解釈が違うこともあると聞きかじった覚えがあったので、今まで使わないようにしてきたんだよなあ。

でもここは自分のサイト。

誰に迷惑をかけるでもないから、勉強と思ってやってみることに。

、、、ん~、やっぱりヤヤコシイ。

最初はワケが分からなかったが色々いじっているうちに何とかコツは掴めてきた。

問題は、続く要素の処理。前の要素のpositionプロパティが何であるかによって事情が異なる。前の要素にposition: relativeを指定していると、その要素は“本来あるべき位置にある”ものとして次の要素が配置される。

つまり、本来は<h1>の下に<dl>がある“はず”だったのに、今回のように<h1>の横に<dl>を配置すると、次の要素との間には埋めようのない空白部分ができてしまう。

逆にposition: absoluteを指定していると、その要素は“ない”ものとして次の要素が配置される。

つまり、次の要素が上に詰められるため、前の要素を大きく横にずらさない限り重なってしまう。

んもう、メンドクサイ。

“埋めようのない空白部分”はどうしようもないが、重なる分に関してはmarginを大きくとるなどして対処できるので、position: absoluteを使用することに。marginをうまく調整することで、なんとかカタチにはなった。

ただ、ページによってナビゲーション部分がずれるという事態が発生。とりあえずカテゴリーごとに違うidを<dl>に付けていたので、idごとにスタイルシートで調整してズレを回避。これに関しては理由がまだよくわからない。おいおい、調べてみることにしよう。

ここまできたら乗り掛かった船、勢いで“パンくずリスト”も作成することに。

メンドクサイので、ページタイトルをそのまま“パンくずリスト”形式として表現することにした。要は<h2><h3><h4>要素をfloat:leftで横並びにし、各要素間には背景画像で“⇒”を配置。これでhtmlファイルを変えることなくパンくずリストを作成完了。

#navigation h2,#navigation h3,#navigation h4 {
  font-weight: normal;
  font-size: 20px;
  padding-left: 15px;
  padding-right: 10px;
  margin-top: 0px;
  float:left;
  color: #999999;
}

#navigation h3,#navigation h4 {
  padding-left: 20px;
  background-image: url(../img/arrow.gif);
  background-repeat: no-repeat;
  background-position: -2px 3px;
}

まあ、そこそこの出来栄えにはなったかな。

ただ、手書き風フォントに合わせるために、クレパス調のラインを使用したりしたもんだから、全体的に“カワイイ”感じのサイトデザインになってしもた。

30代のおっさんが手がけているサイトには見えんな、、、

でもせっかく作ったんだし、これはこれでおいておこう。ヤル気になれば、スタイリッシュな(田舎モンが使う言葉か?)スタイルシートをもう一つ作って、気分によってjavaScriptで切り替えられるようにでもしよかな?

まあ、今度でいいや。

気付けば朝だ。久しぶりの徹夜。

よし、寝よう。