在来テーマのスタイルを利用したテンプレート anchor.png

 XOOPSで配布されたテーマの中から自分好みのものを探す時に、使っているモジュールの文字色が固定のためにテーマによって文字が見えづらくなったり、背景色が固定されていてテーマの色調に合わなかったりして選択から外してしまうことは良く経験します。 そんなとき、「モジュールがテーマの色調に合うように作ってくれれば良いのに・・」 と思いますね。

 そこで、テーマに合わせて色調や文字サイズなどを完全にフィットさせる方法がいくつかある中、最新のものとして、

  • Bootstrap対応の最新のテーマ
  • Bootstrap用にカスタマイズしたモジュールテンプレート

 これらを組み合わせて作り上げて行ければベストだと思いますが、 テーマもまだ少ないですし、対応モジュールも現時点ではまだありません。
 でも諦めるのはまだ早い、以前から使われていた簡単な方法でも最低限の合わせ込みが可能なので、あらためてご紹介します。

Page Top

ニュースモジュールの表示を見てみよう anchor.png

 典型的で分かり易い例として、newsモジュールから派生したbulletinモジュールの表示を見てみましょう。

bulletin_legacy_default.jpg

 ヘッダー、本文、フッター をブロック要素であるdivでくくり、"itemHead" "itemInfo" "itemBody" "itemFoot" というクラス指定しています。
そして、その中でspanやpなどの要素でくくり、"itemTitle" "itemPoster" "itempostDate" "itemText" "itemAdminLink" "itemPermaLink" というクラス名のセレクタ指定です。

 これらスタイル要素は、XOOPS2.0系以前の古いテーマから使われてきており、最新テーマを含めてほぼ全てと言ってよいほど多くのテーマで記載されているレガシーなスタイルで、XOOPS Cube legacy 2.2同梱のlegacy_themeでもしっかりと記述されています。

 他方、HTMLを吐き出すテンプレートのほうは実際のbulletinのテンプレート群で、確認してみてください。 item.htmlの例はこちらで見れます。

Page Top
色々なテーマで表示すると anchor.png

色々なテーマで表示させて、色合いなどを確認してみましょう。 "_01bsn-04" "colorring_yourself" "trump_color4" "tw940" を選んだ時の表示例です。

bulletin_01bsn-04.jpgbulletin_colorring_yourself.jpgbulletin_trump_color4.jpgbulletin_tw940.jpg

いかがでしょう? テーマの色調にしっかり反映できているので、テーマ選択が楽しくなりますね! :-)

Page Top

応用例 anchor.png

 上の例のように、"item____"系のクラスやセレクタ要素を指定すれば、カスタムブロックなどでも従来テーマの色調にフィットさせることが可能ですし、他のモジュールでも同様に汎用性を持たせることができます。

Page Top

カスタムブロック に適用してみる anchor.png

 実践としてまずはカスタムブロックで適応させてみましょう。
 このカスタムブロックの元ネタは、Ryusのmikaさんの記事「クリスマスまであと何日?をブロックに表示する」ですが、少しいじってから、これを上記の "item____"系のクラスやセレクタ要素を指定することで、テーマによって表示が変わることを確認してみます。

 例えば、以下の内容で「php」種別のカスタムブロック「今年もお世話になりました」を作ってみると、下画像のように表示されます。

custom_original.jpg
Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
global  $xoopsUser;
if (is_object($xoopsUser)) {
    $uname =  $xoopsUser->getVar('uname');
}else{
    $uname =  'ゲスト';
}
 
/* ここに指定したい日付を入れる */
$toYear = 2013;
$toMonth = 1;
$toDay = 1;
 
$toTime1=mktime(0,0,0,$toMonth,$toDay,$toYear);
$currentTime=mktime(0,0,0,date("m"),date("d"),date("Y"));
$atoDay=($toTime1-$currentTime)/86400;
?>
 
<div style="background:#ffff99;text-align:center;padding-top:10px;padding-bottom:10px;width:100%;border:dotted 3px #00ff00;">
<div><?php echo $uname;?>さん、こんにちは!</div>
<div>今年も残すところあと <?php echo $atoDay;?> 日ですね。<br />来年もどうぞよろしく。</div>
</div>

 これに、要素をクラス指定することで、以下の画像のように他のブロックと同一デザインになってくれます。 いかがでしょうか? 簡単ですね! 凝ったデザインでなければ、大概はこの方法でテーマのデザインに合うカスタムブロックができちゃいます。

custom_with_class.jpg
Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
global  $xoopsUser;
if (is_object($xoopsUser)) {
    $uname =  $xoopsUser->getVar('uname');
}else{
    $uname =  'ゲスト';
}
 
/* ここに指定したい日付を入れる */
$toYear = 2013;
$toMonth = 1;
$toDay = 1;
 
$toTime1=mktime(0,0,0,$toMonth,$toDay,$toYear);
$currentTime=mktime(0,0,0,date("m"),date("d"),date("Y"));
$atoDay=($toTime1-$currentTime)/86400;
?>
 
<div class="item">
  <div class="itemHead">
    <span class="itemTitle"><?php echo $uname;?>さん、こんにちは!</span>
  </div>
  <div class="itemBody"><p class="itemText">今年も残すところあと <?php echo $atoDay;?> 日ですね。<br />来年もどうぞよろしく。</p></div>
</div>
Page Top

他のモジュールの例 anchor.png

Page Top
d3diary anchor.png

 日記・ブログモジュールd3diaryのテンプレートは、こうした考えを踏襲しているので多くのテーマにそのままフィットします。 以下の紹介する例では、テンプレートに一切変更を行うこと無くテーマを差し替えることで表示の変更が可能なことを確認できます。

d3diary_5dark_colors.jpgd3diary_trump_color4.jpgd3diary_ipon2.jpgd3diary_01bsn-04.jpg
Page Top
d3forum anchor.png

 もうひとつ、d3forumモジュールのオリジナル版はテーマの色調に合わせてCSSテンプレートを編集する必要があったのですが、XoopsX に同梱したd3forum(ver0.86以上)は上記の考えで手を加えていますので、これも多くのテーマでそのままフィットしてくれるはずです。

d3forum_trump_color4.jpg
Page Top

まとめ anchor.png

 今回、レガシーなテーマのスタイルを利用して、テーマデザインへの適応方法の一例をご紹介しました。 XoopsX ディストリビューションパッケージに同梱されているX-update を使うことで、最新テーマのインストールや Theme Finerを使ったレガシーテーマを簡単に導入できます。様々なテーマの着せかえ表示を簡単にできるCMS、XOOPSって楽しいですね!


トップ   凍結 差分 バックアップ 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 1249, today: 2, yesterday: 0
初版日時: 2012-12-02 (日) 07:55:00
最終更新: 2012-12-02 (日) 22:56:21 (JST) (1877d) by naao