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