Geeklog検証サイトで、テーマカスタマイズを行い、テーマテスタPHPブロックを使って確認しようと思いました。
ブロック管理で「有効」にしても表示されません。？？？と頭の中にはてなマークが渦巻きました。

Geeklog自動インストーラを使って、新たにGeeklogをインストールしてみたり…。
MAMPローカルでも、「テーマの変更」は表示されるのに…。

コンフィギュレーション＞Geeklogの設定＞ユーザと投稿＞ユーザ「テーマ選択を許可する」が“いいえ”でした。
このため、テーマテスタPHPブロックが使えなかったのでした。
そういえば、以前にも同じような経験がありました。
学習しない自分にガックシ。

次は、ログアウトすると掲示板が表示されないってことに気づきました。
管理者専用メニュー＞掲示板＞設定＞閲覧許可「投稿を見るためにはアカウントの登録が必要」が“はい”になっていました。
あぁ….。
検証用のみに使っていたGeeklogサイトでしたが、以前にスパム書き込みが多かったので、設定変更していたのでした。
すっかり忘れていました。

あほな自分のお陰で、「Macユーザだから」と試さずにいたGeeklog自動インストーラも経験したし、まぁいいか、ということに。

いきなり、絶対パスの指定でつまずいた私。アップグレード云々以前の問題です。
XREAのサーバ仕様などの情報を確認。
その後は特に問題なくアップグレード出来ました。

Geeklog1.5では、コンフィギュレーション設定画面がシステムに組み込まれました。
1.4.1ではコンフィギュレーションプラグインを使っていました。
いい加減な私はプラグインを無効化しないままアップグレードしました。
すると、メニューの「コンフィギュレーション」で表示されるのはプラグインのものでした。
あぁそうか！と、コンフィギュレーションプラグインを無効化して、正しく表示されるようになりました。

今までテーマのカスタマイズの作業は、テーマのOverRideを利用していました。
が、GeeklogWikiに「テーマのOverride（オーバーライド）ハックと管理画面表示をテーマprofessional固定にするハックは1.5より対応しません。ご注意ください。」とありました。
確かに、注意が必要ですね。

個々のブロックのレイアウトを分けたい時に便利なのが、ブロックテンプレートでPHPを使うハック「利用方法」に載っているブロックIDを書き出す方法です。
ブロックIDが付加されるので、ブロック毎のスタイル指定ができるようになります。

また、タイトル書式によりブロックのタイトルを削除するハックでは、「タイトルの先頭文字が半角ピリオド（.）ならタイトルを表示しない」「タイトルの先頭文字が半角#（シャープ）ならdivも表示しない」が可能になります。
ブロックIDを書き出すことが可能になれば、スタイルシートで「タイトルを表示しない」ことも可能ですが、このハックでよりシンプルな構造になります。

といっても、私はスタイルシートやHTMLのテンプレートファイルを細々作業する担当で、実際にはプログラム関連のハックは作業していません。
知識として、メモ。

6/16追記：Geeklog 1.5.0正式版発表につき、ファイル上書き

1. GeeklogからGeeklog 1.5.0をダウンロードし展開
2. MAMPを起動して、phpMyAdminでGeeklog用のデータベース"geeklog"を作成
3. MAMPでのルートディレクトリとなる /MAMP/htdocs/ に Geeklog 1.5.0/public_html/ をフォルダごと移動
4. /MAMP/htdocs/ に /public_html/ 以外のファイルを移動
   下記のような構成
   • /MAMP/htdocs/
   • ├db-config.php
   • ├system/
   • ├language/
   • ├backups/
   • ├data/
   • （省略）
   • └public_html/
5. /MAMP/db-config.php を開き、データベース情報を書き換える（データベース情報は、インストール画面から入力する）
6. ブラウザから http://localhost:8888/public_html/admin/install/index.php にアクセスし、インストールウィザードに従ってインストール
   右上に"Language: "メニューが表示されるので、"Japanese"を選んで日本語表記に変更

   

7. 無事に、Welcome画面が表示され、インストール成功を確認

インストールが格段に簡単になりました。
しかし、英語の説明が分からないので、ファイルの設置場所を試行錯誤しました。
エラーが出ても、分からない（涙）

