コンテンツメニュー

XoopsCubeLegacy を使いましょ~♪
    インストールしよう~♪
      ディストリビューション pack2011(XoopsX)
        ディストリビューションpack2011をインストールしよう!
        pack2011にアップグレードしよう!
        XCLのデザイン変更
        デザイナーの為のXOOPSマニュアル
          プロWEB制作者向けXOOPS基礎実習
          今日からあなたもテーマ職人
          basic5を3カラム対応に改造する
          ローカル環境
            WARP
            テーマ
              Colors2x
              Colors3x

              プロWEB制作者向けXOOPS基礎実習

              Section5-デザインコンシャスな商用サイトを作る
              (実践編-4:ディテールにこだわる)

              この章では、その他XOOPS上でサイトを作成する上での様々な方法論を紹介します。

              noneモジュールを有効に使う

              サイト作成上、とても重宝するモジュールのひとつにnoneモジュールがあります。これは言うならば「からっぽ」のモジュールです。XOOPSにはモジュールとして認識されますが、実態は空っぽの白ページが表示されるだけです。

              実 はここが味噌でして、このモジュールにカスタムブロックを配置して、あたかも静的コンテンツのように見せることができるのです。HTMLやCSSを駆使で きるのであれば、もっと積極的な使い方ができます。page.phpにhtmlで書くことによって、単独のHTMLページとして使用することができるので す。

              しかもこのモジュールは、他と重ならない名前にすれば自由にディレクトリ名が付けられますし(中のファイルを多少修正する必要がありますが、非常に簡単です)、名前を変えればいくつでもインストールすることができます。

              実 際数ページの静的コンテンツしかないようなサイトであれば、XOOPSとnoneモジュールだけでサイトが出来上がってしまいます。ページの数だけモ ジュールをインストールする必要がありますが、その考え方が既存のHTMLサイトと近く、直接ファイルにHTMLを記述するなど、デザイナーにとっては もっとも「理解しやすい」モジュールといえます。

              hoda Design Studyでは「Shop」「Company」そしてブログの扉ページに使用しています。

              まとまった静的コンテンツはTinyDを使用

              noneはひとつのモジュールで単ページしか作ることができませんが、TinyDを使えば一つのモジュールで何十ページも作成することができます。

              特 にひとつの主メニューにたくさんのサブページがぶら下がるような構造の時に最適です。hoda Design Studyでは「Products」で使用しています。サブページを作ればそのページタイトルが自動的にメインメニュー内のサブメニュー名に反映されるの で、非常に安楽に大量ページを作成することができます。

              ページの作成には2通りあり、ひとつは管理画面からデータベースに情報を埋め込む方法、もうひとつはページラップと呼ばれるHTMLファイルを読み込ませる方法です。プロ・デザイナーにはこちらのページラップの方がお勧めでしょう。

              考え方としては、フレームページと同じです。XOOPSのコンテンツが読み込まれる部分にインラインフレームがあり、そこに別に作成したHTMLファイルが 読み込まれるという認識で良いと思います。ページラップの方法も、使用サーバによっていくつか選択ができますが、ラップの仕方によってはモジュール内のコ ンテンツディレクトリにHTMLファイルを放り込むだけで、自動的にページを認識してくれるという動的システムのメリットを最大限生かした素晴らしいモ ジュールです。そしてまた、ページラップはデータベースに多くを依存しないので、表示が速いという副次的なメリットがあります。

              このモジュールも複数インストールできますし、ディレクトリ名も一定のルールを満たせば自由に付けることができます。

              Flashメニューを使用する

              これはロールオーバーを使用するような画像メニューでも同じ事ですが、XOOPSは一度モジュールを組み込んで、仮組みをしてしまえば各ページのアドレスが決まってしまいます。例えば各モジュールのトップページは「http://hogehoge.com/modules/モジュールディレクトリ名/ 」になります。TinyDも最初に空のHTMLファイルで仮組みしてしまえば各ページのURLは「http://hogehoge.com/modules/tinydのディレクトリ名/content/index.php?id=数字 」と決まってしまいます。

              ですので、Flashメニューなど、あとで動的に変更できないような仕組みを利用する場合は、直接このURLを指定して作成しtheme.html内に埋め込んでしまえば言い訳です。これはロールオーバー画像ボタンでも一緒です。

              ただし、この場合はあとでモジュールを追加するような場合は再度メニューを作りなおさねばならないリスクがあります。XOOPS側で自動的に作成してくれる「テキストメニュー」で行くか、デザイン性を取っ「画像メニュー」で行くかはデザイナー次第です。

              ページごとに異なるヘッダ画像を使いたい。

              プラン1:

              theme.htmlはヘッダレスで作り、カスタムブロックをヘッダの代わりとする。(難度:易)

              ※ただし、モジュールの無い登録画面やアカウント編集などではヘッダが無くなる。その回避法はSec.3に書いてあります。

              プラン2:

              theme.html内にif文やxoops_dirname等を利用して直接書く。(難度:やや難)<br />

              <img src="/img/<{$xoops_dirname}>.jpg" />にして各画像はdirname名で保存するとか・・・。
              プラン3:

              いっそのことsuin氏のテーマチェンジャー・モジュールを使用して、モジュールごとに別テーマを割り当ててしまう。(難度:中)

              ※アメジスト・ブルー(http://www.suin.jp/ )にて配布。。

              • はじめに - INDEX
                副題:プロWEB制作者向けXOOPS基礎実習 この一連のドキュメントは、ホダ塾のサイトに掲載されていたものを転載したものです。   2011年12月末をもっ…続きを読む (2011-11-13)  
              • Sec.1 - 基礎知識編
                Section1:作業開始前に知っておくべき事(基礎知識編) このセクションでは、XOOPSの基本的な構造の解説を中心に、XOOPSを始めて取り扱う事になったWEB…続きを読む (2011-11-13)  
              • Sec.2 - 下準備
                Section2-デザインコンシャスな商用サイトを作る(実践編-1:下準備) この章では、実際のサイト制作を通してXOOPSのカスタマイズ法を理解していただきたいと…続きを読む (2011-11-13)  
              • Sec.3 - テーマセットの作成
                Section3:デザインコンシャスな商用サイトを作る (実践編-2:テーマセットの作成) さていよいよ作成に入ります。実際に使用するモジュールを組み込み済…続きを読む (2011-11-13)  
              • Sec.4 - テンプレートの編集
                Section4:デザインコンシャスな商用サイトを作る (実践編-3:テンプレートの編集) テーマセットを変えれば、XOOPSのデザインは一新されます。しか…続きを読む (2011-11-13)  
              •   »  Sec.5 - ディテールにこだわる (2011-11-13)

              新しくコメントをつける

              題名
              ゲスト名
              投稿本文
              より詳細なコメント入力フォームへ