Geeklog（ギークログ）カスタマイズ事例-1_1

仕事で、Geeklog（ギークログ）のテーマカスタマイズをすることが多いのだが、いつも時間に追われて、記録を残せないでいます。
Geeklogだからというより、普通のCSSカスタマイズの範囲内の作業も多いのですが、記録を残しておけば、誰かに役にも立つかなと思い、今回記録することを思い立ちました。

既存の静的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
  • 記事作成の際のトラックバックデフォルト設定：トラックバックを受け付けない

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