Geeklog1.5日本語版は、Geeklog Japaneseで準備中です。

作業内容は、インストール後のレイアウトカスタマイズとコンテンツ移行。
構成は、ヘッダ・左メニュー・右メイン・フッタとオーソドックス。

元のHTMLファイルで構成のサイト

テーブルレイアウト+要素はCSSで指定

ファイル構成：主要なHTMLファイル20ファイルくらい＋更新ごとに増えていくニュースとメルマガ過去データ

新しいGeeklogサイト

CSSレイアウト

主要なHTMLファイルは静的ページ・ニュースとメルマガは記事でファイル作成

1. Geeklog（ギークログ）カスタマイズ事例-1_1：テーマ（テンプレート）カスタマイズの基本作業
2. Geeklog（ギークログ）カスタマイズ事例-1_2：コンテンツ（HTML記述）入力のための準備
3. Geeklog（ギークログ）カスタマイズ事例-1_3：コンテンツ（HTML記述）入力（記事と静的ページ）
4. Geeklog（ギークログ）カスタマイズ事例-1_4：リンク切れチェック、画像パス切れチェック、Geeklog設定変更

記事と静的ページでコンテンツを作ったら、リンク切れや画像パス変更漏れなどを確認。

Firefoxアドオンでリンク切れを確認

今回のサイトはページ数は60くらいで、ほぼサイトマップページ・記事一覧ページからリンクしています。
Firefoxアドオン「LinkChecker」でリンクチェックしました。

少しでも楽したいと、今回インストール。
画面や設定の解説は、Webサイトのリンク切れの不安を解消 LinkChecker Firefox アドオン（Firefox fox）にありました。

Firefoxアドオン「LinkChecker」をインストール後、Firefoxを再起動するとメニューに表示されます。

次のように、色分けしながら、ページ内をチェックしてくれます。

ブラウザ画面内で選択して、コンテキストメニューを表示させると、選択部分のチェックも出来ます。

リンク切れ対策ツール★リンクチェッカーというサービスもありました。
無料版使うのに、メールアドレスの入力が必要です。

Firefoxアドオンで画像パス間違いを確認

画像パス間違いチェックは、別のFirefoxアドオンのお世話になります。
Web Developer 日本語版です。
このメニューの中の「パスに問題のある画像を探す」で。

新しいタブが開いて、パスに問題のある画像の一覧を表示してくれます。

私が使っているWeb Developer 日本語版はVer.1.1.2ですが、現在は1.1.4日本語版が配布されています。
今日この記事を書くために確認して気づきましたが、サポートがインフォアクシアから移管されてました。
今後も日本語版の提供は続けられるということで大変有り難い！

その他、Geeklogの設定変更

タイトルタグの表示を変更

Geeklog初期設定では「サイト名 – ページタイトル」となっていますが、タイトルをページタイトル-サイト名に変更（GeeklogWiki）にしました。
SEO対策というより、現行がそうだったので合わせるため。
「920行目あたり」と書いてあるけれど、テキストエディタで検索するのが簡単です。

不要なブロックを非表示に

管理者専用メニュー＞ブロックで、ブロック管理画面を表示し、一般の閲覧者（ゲストユーザ）には、見せなくてもいいブロックの設定を変更しました。

テーマエディタプラグインでカスタマイズしたテーマを変更できるように設定

私は、FTPでテーマファイルをあちこち変更しましたが、管理者専用メニュー＞テーマエディタからも変更できます。
plugins/themedit/config.php で、テーマエディタプラグインで変更できるテーマを設定します。
また、テーマエディタから変更できるよう、あらかじめサーバのファイルはパーミッションを設定する必要があります。

以上で、今回のカスタマイズ事例レポート終わり。

静的ページでコンテンツを入力

テーブルレイアウトの時は、ヘッダ・左メニュー・右メイン・フッタという構成でした。
静的ページには、現行のデータの右メイン部分を入力していきました。
画像のパスは、新しいサイトの構成に合わせて変更します。これは、テキストエディタでの変換が便利です。

記事でコンテンツを入力

新着情報とメルマガバックナンバーは、「記事」で入力しました。

