Ploneのスキンをカスタマイズしていこうじゃないか

デザイン力があって自分なりのスキンが作れる人はそれでいいじゃないか。
でも世の中そんな簡単に作れる人ばっかりじゃない。
ということでどこかステキなサイトを真似っこしてみようというのが今回のミッション。

さてじゃあ早速どこの真似っこをしようかということを考えるわけだけど、どこのサイトでも簡単に真似っこできるわけじゃない。どこでもいいっちゃぁいいんだけど、どのサイトの真似っこもできちゃうような人は、真似っこするよりも自分のセンスが光るオリジナルスキンを作ればよろしいではないか。そうじゃない人である私としては、やっぱりなるべく労力が少なくてすむようなサイトを選びたいところ。

じゃあそういう労力が少なくてすむサイトというのは何だろうか。

一番大きなポイントは「Ploneと構造が似ている」ということだ。Ploneにはポータルとして必要なパーツがそろっている。ロゴ、サーチボックス、タブ、ログインフォーム、ポートレット…などなど。ということは真似っこするサイトとしてこれらのパーツがそろっているようなポータル的なサイトを選べば「Page Templateをあんまりいじらずにすむ」というメリットが出てくる。もちろん少しくらいはいじる必要性も出てくるとは思うけれど、tal考えたりするのはめんどくさいので、そういうことはできる限り避けていきたいところです。あと段組みも気にしたいところ。ポートレットはたくさんあるので、２段組だとサイドバーが長すぎちゃわないかな、と。やっぱり３段組を基本に考えたい。で、３段組となると、固定幅は厳禁。２バイト文字・３段組・固定幅はちょっとありえない。２バイト文字で３段組ならリキッドにしないと狭くてよみにくーい。

というようなことを考えて、テキトーにネットを眺めた結果、今回のターゲットはSpread Firefoxに決定どす。Drupalベースですな。

作業に入る前に私なりのカスタマイズの心構えをば。

100%クローンを作る必要はない。

クローンを作るのが最終目的じゃないんだから無理して100%を目指すこともないだろう。

 別にPlone風味が残ってたってかまわない。

大切なのは真似っこするサイトの雰囲気とPloneを「イイ感じに」ミックスさせることだと思う。そこそこ「テキトー」にやるのがいいですな。

といっておけばできあがったスキンがへぼくても言い訳できるというステキな考え方。

と、言い訳したところで実際の作業に移ることにする。

まずは画像の準備

使われている画像は少ないので用意するものも少な目、いいですな。画像が必要なのは、ほぼ上部ヘッダー（Ploneでいえばportal-top）の部分だけ。

ボディ上部の背景画像

微妙にグラデがかかってます

ヘッダ部分の背景画像

藍色のグラデ

ヘッダメニューの背景画像

青色のグラデ ホバー時の濃い色 

ロゴ

これは自分で作らないと。こんな感じでどうでしょう。

実際には角丸が多用されてますが、めんどくさいので無視の方向で（テキトーが重要）。

続いてカラーのまとめ

基本タグ関連

• ボディ：背景色ffffff、文字色000000
• リンク：文字色00339A、ホバー333333

portal-top関連

• トップ背景色：105D90
• タブ：背景色127fb9、文字色ffffff
• サーチボタン：背景色105D90、文字色ffffff、ボーダー上左色9097A2、右下色283043
• サーチインプット：背景はPloneのグラデをそのまま使おう、ボーダー色9097A2

左ポートレット関連

• ポートレットヘッダー：文字色1D9101、下ボーダー色CDD5D5
• ポートレットログイン：背景色EDF2F2、ボーダー色CDD5D5
• ログインボタン：文字色00339A
  

右ポートレット関連

• ポートレット：背景色CDF2AE
• ポートレットヘッダー：文字色1D9101（ボールド）
  

抜け落ちてるのもあるだろうけど、まぁこんなもんでいいや。メモ帳とかにメモっておいて、CSSいじるときにファイルを開いておくと便利。

いよいよ作業に入る（テンプレートのカスタマイズ）

画像と色がそろったところで実際に作業を始めます。まずはテンプレートを整理しておきましょう。ここではアクセシビリティなどは優先順位を下げて、とにかくいらないものはばっさり切り落としてゆくことにします。特にいじってゆくのはヘッダ・フッタに限定し、カラムの部分はいじらずにとっておくことにします。

