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

category-icon

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

 主な特徴を挙げると、

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

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

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

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

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

beige
ベージュ系のシックなやつ。
mossgreen
柔らかなグリーン系。
lavender
ラヴェンダー~うす青色系。
rosepink
ローズ系ピンク。

 現状、ppBlogでは、テーマ1つにつき、テーマディレクトリ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.phpattachedIcon  3colv2.zipattachedIcon 

— posted by martin at 08:01 pm   commentComment [0]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0031 sec.
prev
2009.6
next
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30