入力しつつ、現行のページとの違いをサイトの設定画面（コンフィギュレーション）やテンプレートの変更で調整していきました。

• 日時表示変更：コンフィギュレーション＞システム設定＞日付と時刻の完全な表記
• storytext.thtml から、このサイトでは不要なソース（投稿者やコメントなど）を削除
• article/article.thtml から、「関連情報」のソースも削除

テンプレートファイル（.thtml）の変更は、カスタマイズ元にしてる ProfessionalCSS からテンプレートファイルをコピーして作業し、サーバにアップします。

記事の年指定範囲を変更する

Geeklogでは記事の投稿日を変更できますが、初期設定のままではプルダウンメニューに表示される「年」の範囲が短いです。
過去のデータを移行する場合、日付もかなり前からになり、今回は2000年くらいからありました。
その指定範囲を変更するには、記事の年指定範囲を変更する（GeeklogWiki）の操作をします。

そのほかの作業

ほか、以下を参考に、記事関連のカスタマイズをしました。

• 静的ページホーム表示で２ページ目以降も表示する（GeeklogWiki）
• 最新記事リストを表示する

メニューは左ブロック表示

左ブロックにメニューを画像のリストで表示します。
ブロック編集で、新しいノーマルブロックを作成し、HTMLソースを記述します。

コンテンツページの作成方法を決める

コンテンツは静的ページ機能（GeeklogJpWiki）と記事作成機能（GeeklogJpWiki）を使います。
ニュースとメルマガバックナンバーを記事で、それ以外のほとんど更新の無いページは静的ページで作成していきます。

静的ページの一番下に表示される「最終更新日」と「閲覧件数」を非表示に

/private/geeklog/plugins/staticpages/config.php の以下の部分を変更します。


// ブロックで囲む初期設定　1:ブロックで囲む（タイトル表示）, 0:ブロックで囲まない（タイトル非表示).
$_SP_CONF['in_block'] = 0;

// 閲覧件数　1:表示 0:非表示
$_SP_CONF['show_hits'] = 0;

// 最終更新日　1:表示　0:非表示
$_SP_CONF['show_date'] = 0;


「ブロックで囲む初期設定」も「ブロックで囲まない」にしておいた方が、レイアウトの自由が利くと思います。
個々のページでにすることも可能です。

ページごとのレイアウトを変えるためのテンプレート変更

• メニューに、現在位置がそのページだと分かるような選択状態を設定
• トップページだけ表示するコンテンツがある
• ページごとに、ちょっぴりレイアウトを変更する

これを実現するために、header.thtmlに変数を追加します。

header.thtmlで使える変数（GeeklogJpWiki）にある次の変数を利用します。
2007年8月以降配布版のGeeklog日本語版標準パッケージを使っているなら、変数設定に関しての作業はありません。

• {topic_id} 話題ID
• {sp_id} 静的ページID
• {home_id} home:ホームページ，sub:サブページ

次のように、header.thtmlを変更しました。

変更前：
<!-- コンテナ -->
<div id="container">
</div>

変更後：
<!-- コンテナ -->
<div id="container" class="{home_id} {topic_id} {sp_id}">
</div>

オリジナルのスタイルを custom.css に追加する

ページごとのレイアウトの準備も出来たので、静的ページでコンテンツを作成しつつ、custom.css にスタイルを追加していきます。

header.thtmlに変数を入れたので、ページごとのレイアウトを下記のように設定可能です。
赤字が変数によって指定可能になった部分です。

トップページだけにメニュー（左ブロック）の<div id=”a”>を表示＜サブページでは非表示＞

div.sub div#leftblocks div#a { display: none; }
変数：{home_id}

静的ページID：sp1 では、メイン（中央ブロック）の<h2>のカラーを赤（#f00）に変更

