WordPress Plugins/JSeries

Ktai Style 附属テーマの色を変更

初出日: 2009年2月27日 | 最終更新日: 2009年12月29日
投稿者: ゆりこ |

パーマリンク

Ktai Style 1.70 から附属した新テーマ3種および、新規配布したテーマ2種は、色の変更をしやすくなっています。以下で、色を変える改造法について解説します。「サイト設定とテンプレートの改造」も参照してください。

名前を決めます。テーマには他と区別できる唯一 (ユニーク) な名前を付けることが推奨されます。一般に配布するつもりならば、一般名詞そのままや登録商標を使うのは避けましょう。自分だけが使うならば、自分の名前を入れるという方法もあります (”Yuriko’s Special Theme” とか)。

ここでは、青色のテーマとして “Blue Ocean” とします (英数字、空白、日本語文字などが使えます)。ディレクトリー (フォルダー) 名は blue_ocean とします (英数小文字とアンダースコアのみ使えます)。
ベースとなるテーマを選んで複製します。ここでは Green を選択します。green フォルダーを複製して、blue_ocean という名前に変更します。サーバー上で複製して作業してもいいですが、通常は手元の端末で作業するのがよいでしょう。
style.css を編集します。「携帯表示」設定パネルに現われるテーマの名前は style.css に記述されているため、このファイルを編集しておきます。ここでは以下のようにします。Theme URI は便宜上のこのページの URI としましたが、実際には配布元ページの URI に変更してください。一般に配布しないなら行自体を削除として構いません。説明 (Description) はてけと〜に決めてください。

作者名 (Author) や作者 URI (Author URI) は、当然ながら、あなたの名前やウェブサイト URI を入れましょう。必要とするバージョン (Requires) およびライセンス (License) は、今回はいじりません。
```
/*
Theme Name: Blue Ocean
Theme URI: http://wppluginsj.sourceforge.jp/ktai_style/howto/color-change/
Description: Blue theme with wide ocean view.
Version: 1.0.0
Author: (あなたの名前)
Author URI: (あなたのウェブサイト URI)
Requires: Ktai Style 1.70, WordPress 2.3
License: GPL v2
*/
```
カラースキームの変更をします。Green, Loving, Moolith など新テーマでは、header.php テンプレートに色の設定を集約させていて、ここを変更すれば、他のテンプレートに対しても変更が有効になります。青色のテーマですから、青っぽくしてみましょう。header.php の13行目から23行目を以下のようにします。
```
<body link="blue" vlink="navy">
<?php global $ks_settings, $show_on_front, $page_for_posts;
$ks_settings = array(); // erase array for security
$ks_settings['title_style'] = 'color:white;background-color:#2211bb;';
$ks_settings['list_color'] = 'teal';
$ks_settings['date_color'] = 'green';
$ks_settings['time_color'] = 'purple';
$ks_settings['author_color'] = ks_option('ks_author_color');
$ks_settings['comment_color'] = 'gray';
$ks_settings['hr_color'] = 'aqua';
$ks_settings['h2_style'] = '';
```
- body 要素は、画面の背景色・文字色・リンク色・訪問ずみリンク色などを決めます。背景と文字色はデフォルトのまま (白と黒) とし、リンクは青色、訪問ずみリンクは藍色とします。訪問ずみリンクは、リンク色よりも目立たないくすんだ色にするのがよいでしょう。
- title_style は、index.php および menu_comments.php で投稿タイトルに使われます。Green テーマでは #22bb11 (山吹色) ですから、これを青色っぽくしてみます。16進表記は RRGGBB ですから、GG の部分と BB の部分を入れ換えれば、青色っぽくなりますね
- list_color は、index.php および menu_comments.php で罫線 (┣ など) の色を指定するものです。Green テーマは、木の枝を意味する茶色でしたが、これも青っぽくしてすることにして、HTML 基本16色の teal とします。
- date_color は Green テーマでは single.php の日付色を指定しています。これは青系統から少し外して緑にしてみます (Green テーマでは maroon)。
- time_color は Green テーマでは index.php での日時表示に使われています。こちらも、青系統から外して紫とします (Green テーマでは green)。
- author_color, comment_color はそのままにします。
- hr_color は hr 要素による罫線色です。明るめにすることとして aqua にしてみました。
- h2_style は Monolith テーマとかでは使われていますが、Green テーマでは指定していません。Blue Ocean でもそのまま未指定にします。
(注意: hr_color, h2_style を除いて、変数の使い分けはテーマによって異なります。各テーマのテンプレートファイルを見て確認してください)

