Motion cafe - Wiki バックアップ : inc/templates4_legacy

ソースを表示
inc/templates4_legacy_theme は削除されています。

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

« Prev Next »

inc/templates4_legacy_theme のバックアップ一覧
inc/templates4_legacy_theme のバックアップ差分(No. All)
- 1: 2012-12-02 (日) 07:55:00 なーお
- 2: 2012-12-02 (日) 11:42:07 なーお
  - Deleted an attach file: bulletin_legacy_default.jpg at 2012-12-02 (日) 11:25:48
- 3: 2012-12-02 (日) 12:44:21 なーお
- 4: 2012-12-02 (日) 18:08:30 なーお
- 5: 2012-12-02 (日) 21:24:06 なーお
- 現: - no date -

ぺージ情報
ぺージ名 :	inc/templates4_legacy_theme
ページ別名 :	未設定
ページ作成 :	ゲスト
閲覧可
グループ :	すべての訪問者
ユーザー :	すべての訪問者
編集可
グループ :	すべての訪問者
ユーザー :	すべての訪問者

Counter: 0, today: 0, yesterday: 0

inc/templates4_legacy_theme のバックアップ差分(No.4)

最新の10件

	E-mail パスワード次回から自動ログインする　パスワード紛失　新規登録
ホーム \| フォーラム \| ブログ \| Wiki \| 用語集 \| マイアルバム \| カレンダー \| リンク \| サイト内検索 \|

inc​/templates4_legacy_theme のバックアップ差分(No.4)

最新の10件

inc/templates4_legacy_theme のバックアップ差分(No.4)