div.sp1 h2 {color: #f00; }
変数：{sp_id}

既存の静的HTMLで作成したレイアウトをGeeklogに移行する（Geeklogテーマのカスタマイズ）作業の記録です。
今回は、ほとんどのページを静的ページ機能（GeeklogJpWiki）で作成します。
大まかなレイアウトの移行と、サイトオリジナルのスタイルの追加となると思います。

Geeklog Japaneseの標準テーマ「ProfessionalCSS」をベースにしたテーマをオーバーライドで作ります。

• ブラウザチェックはIE6、IE7、Firefoxくらい
• 作業環境はMacOSX+Firefox+Firebug（Firefoxアドオン）
• Geeklogは設置済み

GeeklogJpWiki：Override（オーバーライド）で作ると、ベーステーマを指定することにより大幅にテーマのテンプレートファイル数を削減できます。

GeeklogJapanese：テーマ「GeekBlog」1.4.1専用Override対応完全版をダウンロードして、必要なファイルの確認やOverride対応ハックの参考にするのも良いと思います。

まずは、ローカルで作業

新しく作るテーマ名を決めて、フォルダを作成しました。
仮に「custom」とします。

用意するファイルは、次の通り。
「ProfessionalCSS」からコピーして、修正していきます。

• style.css
• custom.css
• images/
• navbar/
• header.thtml, footer.thtmlなど，新しいテーマ固有のテンプレートファイル
• javascript/
• functions.php

style.css を変更

新しいテーマ以外は、元の「ProfessionalCSS」を参照するように変更しました。

例）
@import url("css/default.css"); /* デフォルトスタイル */
↓変更
@import url("../ProfessionalCSS/css/default.css"); /* デフォルトスタイル */

functions.phpを変更

GeeklogJpWiki：Override（オーバーライド）を参考に、functions.php に追記して、UTF-8で保存しました。

custom.css にカスタマイズスタイルを追加していきます

custom.cssで使う画像は、images/custom/ に配置します。
「ProfessionalCSS」内 custom.sample.css も参考になります。

スタイルは、「ProfessionalCSS」cssフォルダ以下のCSSファイルの内容を上書きする形で指定します。
ひとまず次のファイルを参照しながら、作業しました。

デフォルトスタイル：default.css

ブラウザのデフォルトスタイルの違いを吸収するためにあります。タグごとのマージンやフォントサイズ・太さ・フォントスタイル、リストスタイルなどが指定されています。

共通スタイル：common.css

サイト全体を通して使用されるスタイルです。

基本レイアウトスタイル：layout.css

サイトの基本となるレイアウトです。
コンテナ、ヘッダ、グローバルナビゲーション、左ブロック・中央ブロック・右ブロック、フッタのレイアウトを指定しています。
JavaScript有効時の各ブロックの指定は、このファイルにあるコメントを参考にすると分かりやすいです。

ブロックスタイル：block.css

左ブロック・中央ブロック・右ブロック・その他ブロックのスタイルです。
システムメッセージ等を表示するメッセージブロックや個別記事ページの関連情報ブロック、ブロック内のリストアイテムなども含まれます。

custom.css にそれぞれのスタイル上書きをしていきます

今回のレイアウトは、左-中央ブロックの２カラムで、サイズは次の通り。

• サイト全体の幅[W] = 780px
• 左ブロックの幅[L] = 210px
• 中央ブロックの幅(2カラム) = [W] – [L] = 570px

こんな感じ。

/* 共通スタイルリセット */
body { /* common.css */
  background: #fff;
  color: #333;
  font-family: "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;
}

ul,ol {
  margin: 0;
  padding: 0;
  list-style-position: outside;
}

/* ブロックタイトルのスタイルリセット *//* block.css */
div#centerblocks div.block-center h2,
div#centerblocks div.block-center h3,
div#leftblocks div.block-left h2,
div#rightblocks div.block-right h2 {
  margin: 0;
  font-size: 100%;
}

/* ブロックのスタイルリセット *//* block.css */
div#centerblocks div.block-center,
div#leftblocks div.block-left,
div#rightblocks div.block-right {
  margin: 0;
  padding: 0;
  border-bottom: none;
}

/* レイアウトスタイルカスタマイズ *//* layout.css */
/*----- コンテナ -----*/
div#container {
  width: 780px;  /* サイト全体の幅[W] */
  background: transparent;
}

/*----- ヘッダ -----*/
div#container div#header {
  margin: 0;
  padding: 0;
  background: transparent;
}

/*----- ラッパー -----*/
body.left-center-right div#container div#wrapper,
body.left-center div#container div#wrapper,
body.center-right div#container div#wrapper,
body.center div#container div#wrapper,
body.js_off div#container div#wrapper {
  background-image: none;
}