その次はタイトル部分の背景色です。$Redir がセットされていないとき (外部サイト接続確認ウィンドウ以外) にタイトルを表示しています。ここは Blue Ocean という名前にふさわしい色をじっくり決めましょう。元は緑色っぽい #009933 なので、GG と BB を入れ換えた #003399 を試してみましょう。28行目の background-color を変更します。
```
$before = '<div style="color:white;background-color:#003399;margin:0;">'
```
ちょっと暗いですね。深海になってしまいました。明るくするには RR, GG, BB それぞれの数値を大きくします。#00ccff あたりでしょうか。

これだと白抜き文字が見にくくなってしまいます。タイトルを紺色にしてみましょうか。28行目を以下の通りとします。
```
$before = '<div style="color:#003399;background-color:#00ccff;margin:0;">'
```
これで視認性がアップしました。見やすい配色かどうかを厳密に検証するならば、FUJITSU ColorSelector などのツールを使ってみるのがよいでしょう。
他のテンプレートファイルの修正をします。ここまでで、かなり色が変わりますが、他のテンプレートファイルで色および絵文字を指定している部分をいじります。Green テーマの場合、comments.php, footer.php, index.php, archive.php, single.php, redir.php で個別の色指定があります。’color’ という単語で検索をかけて探してみてください。絵文字は localsrc という単語で検索すれば出てきます。
1. まず、footer.php を修正します。Green テーマのフッターは黄色になっているので、これを青っぽくします。手抜きして aqua でもいいですが、もうちょっと工夫して #99ccff とします。29行目を以下のように編集します。
```
<div id="footer" style="background-color:#99ccff;">
```
  今回は大丈夫ですが、背景を暗い色、文字色やリンク色を明るい色にした場合、スマートフォン等で見たときの「PC表示にする」のメニューがこのフッター部分に表示されるため、リンク色を変更する必要があるかもしれません (body 要素のリンク色で明るい色を指定していれば問題なし)。37行目の ks_switch_pc_view() の引数で色を指定してください。以下は Photolog テーマの例です。
```
ks_switch_pc_view('color=#fff7a0'); ?></div>
```
2. 次は index.php の修正です。index.php で色を個別指定しているのは、本文の抜粋表示部分です。24行目が以下のようになっていますが、これはそのままとします。
```
<font color="#666666" size="-1"><?php echo ks_excerpt(80, false); ?>
</font></dt>
```
  index.php では、コメント数を示す絵文字が「若葉」になっているため、これを海っぽいものにします。5キャリアで対応する絵文字があるものとして「荒波」(EZweb では 810 番) がよいでしょうか。22行目を以下のようにします。
```
ks_comments_link('<img localsrc="810" alt="" />'); ?><br />
```
  各キャリア共通で使える絵文字がどれであるかのドキュメントは、Ktai Style の附属ドキュメントにはありません。一番絵文字が少ないのはドコモなので、ドコモの絵文字 (Ktai Style では d??? という番号指定) を選んでおけばたいていは問題ありません (iモード対応絵文字について)。ただし、他社にない絵文字も一部あります (霧、iモード、iアプリ、Soon, End, ドア、リサイクルなど)
  
  なお、顔を表わす絵文字は、各社の対応付けが微妙なので、テーマではあまり使わないほうが賢明です。
3. 続いて archive.php を修正します。まず、index.php と同様に若葉の絵文字を荒波に変更しておきましょう (21行目)。そして、8行目の ks_pagenum() でページ番号の色指定を olive から #6666cc に変更します。blue とか purple でもいいんですが、違う色にしてみました。
```
ks_pagenum('<div style="color:#6666cc;text-align:center;"><h2>', '</h2></div>');
```
4. そして single.php の修正です。single.php で色を個別指定しているのは、コメント一覧・コメント表示のときのタイトル表示の場合です (30行目)。ここもデフォルトのままで問題ないのでそのままとします。
```
echo '<div style="' . $ks_settings['title_style'] . '"><h2>' .
sprintf(__('Comments for <a href="%1$s"><span style="%2$s">%3$s</span></a>',
'ktai_style'), get_permalink(),'color:#eeeeee', get_the_title()) . '</h2></div>'
```
  single.php でも絵文字を使用していて、コメント数を表す絵文字は index.php と同じく荒波に変更します。16行目を以下のように編集します。
