コンテンツメニュー

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

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

              左メインカラム、右サイドカラムの表示を入れ替える

              テーマbasic5では、左側に主たる記事の内容を大きく表示し、右側にメニューやリストなどを表示するためのサイドカラムを表示する、いわゆる2カラム構成となっています。

              これは、「コンテンツファースト」という考え方が一般的となった今日では良く用いられる手法で、ブログなどでも多く採用されているものです。メニューなどより、そのページ本来の記事が先に目に入った方が良いということもありますが、Googleなどのロボットがサーチする際にも、その方が良い結果を呼ぶというSEO的な考えに基づいているとも言われます。

              もっとも、ロボットの場合はブラウザに表示された見た目でサーチしている訳ではなく、HTMLの構造的に先に出現する情報に重きを置くというものらしいので、テーマ内部の書き方次第でなんとでもなるという面もありますが・・・

              少し横道にそれましたが、このテーマbasic5では、実は左右カラムの入替も簡単にできる構造となっています。

              CSSを見てみましょう。79行目以降の.left-colと.sidebar部分に注目です。

              left-colのfloat: left; を float: right; に sidebarのfloat: right; を float: left; に書き替えてみましょう。

              ほら、一瞬で左右が入れ替わりました。

              テーマの改造って、思うより簡単でしょう?

              • テーマ作成は面白い
                はじめに まず最初に、この記事では特別な表記が必要な場合を除いて、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)  
              • basic5 の表示変更(表示ロジックの説明)
                basic5 の表示変更(表示ロジックの説明) 実は、basic5は少し表示ロジックが凝っておりまして、中央中央ブロックの並び順を0(ゼロ)にすると、それだけが幅一杯に表示されると…続きを読む (2011-11-18)  
              • 表示幅を変更してみる
                表示幅を変更してみる テーマbasic5は、Responsive Web Design(レスポンシブ・ウェブ・デザイン)といって、閲覧者の画面幅(ブラウザ表示幅)によって、表示する…続きを読む (2011-11-18)  
              •   »  左メインカラム、右サイドカラムの表示を入れ替える(2011-11-18)

              新しくコメントをつける

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