コンテンツメニュー

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

              今日からあなたもテーマ職人

              表示幅を変更してみる

              テーマbasic5は、Responsive Web Design(レスポンシブ・ウェブ・デザイン)といって、閲覧者の画面幅(ブラウザ表示幅)によって、表示する幅を可変する新しいタイプのデザインを採用しています。

                画面幅 1400px       800px      740px     480pxより小さい場合

              詳しいことはまた別の機会(いや、他の詳しいサイト?)に譲るとして、Responsive Web Designとは、現代の大画面パソコンで見る場合や古くて小さな画面のパソコンだけでなく、iPhoneやiPadなどの携帯端末など、あらゆる端末で見ても適切な表示が出来るように考えられているデザインを言います。

              上の図を見るとおわかりいただけると思いますが、破綻のないデザインになっているのではないでしょうか?(特に480pxより小さい場合には、文字の大きさなども小さくなるようにしています。)

              ところが、もっと大きい画面、例えば横1600pxなどの大画面の場合は、次のような表示になってしまいます。

              これでも見にくいことはありませんが、大きい画面に広く情報を表示したい場合は、少し物足りない気がすることも否めません。(正直、このあたりについては、コンテンツの内容によって広げた方が良いものやそうでないものがあることも事実です。あと、趣味の問題とかもありますので、一概には言えませんが。)

              そんな場合でも、簡単に変更が可能です。

              再び、CSSファイルの登場です。

              33行目の #wrapper に注目!
              #wrapper { position:relative; margin: 5px auto; max-width: 980px; width: 90%; background: #fff; padding: 0 5px 10px; }

              この部分が、真ん中の表示部分全体を包んでいるボックスなのですが、max-width: 980px; というのが、最大幅表示の設定です。そう、この記述を変えると表示幅変更ができます。
              max-width: 980px;

              max-width: 1280px;
              に変えてみましょう。はい、広がりましたね。

              おっと、先ほど採用したヘッダーの画像の横幅が小さいので、ちょっと合わないですが・・・それはちょっとおいといて
              この場合は、別途、合うサイズの画像を用意してくださいね。

              えっ? まだ、広がりが足りない?
              では、max-widthの記述を削除してみましょう。 最大幅表示設定が消えるので・・・多分、一杯に広がるかな?

              っと、微妙な広がり方ですね。

              これは、width: 90%;という部分が効いています。全体幅の90%で表示してね!という記述です。 では、これをwidth: 100%; にすると・・・実は、paddingの設定などとぶつかって余りよろしくないので、width: 98%; にしてみましょう。

              ほとんど、画面一杯にまで広がりましたね。これだと、全く別物のテーマのように見えます。

              まだ上下左右に少し余白が残っていますが、もちろんこれを無くすことも可能です。でも、paddingなどの余白設定を生かすようにするには、幅は98%で押さえておいた方が無難です。

              もし、この状態で画面一杯感を出すなら、背景を表示しない設定にするのがお奨めです。

              こんな感じになりました。

              ヘッダ画像をやめて、背景も同じ白色を採用してみました。これなら、普通のリキッドデザインとして使えると思います。

              • テーマ作成は面白い
                はじめに まず最初に、この記事では特別な表記が必要な場合を除いて、XoopsCubeLegacy2.2 のことをXOOPSと略して説明することにします。   …続きを読む (2011-11-18)  
              • テーマの作り方
                テーマの作り方 テーマの作り方については、XUGJのCustomizeManualページを始めとして、結構、色々なサイトで掲載されていますので、まずはそちらを参考にされると良いでしょう。 …続きを読む (2011-11-18)  
              • テーマ作成前に用意するもの
                テーマ作成前に用意するもの テーマ作成するには、次のような環境とツールが必要です。 1 ローカル環境 2 UTF-8に対応したテキストエディタまたはWebオーサリングツール …続きを読む (2011-11-18)  
              • 3分でできるテーマ改造
                3分でできるテーマ改造 ここでは、ローカル環境としてWARP、そしてpack2011に同封のテーマ basic5を利用することにします。(「 どこでもXOOPS 」を使った場合でも、ディレクト…続きを読む (2011-11-18)  
              • もう少し、見た目を変更してみる。(背景の変更、文字色の変更)
                もう少し、見た目を変更してみる。(背景の変更、文字色の変更) 背景や文字の色もCSSにより、簡単に変更することが出来ます。 CSSの中のbackgroundという部分が…続きを読む (2011-11-18)  

              新しくコメントをつける

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