SpreadFirefoxのサイトを参考にしながら、portal-topというdivの中にportal-logo, portal-searchbox, portal-globalnavという３つのパーツが入っている構造にしてやります。↓こんな感じ。

      <div id="portal-top" i18n:domain="plone">

           <a metal:use-macro="here/global_logo/macros/portal_logo">
             The portal logo, linked to the portal root
           </a>

           <div metal:use-macro="here/global_searchbox/macros/quick_search">
             The quicksearch box, normally placed at the top right
           </div>

           <div metal:use-macro="here/global_sections/macros/portal_tabs">
             The global sections tabs. (Welcome, News etc)
           </div>

      </div>

あとはフッタ部のportal-colophonもテンプレートから削除しておきます。

これでテンプレートのカスタマイズは終了。あとはしこしこCSSです。

portal-topのカスタマイズ

さっそくCSSをいじっていきますが、その前にCSSレジストリ（portal_css）に登録されている、public.css、portlets.css、columns.cssをオフにしておきます。カスタマイズする部分はすべてploneCustom.cssに記述していくことにします。

とりあえずは基本タグのbodyとaについてちゃちゃっと処理しておきます。SpreadFirefoxではbodyに上下10px、左右20pxくらいのpaddingが設定され、かつ背景画像としてグレーのグラデがありますので、

body{
　/* #visual-portal-wrapperに設定してもいい*/
  padding: 10px 20px;
  background: #fff url("bg-body.gif") top left repeat-x;
  color: #000;
}

aについてはカラーの設定。

a{  color: #00339A;}
a:hover{  color: #333;}

続いてhiddenなものを設定しておきます。基本的にhiddenなものたちはhiddenStructure, netscape4というクラスがつけられていますので、

.hiddenStructure, .netscape4{  display: none;}

としておきます。

前準備はこのくらいにしておいて、まずはSpreadFirefoxのヘッダ部を確認してみます。

portal-topは、高さ80pxくらい・背景色が105D90だけど背景画像として藍色のグラデを設定。さらにサーチボックス、タブを絶対配置するためにposition: relative;を設定。

#portal-top{
  position: relative;
  height: 81px; /* ホントは80pxなんだけど、この後portal-logoでボーダーを1px設定するため81pxにしておく */
  background: #105D90 url("bg-top.gif") top left repeat-x;
} 

portal-logoの領域は左にfloatさせ、高さをめいっぱい使う。またロゴの地が白いのでこれを補う意味で左と下にボーダーを設定する。

#portal-logo{
  float: left;
  height: 80px;
  border: 1px solid #105D90;
  border-width: 0 0 1px 1px;
}

ロゴそのものの設定に入る。ロゴはportal-logo aにタグ付けされているので、常套手段だけどaをブロック要素にして、テキストは左にふっとばし（この手法も最近は古くなってきて、z-index使う方に流れて行ってますかな）、背景画像としてロゴを表示。縦と横はロゴの大きさにあわせることにしよう。

#portal-logo a{
  display: block;
  width: 320px;
  height: 80px;
  background: #105D90 url("logo.gif") top left no-repeat;
  text-indent: -7777px;
}

続いてサーチボックス。サーチボックスはportal-topに対して右上の位置に絶対配置することにしよう。マージンを少しとっておいた方がいいかな。

#portal-searchbox{
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 10px;
  margin-right: 10px;
}

先ほど見たように、サーチボタンには背景色と文字色、ボーダーを設定しておく。

#portal-searchbox .searchButton{
  background-color: #105D90;
  color: #fff;
  border-top: 1px solid #9097A2;
  border-right: 1px solid #283043;
  border-bottom: 1px solid #283043;
  border-left: 1px solid #9097A2;
}

portal-topの最後を飾るportal-globalnavは、portal-topに対して右下に絶対配置する（少し右マージンをとっておく）。

#portal-globalnav{
  position: absolute;
  right: 0;
  bottom: 0;
  margin-right: 10px;
  list-style: none;
  list-style-type: none;
} 

タブを横一列に並べるためにfloatさせる。タブの本体はaタグで囲まれているためこれをブロック要素化し、マージン、パディングを設定、背景画像は青色のグラデで、テキストは中央揃え、デコレーションなし、ボールドで。

#portal-globalnav li{
  margin: 0;
  padding: 0;
  float: left;
}
#portal-globalnav li a{
  display: block;
  float: left;
  height: 23px;
  margin-right: 1px;
  padding-right: 10px;
  padding-left: 10px;
  background: #105D90 url("bg-tab.gif") top left repeat-x;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}

ホバーしたときに色が変わるように、a:hoverに対して背景画像を設定しておく。

#portal-globalnav li a:hover{
  background: #105D90 url("bg-tab-hover.gif") top left repeat-x;
}

と、ここまでやると下図のようになりました。疲れたので今日はここまで。