```
'<img localsrc="810" alt="" />', 
```
  カテゴリー、タグを示す絵文字も、Green テーマではそれぞれ「太陽」「虫眼鏡」となっていますが、海っぽくないため、「台風」「ボート」としてみましょう (EZweb 絵文字の番号については au 技術情報の絵文字を参照)。12-13 行目を次のようにします。
```
<div><img localsrc="190" alt="" /><font size="-1"><?php
echo __('Categories') . ':';ks_category(); ?></font><br /><?php
ks_tags('<img localsrc="169" alt="" /><font size="-1">' .
__('Tags') . ':', '</font><br />');
```
5. さらに comments.php を修正します。comments.php で色を個別指定しているのは、モデレート中の表示、コメント投稿エラーのメッセージ、(コメントとトランクバックを分離しているときの) タイプ表示です。背景が白のままなので、モデレート中の表示、コメント投稿エラーのメッセージは red のままでいいでしょう。背景を黒っぽくしているときは、yellow や fuchsia などに変更した方がよいです。
  
  タイプ表示は lime となっているので、これは aqua に変えましょう。59行目を以下の通りにします。
```
echo '<div style="color:black;background-color:aqua;font-size:smaller;"><h3>' .
$label[$type] . '</h3></div>';
```
  これにより、以下のような表示となります (single.php での色指定もここで反映されています)。
6. 最後は redir.php の修正です。redir.php で色を個別指定しているのは、17行目、携帯サイトを検出したときに URL のホスト部が違うときの警告です。これは red のままでいいのでそのままとします。
```
<br /><font color="red"><?php
_e('The host is diffrent from the origial. Make sure the valid mobile site.',
'ktai_style'); ?></font>
```
色と絵文字の指定が完了すれば、言語リソースの修正を行います。テーマ独自で日本語文字列を使いたい場合は、テーマフォルダーにある ja.po を編集する必要があります。今回はそのままとします。本当は、言語リソースのドメイン指定文字列を変更する必要がありますが、面倒なので、’green’ のままとしておきます。

もし変更する場合は、functions.php において load_theme_textdomain() するときのドメイン指定、他のテンプレートファイルにおいて __(), _e(), _c() 関数などで言語リソースを使うときのドメイン指定それぞれを、独自の文字列に変更します。通常はテーマのディレクトリー名と同じにするのがよいでしょう (今回なら ‘blue_ocean’)。なお、リソースのドメイン指定は、他のテーマ・プラグインと衝突しないことが求められます。安易な名前にしないようにしてください。(Green テーマの ‘green’ はその意味ではダメなので、今後変更するかも)
今後はアイコンを作成します。”Blue Ocean” なのに蝶のアイコンは変ですよね。魚とか船とかそれっぽいアイコンに変更しましょう。今回は、Illustrator を使って、貝殻アイコンを作ってみます。Illustrator を持ってない人は、著作権フリーの画像集からよさげなアイコンを拾うなり、デジカメで撮影した画像を加工するなりしてみてください。
(Ktai Style 附属テーマの画像も、Illustorator 附属のシンボルライブラリをそのまま使っただけだったりします)
1. 新規ドキュメントの作成。アイコンサイズである 48×48 ピクセルを指定して新規ドキュメントを作成します。カラーモードは RGB にします。
2. 背景を塗り潰します。背景色は header.php で決めた #00ccff ですから、これと同じ色で背景を塗り潰します。48×48ピクセルの四角形を作ってアートワーク全面に配置します。
3. シンボルライブラリから貝殻を選んで配置します (CS2 では「自然」に入っています)。そのままではアートワークより大きいですから、適宜縮小します。
4. ファイルメニューから Web 用に保存を選びます。「画像サイズ」タブで「アートワークサイズでクリップ」をチェックし、画像形式は GIF、透明部分ありとしておきます。ファイル名は icon.gif とします。
これで修正・作成が完了しました。表示を確認してみましょう。新しいテーマをサーバーに転送して実機で確認してもいいですし、Firefox に FireMobileSimulator を入れてそれで閲覧するもの手軽でよいです。ここでは、FireMobileSimulator のインストール方法などについては割愛します。