コンテンツメニュー

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

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

              もう少し、見た目を変更してみる。(背景の変更、文字色の変更)

              背景や文字の色もCSSにより、簡単に変更することが出来ます。

              CSSの中のbackgroundという部分が背景色、colorというのが文字色に関する記述です。

              詳しくは、CSSに関するサイトや本を参照していただくとして・・・ここでは、超現実的にサクッと書き替えてみることしましょう。

              では、まずは全体の背景色。21行目のbodyのbackgroundを書き替えることで変更できます。

              「でも、よく見たら #F9F9F9 なんて書いてあって、良くわかんない???」

              確かに。HTMLやCSSに精通していないと、文字列だけを見ても全然判りませんね。そんな時は、Google先生に聞いてみましょう。「html 色」で検索すると沢山ヒットします。

              その中から、次のサイトを参考にさせていただきますね。(筆者もよく参考にしています。)
              色の名前とHTMLタグが一目で分かるWEB色見本 http://www.colordic.org/

              この中から、背景色にしたい色を探しましょう。

              で、今回は、tan #d2b48c を選んでみます。

              CSSの21行目、bodyの
              background: #F9F9F9;
              となっている箇所を
              background: #d2b48c;
              と書き替えて保存してみましょう。おっと、末尾のセミコロンを忘れずに。そして、ブラウザで確認。

              どうですか? イメージどおりになりましたでしょうか?

              とりあえず、簡単に変更できますよね。

              余談ですが、当然ながら背景に画像を使うことも可能です。
              background: #d2b48c;
              という記述を
              background:url(images/paper02.jpg);
              という記述に変えてみます。

              もちろん、imagesフォルダにはpaper02.jpgというファイルをコピーしておきます。(ここでは、筆者の手持ちのファイルを利用してみました。)

              はい。出来上がりです。どうでしょうか?



              えっ? 1カラム表示だからわかりにくいって?
              もう、しょうがないですねぇ・・・ では、次のページを見てくださいな。

              • テーマ作成は面白い
                はじめに まず最初に、この記事では特別な表記が必要な場合を除いて、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)  
              •   »  もう少し、見た目を変更してみる。(背景の変更、文字色の変更)(2011-11-18)

              新しくコメントをつける

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