タグ別アーカイブ: customize

AkismetでPerl掲示板CGIのスパム対策を-準備編

I love SPAM™商標:©SPAM™ 素材:Wikimedia Commons

AkismetWordPress 専用かと思っていましたが、Protect Yourself from Parasite Spam with Akismet ≪ Weblog Tools CollectionMovable TypeDrupalPHP.NET など、20以上のアプリケーションシステムやプラットフォームでも使えることを知りました。その中には Perl 用のモジュールもあり、実際に掲示板 CGI に組み込むまでのステップを何回かに分けて解説してみたいと思います。
続きを読む

白系テーマ "iNove" の黒系カスタマイズ

pyrmont-v2という黒系のテーマで始めたブログですが、正月休みを使って「inove」の黒化にチャレンジしてみました。スタイルシートと画像の修正がメインですが、ポイントをまとめておきます。

1. 文字色、背景色などの修正

例えばWordPressテーマの公式サポートページで背景色がstyle.cssのどこで定義されているかが質問されているように、inoveのスタイルシートはボリュームが多いため探すのが結構大変だったりします。こんなときFireFoxのプラグインFirebugがお勧めです。ブラウザ上の調べたい要素上にカーソルを合わせ右クリックメニューから「要素を調査」を選択すると、HTMLコードとスタイル定義がブラウザ下部のコンソールに表示されます。

Firebugの画面

Firebugのコンソール画面

「HTML」タブでタグにカーソルを合わせればブラウザ上にmargin(黄色)やpadding(紫)の幅が可視化され、「スタイル」タブではセレクタや属性の継承関係、定義ファイル名や何行目で定義されているか等が一発で分かります。また直接スタイル定義を修正し即反映することが出来るので、見た目のカスタマイズには必携です。ただし、修正したスタイルシートをファイルとして保存する機能はありませんので注意が必要です(サーバーサイドのPHPプログラムと連携しサーバーへアップロードするFireFileというプラグインもありますが、バックアップをよく考えないと危険な気がします)。

さて、背景と文字色の配色自体をどうするかも結構悩ましいものだと思いますが、私は富士通が無償で公開している「ColorSelector」というソフトを利用しました。特にアクセシビリティーにこだわりがあるわけではないのですが、背景と文字のコントラスト差を小さくかつ見易くしたかったので参考にはなりました。

2. メニュー画像の修正

メニュー用画像

メニュー用画像

絵心もデザインセンスもゼロの私にとって一番時間がかかり、なお今も気に入らない部分です。オリジナルのように直線的にかつ黒でクールに区切りたかったのですが、結局今のデザインしか出来ていません。6本の帯状の画像となっていますが、上から通常時用、マウスが載った時(hover)用、クリック時用となっており、下半分はHome専用です。1つ1つを画像ファイルとして用意するより、1つの画像ファイルから表示を開始する位置をスタイルシートで制御する方が、HTTPリクエスト数と画像データ転送量が減るので効率的です。今やWebサイトを作るときの常識的なテクニックなのかもしれませんが、感心してしまいました。

3. アイコン画像の作成

テーマに同梱されているアイコンは白い背景を前提とした(=白でマット処理された)透過gif画像です。これをそのまま黒い背景の上に表示すると、同梱されている画像 のように周囲の白い部分が目立ってしまうので、これを消すために改めて黒系でマット処理を行います。私の場合、スキャナーを買ったときに付いてきたphotoshop element 2.0 を使っていますが、フォトショ系であれば「ファイル」→「Web用に保存」で「マット」に背景色である黒を指定して保存すればマット処理した画像 の様に、黒い背景と馴染んだ画像が得られます。

マット色の指定

マット色の指定

これを行うにはマット処理前のきれいなアイコン画像が必要になりますが、inoveで使われているアイコン画像はMr.Mark Jamesがfamfamfam.comSilk icons Version 1.3として公開しているものです。このアイコン集は実に1000個ものアイコンが同梱されているのですが、その1つ1つがシンプルかつ非常に美しいと思います。このような画像を「Go download the Silk icon set. They’re free, so you have no excuse not to.」と言うのだから太っ腹ですよネ。(正確にはCreative Commons Attribution 2.5/3.0 Licenseを守ることが要求されています。作者の著作権はきちんと守った上でのリンクウェアという理解で良いと思います。)

アイコン画像の作成

アイコン画像の作成

ちなみにinoveのアイコン画像は、先のメニュー画像と同様16×576ピクセルの縦長にアイコンが並んだ画像となっているため、黒マット用に作成し直すにはPhotoshopなどのレイヤー機能を使って位置を合わせこみながら張り込んでいく作業となります。

さて、これ以外にも必要かつフリーで使える画像を公開しているサイトへのリンクをリストアップしておきます。

4. 角丸ボックス画像の作成

角丸ボックス用画像の例

角丸ボックス用画像の例

inoveでは何箇所かに画像を使った角丸ボックスが使われていますが、先のアイコンなどと同様、ボックスの上辺と下辺を1つのファイルに収めています。右の例で、灰と白の市松模様部分が透過で各角の部分が背景と同色でマスクされる部分となります。この方式は必然的に横の辺の長さが固定のボックスとなりますので、背景色と全体のレイアウト/サイズが決まった後で作らないと何度も作り直す羽目になります。

5. その他のTips

  • スタイルシートの切り替え

スタイルシートの修正中は元のスタイルがどうだったか確認したくなりますので、スタイルシートを差し替えられるようにファイル名を変えておくのが良いでしょう。私はgoogleで「stylesheet alternate javascript change OR switch」をキーワードに検索するとトップに出て来た「Alternative Style: Working With Alternate Style Sheets」のstyleswitcher.js(かなり下の方にダウンロードリンクがあります)を使ってサイドバーの右上に切り替えのリンクを張りました。このスクリプトはページを移動してもクッキーを使ってどのスタイルシートを使うかをちゃんとトラッキングしてくれます。ただし、クッキーの有効期限が365日とスクリプト内にハードコートされているので用途に合わせて書き換えたほうが良いでしょう。