3: 2012-12-02 (日) 12:44:21 なーお   |
現: - no date - |
| - | ** レガシーテーマのスタイルを利用したモジュールテンプレート [#wbfcbb2b] | |
| | | | |
| - | XOOPSで気に行ったテーマを探す時に、使っているモジュールが固定の文字色指定のためにテーマによって文字が見えづらくなったりすることは良く経験します。 「テーマの色調に合わせて変わってくれれば良いのに・・」 と思いますね。 | |
| - | | |
| - | テーマに合わせて色調や文字サイズなどを完全にフィットさせるには、 | |
| - | - Bootstrap対応の最新のテーマ | |
| - | - Bootstrap用にカスタマイズしたモジュールテンプレート | |
| - | | |
| - | これらを組み合わせればベストだと思いますが、 テーマもまだ少ないですし、対応モジュールも現時点ではまだありません。 | |
| - | でも諦めるのはまだ早い、もう少し簡単な方法でそれに近いことが可能なので、あらためてご紹介します。 | |
| - | | |
| - | *** ニュースモジュールの表示を見てみよう [#e67259ed] | |
| - | 典型的で分かり易い例で、newsモジュールから派生したbulletinモジュールの表示を見てみましょう。 | |
| - | &ref(bulletin_legacy_default.jpg,mw:480,mh:360); | |
| - | ヘッダー、本文、フッター をブロック要素であるdivでくくり、"itemHead" "itemInfo" "itemBody" "itemFoot" というクラス指定しています。 | |
| - | そして、その中でspanやpなどの要素でくくり、"itemTitle" "itemPoster" "itempostDate" "itemText" "itemAdminLink" "itemPermaLink" というセレクタ指定です。 | |
| - | これらクラス・セレクタ名は、XOOPS2.0系以前の古いテーマから使われてきており、ほぼ全てのテーマでスタイル指定されているレガシーなクラス群で、最新のlegacy_themeでもしっかりと記述されています。 | |
| - | - https://github.com/XoopsX/legacy/blob/CorePack/html/themes/legacy_default/item.css | |
| - | | |
| - | 実際の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" です。 | |
| - | &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____"系のクラスやセレクタ要素を指定すれば、カスタムブロックなどでも従来テーマの色調にフィットさせることが可能ですし、他のモジュールでも同様に汎用性を持たせることができます。 | |
| - | 以下、d3diaryとd3forumの例をご紹介します。 | |
| - | | |
| - | *** d3diaryの例 [#dbaf7fe8] | |
| - | &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); | |
| - | | |
| - | [[inc]] | |
下位
ページへ戻る
リンク元
