新しいテーマ: カラム切り替え型

　こんばんは。ppBlogのテーマ(スキン)は、数少ないのですが、以前作りかけだったのを少しいじって、とりあえずアップしておきます。見栄えはFirefoxで確認しています。一応、IE6向けの記述も入れていますが、細かいところまでは追っていないです。

　主な特徴を挙げると、

3ペイン(3カラム)と1カラムの切り替え型。
ソース上は、メインコンテンツ(つまりブログ記事)が、サイドバー内容よりも先行する。
テキストエディタで、幾つかの色を置換するだけで、ぐっと見栄えが変わるので、何パターンか配色を用意しやすい。
カラムの切り替え情報をクッキーに保存するので、ページを更新しても、1カラムなら1カラムを再現する(タイムラグがあってスムーズではないですが･･･)。

ってとこです。テーマに含まれるCSSファイルを見ると分かりますが、先頭に

/*
　基本カラー: beige
　基本リンクカラー: darkslateblue
　基本 a:hoverカラー: palevioletred
　基本 li:hoverカラー: #feffe9
*/

のようにコメントを入れています。お使いのテキストエディタで、この部分にある色を一括置換(例えば、beigeをyellowに連続置換)するだけで、ガラッと見栄えが変わります。今どきのテキストエディタでは、連続置換・一括置換はついていることが多いと思いますが、個人的に愛用しているのは、フリーとは思えないぐらい使い勝手の良いタブ型エディタであるYokka さんのDeuxEditor^G(ドゥエディタ)です。差分チェック機能なども付いていて、とにかく高機能です。

　とりあえず4種類ほど、配色を変えたパターンを用意したので、それぞれのスクリーンショットを付けておきます。

ベージュ系のシックなやつ。

柔らかなグリーン系。

ラヴェンダー～うす青色系。

ローズ系ピンク。

　現状、ppBlogでは、テーマ1つにつき、テーマディレクトリ１つが対応しているのですが、テーマの情報を保存しているowner/theme.ini.phpを直接いじることで、同じテーマディレクトリを使い回すということが可能です。例えば、この新しいテーマのディレクトリ(フォルダ)名は、3colv2なのですが、その中に4種類の配色パターンを指定したCSSを入れておけば、テンプレートのtemplate.phpや画像を入れているImagesディレクトリなどは使い回しができます。具体的には、以下のようにowner/theme.ini.phpをいじると良いです(このサイトでの指定例)。

<?php $THEME_LIST = array(
'ベーシック'=>'theme/basic/basic.css',
'3pane'=>'theme/3pane/3pane.css',
'ベージュ'=>'theme/3colv2/beige.css',
'モスグリーン'=>'theme/3colv2/mossgreen.css',
'ラヴェンダー'=>'theme/3colv2/lavender.css',
'ロースピンク'=>'theme/3colv2/rosepink.css',
);?>

　共通して、3colv2というディレクトリを指定している部分がポイントです。

　とりあえず、3colv2のフォルダの中に、4種類のCSSファイルを付けた状態で添付しておきますので、お好みで好きなのを選んだり、色んな色を試して下さい。後、参考までにこのサイトのowner/theme.ini.phpも添付しておきます。

添付ファイル： theme.ini.php