/*----- 左ブロックコンテナ -----*/
div#container div#wrapper div#leftblocks {
  width: 210px;  /* 左ブロックの幅[L] */
  margin: 0 570px 0 0;  /* 右マージン = サイト全体の幅[W] - 左ブロックの幅[L] */
  padding: 0;
}

/* JavaScript無効時の左ブロックコンテナ */
body.js_off div#container div#wrapper div#leftblocks {
  float: left;
  margin: 0 -210px 0 0;  /* 右マージン = -(左ブロックの幅[L]) */
}

/*----- 中央ブロックコンテナ -----*/
/* JavaScript有効・2カラム(左ブロック・中央ブロック)時の中央ブロックコンテナ */
body.left-center div#container div#wrapper div#centerblocks {
  width: 570px;  /* 中央ブロックの幅 = サイト全体の幅[W] - 左ブロックの幅[L] - 右パディング - 左パディング */
  margin: 0 0 0 -570px;  /* 左マージン = -(サイト全体の幅[W] - 左ブロックの幅[L]) */
  padding: 0;
}

/* JavaScript無効時の中央ブロックコンテナ */
body.js_off div#container div#wrapper div#centerblocks {
  width: 570px;  /* 中央ブロックの幅 = サイト全体の幅[W] - 左ブロックの幅[L] - 右ブロックの幅[R] - 右パディング - 左パディング */
  margin: 0 0 0 210px;  /* 左マージン = 左ブロックの幅[L] */
  padding: 0;
}

/*----- フッタ -----*/
div#container div#footer {
  background: transparent;
  color: #333;
}

/* フッタリンク */
div#container div#footer a,
div#container div#footer a:link {
  color: #333;
  text-decoration: none;
}

div#container div#footer a:visited {
  color: #666;
  text-decoration: none;
}

div#container div#footer a:hover {
  color: #333;
  text-decoration: underline;
}

div#container div#footer a:focus,
div#container div#footer a:active {
  color: #333;
}

YUI Fonts CSSでブラウザ間のフォント表示の差異を無くす

YUI Fonts CSSも入れておきました。
custom.cssの一番上に。

body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

変更するテーマファイル（.thtml）を作成する

変更するテーマファイルを「ProfessionalCSS」から「custom」にコピーして作業しました。
必要な画像は、images/custom/ に配置しました。

header.thtml

ヘッダ部分を画像表示に変更
サイトスローガン・グローバルナビゲーション・ウェルカムメッセージ部分を削除

leftblocks.thtml

検索ブロックを削除

footer.thtml

フッタ表示を変更

blockheader-left.thtml

左ブロックのブロックタイトルを表示したくないので、<h2>{block_title}{block_help}</h2>を削除

GeeklogJPWiki：ブロックテンプレートでPHPを使うハックを利用して、ブロックタイトルの先頭がピリオド（.）であれば，h2タグによるタイトル表示を一切出力しない設定も可能です。

以上で、「custom」フォルダをサーバにアップ。

コンフィギュレーションで基本設定

管理者専用メニュー「コンフィギュレーション」画面で、サイトの基本設定を行ないます。
サイト名・スローガンや表示する内容、そして表示テーマを変更。
とりあえず、以下の項目を変更しました。

• 基本設定
  • サイト名
  • スローガン
  • デフォルトテーマ：custom（カスタマイズしてアップしたフォルダ名）
• コンテンツ設定
  • 閲覧回数を隠す：隠す
  • 記事を友人に送るアイコンを隠す：隠す
  • 記事を印刷するアイコンを隠す：隠す
  • 記事新規作成時の話題アイコン表示デフォルト設定：表示しない
  • 記事新規作成時の表示ページデフォルト設定：該当する話題にだけ表示
  • 記事新規作成の場合のコメントに関するデフォルト設定：コメント不可
  • 記事がない警告メッセージの表示の有無：表示しない
• システム設定
  • URLリライト：機能ON
  • 記事作成の際のトラックバックデフォルト設定：トラックバックを受け付けない

設定を保存後、カスタマイズしたテーマが反映されているか、確認。