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

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]

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0033 sec.
prev
2021.9
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