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

初出日: 2009年2月27日 | 最終更新日: 2009年12月29日
投稿者: ゆりこ | パーマリンク

[ Ktai Style | 改版履歴 | サイト設定とテンプレートの改造 | ウェブログ管理機能 | よくある質問と答え | 手順集 | テーマ集]

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

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

    ここでは、青色のテーマとして “Blue Ocean” とします (英数字、空白、日本語文字などが使えます)。ディレクトリー (フォルダー) 名は blue_ocean とします (英数小文字とアンダースコアのみ使えます)。

  2. ベースとなるテーマを選んで複製します。ここでは Green を選択します。green フォルダーを複製して、blue_ocean という名前に変更します。サーバー上で複製して作業してもいいですが、通常は手元の端末で作業するのがよいでしょう。

  3. 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
    */
  4. カラースキームの変更をします。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;">'

    blue_ocean-003399.png
    ちょっと暗いですね。深海になってしまいました。明るくするには RR, GG, BB それぞれの数値を大きくします。#00ccff あたりでしょうか。

    blue_ocean-00ccff_white.png
    これだと白抜き文字が見にくくなってしまいます。タイトルを紺色にしてみましょうか。28行目を以下の通りとします。

    $before = '<div style="color:#003399;background-color:#00ccff;margin:0;">'

    blue_ocean-00ccff-navy.png
    これで視認性がアップしました。見やすい配色かどうかを厳密に検証するならば、FUJITSU ColorSelector などのツールを使ってみるのがよいでしょう。

  5. 他のテンプレートファイルの修正をします。ここまでで、かなり色が変わりますが、他のテンプレートファイルで色および絵文字を指定している部分をいじります。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;">

      blue_ocean-footer.png

      今回は大丈夫ですが、背景を暗い色、文字色やリンク色を明るい色にした場合、スマートフォン等で見たときの「PC表示にする」のメニューがこのフッター部分に表示されるため、リンク色を変更する必要があるかもしれません (body 要素のリンク色で明るい色を指定していれば問題なし)。37行目の ks_switch_pc_view() の引数で色を指定してください。以下は Photolog テーマの例です。

      ks_switch_pc_view('color=#fff7a0'); ?></div>

      photolog-footer.png

    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>');

      blue_ocean-pagenum.png

    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 />');

      blue_ocean-single_icons.png

    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 での色指定もここで反映されています)。
      blue_ocean-c_type.png

    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>
  6. 色と絵文字の指定が完了すれば、言語リソースの修正を行います。テーマ独自で日本語文字列を使いたい場合は、テーマフォルダーにある ja.po を編集する必要があります。今回はそのままとします。本当は、言語リソースのドメイン指定文字列を変更する必要がありますが、面倒なので、’green’ のままとしておきます。

    もし変更する場合は、functions.php において load_theme_textdomain() するときのドメイン指定、他のテンプレートファイルにおいて __(), _e(), _c() 関数などで言語リソースを使うときのドメイン指定それぞれを、独自の文字列に変更します。通常はテーマのディレクトリー名と同じにするのがよいでしょう (今回なら ‘blue_ocean’)。なお、リソースのドメイン指定は、他のテーマ・プラグインと衝突しないことが求められます。安易な名前にしないようにしてください。(Green テーマの ‘green’ はその意味ではダメなので、今後変更するかも)

  7. 今後はアイコンを作成します。”Blue Ocean” なのに蝶のアイコンは変ですよね。魚とか船とかそれっぽいアイコンに変更しましょう。今回は、Illustrator を使って、貝殻アイコンを作ってみます。Illustrator を持ってない人は、著作権フリーの画像集からよさげなアイコンを拾うなり、デジカメで撮影した画像を加工するなりしてみてください。
    (Ktai Style 附属テーマの画像も、Illustorator 附属のシンボルライブラリをそのまま使っただけだったりします)

    1. blue_ocean-icon_new.png
      新規ドキュメントの作成。アイコンサイズである 48×48 ピクセルを指定して新規ドキュメントを作成します。カラーモードは RGB にします。


    2. blue_ocean-icon_box.png
      背景を塗り潰します。背景色は header.php で決めた #00ccff ですから、これと同じ色で背景を塗り潰します。48×48ピクセルの四角形を作ってアートワーク全面に配置します。


    3. blue_ocean-icon_locate.png
      シンボルライブラリから貝殻を選んで配置します (CS2 では「自然」に入っています)。そのままではアートワークより大きいですから、適宜縮小します。


    4. blue_ocean-icon_web.png
      ファイルメニューから Web 用に保存を選びます。「画像サイズ」タブで「アートワークサイズでクリップ」をチェックし、画像形式は GIF、透明部分ありとしておきます。ファイル名は icon.gif とします。


  8. これで修正・作成が完了しました。表示を確認してみましょう。新しいテーマをサーバーに転送して実機で確認してもいいですし、Firefox に FireMobileSimulator を入れてそれで閲覧するもの手軽でよいです。ここでは、FireMobileSimulator のインストール方法などについては割愛します。
    Blue Ocea テーマ完成画面

いかがでしょうか。以上の作業は、30-90分ぐらいあればできると思います。色の調整は時間がかかりますが、創造的な作業です。試行錯誤する時間を楽しんでみましょう。

完成したテーマファイルを参考までにダウンロードできるようにしておきます。Green テーマとの差分を比較してみてください。
Blue Ocean テーマ: blue_ocean110.zip (14.0KB)