0: - no date -  |
現: 2026-08-13 (木) 08:56:06 なーお |
| | + | ** 在来テーマのスタイルを利用したテンプレート [#wbfcbb2b] |
| | | | |
| | + | XOOPSで配布されたテーマの中から自分好みのものを探す時に、使っているモジュールの文字色が固定のためにテーマによって文字が見えづらくなったり、背景色が固定されていてテーマの色調に合わなかったりして選択から外してしまうことは良く経験します。 そんなとき、「モジュールがテーマの色調に合うように作ってくれれば良いのに・・」 と思いますね。 |
| | + | |
| | + | そこで、テーマに合わせて色調や文字サイズなどを完全にフィットさせる方法がいくつかある中、最新のものとして、 |
| | + | - Bootstrap対応の最新のテーマ |
| | + | - Bootstrap用にカスタマイズしたモジュールテンプレート |
| | + | |
| | + | これらを組み合わせて作り上げて行ければベストだと思いますが、 テーマもまだ少ないですし、対応モジュールも現時点ではまだありません。 |
| | + | でも諦めるのはまだ早い、以前から使われていた簡単な方法でも最低限の合わせ込みが可能なので、あらためてご紹介します。 |
| | + | |
| | + | *** ニュースモジュールの表示を見てみよう [#e67259ed] |
| | + | 典型的で分かり易い例として、newsモジュールから派生したbulletinモジュールの表示を見てみましょう。 |
| | + | CENTER:&ref(bulletin_legacy_default.jpg,mw:480,mh:360); |
| | + | |
| | + | ヘッダー、本文、フッター をブロック要素であるdivでくくり、"itemHead" "itemInfo" "itemBody" "itemFoot" というクラス指定しています。 |
| | + | そして、その中でspanやpなどの要素でくくり、"itemTitle" "itemPoster" "itempostDate" "itemText" "itemAdminLink" "itemPermaLink" というクラス名のセレクタ指定です。 |
| | + | |
| | + | これらスタイル要素は、XOOPS2.0系以前の古いテーマから使われてきており、最新テーマを含めてほぼ全てと言ってよいほど多くのテーマで記載されているレガシーなスタイルで、XOOPS Cube legacy 2.2同梱のlegacy_themeでもしっかりと記述されています。 |
| | + | - https://github.com/XoopsX/legacy/blob/CorePack/html/themes/legacy_default/item.css |
| | + | |
| | + | 他方、HTMLを吐き出すテンプレートのほうは実際のbulletinのテンプレート群で、確認してみてください。 item.htmlの例はこちらで見れます。 |
| | + | - https://github.com/XoopsX/bulletin/blob/master/xoops_trust_path/modules/bulletin/templates/item.html |
| | + | |
| | + | **** 色々なテーマで表示すると [#cce25534] |
| | + | 色々なテーマで表示させて、色合いなどを確認してみましょう。 "_01bsn-04" "colorring_yourself" "trump_color4" "tw940" を選んだ時の表示例です。 |
| | + | CENTER:&ref(bulletin_01bsn-04.jpg,mw:200,mh:200);&ref(bulletin_colorring_yourself.jpg,mw:200,mh:200);&ref(bulletin_trump_color4.jpg,mw:200,mh:200);&ref(bulletin_tw940.jpg,mw:200,mh:200); |
| | + | |
| | + | いかがでしょう？ テーマの色調にしっかり反映できているので、テーマ選択が楽しくなりますね！ :-) |
| | + | |
| | + | ** 応用例 [#wf48bfc0] |
| | + | 上の例のように、"item____"系のクラスやセレクタ要素を指定すれば、カスタムブロックなどでも従来テーマの色調にフィットさせることが可能ですし、他のモジュールでも同様に汎用性を持たせることができます。 |
| | + | |
| | + | *** カスタムブロック に適用してみる [#gc0154e9] |
| | + | 実践としてまずはカスタムブロックで適応させてみましょう。 |
| | + | このカスタムブロックの元ネタは、Ryusのmikaさんの記事「[[クリスマスまであと何日？をブロックに表示する:http://ryus.co.jp/modules/d3blog/details.php?bid=364]]」ですが、少しいじってから、これを上記の "item____"系のクラスやセレクタ要素を指定することで、テーマによって表示が変わることを確認してみます。 |
| | + | |
| | + | 例えば、以下の内容で「php」種別のカスタムブロック「今年もお世話になりました」を作ってみると、下画像のように表示されます。 |
| | + | CENTER:&ref(custom_original.jpg); |
| | + | |
| | + | #code(html,1-){{ |
| | + | 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> |
| | + | }} |
| | + | |
| | + | これに、要素をクラス指定することで、以下の画像のように他のブロックと同一デザインになってくれます。 いかがでしょうか？ 簡単ですね！ 凝ったデザインでなければ、大概はこの方法でテーマのデザインに合うカスタムブロックができちゃいます。 |
| | + | |
| | + | CENTER:&ref(custom_with_class.jpg); |
| | + | |
| | + | #code(html,1-){{ |
| | + | 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> |
| | + | }} |
| | + | |
| | + | *** 他のモジュールの例 [#q8385dc1] |
| | + | **** d3diary [#p0cbc43b] |
| | + | 日記・ブログモジュールd3diaryのテンプレートは、こうした考えを踏襲しているので多くのテーマにそのままフィットします。 以下の紹介する例では、テンプレートに一切変更を行うこと無くテーマを差し替えることで表示の変更が可能なことを確認できます。 |
| | + | |
| | + | CENTER:&ref(d3diary_5dark_colors.jpg,mw:200,mh:200);&ref(d3diary_trump_color4.jpg,mw:200,mh:200);&ref(d3diary_ipon2.jpg,mw:200,mh:200);&ref(d3diary_01bsn-04.jpg,mw:200,mh:200); |
| | + | |
| | + | **** d3forum [#b3f53025] |
| | + | もうひとつ、d3forumモジュールのオリジナル版はテーマの色調に合わせてCSSテンプレートを編集する必要があったのですが、XoopsX に同梱したd3forum（ver0.86以上）は上記の考えで手を加えていますので、これも多くのテーマでそのままフィットしてくれるはずです。 |
| | + | |
| | + | CENTER:&ref(d3forum_trump_color4.jpg,mw:300,mh:300); |
| | + | |
| | + | ** まとめ [#lb446554] |
| | + | 今回、レガシーなテーマのスタイルを利用して、テーマデザインへの適応方法の一例をご紹介しました。 XoopsX ディストリビューションパッケージに同梱されているX-update を使うことで、最新テーマのインストールや Theme Finerを使ったレガシーテーマを簡単に導入できます。様々なテーマの着せかえ表示を簡単にできるＣＭＳ、XOOPSって楽しいですね！ |
ページへ戻る
