CSSの改造方法

改造の前に
当サイトは、haik_seedのテーマから、テーマカラーとしてオレンジを選択しています。サンプルのCSSソース内に .haik-palette-orange が出てきたら、自分で選択しているテーマカラーに置き換えてください。

テーマカラーCSSクラス名
■水色.haik-palette-cyan
■青.haik-palette-blue
■赤.haik-palette-red
■オレンジ.haik-palette-orange
■茶色.haik-palette-brown
■緑.haik-palette-green

CSSの改造方法にはいくつか方法がありますが、haikのCSSファイル (main.css) はQHMのときと比較して、膨大なサイズとなり直接の修正はやめた方が良いと思います。
以下の2通りを考えましたが、通常は方法1で十分だと思います。

方法1) CSSファイルは修正しないで、フッターの編集画面にCSSを設定する

以下のように、#beforescript プラグインを使用してその中にCSSの定義を行います。この方法は、その場で簡単にCSSの改造結果が確認できるため便利です。
以下のようにCSSを記述して、それをフッター内に書き込みます。フッターに入れると全ページに適用されるので便利です。
特定のページだけに適用したい場合は、そのページの編集画面に以下のスクリプトを書き込んでください。

#beforescript{{
<style type="text/css">
<!--
 (ここにCSSを記述)
-->
</style>
}}

方法2) 方法1で作成したCSSを新たなCSSファイルとして作成しそれを読み込む

方法1では、作成したCSSをフッター内に記述しますが、方法2はそのCSSをファイルに保存して、それを読み込む方法です。方法1で作成したCSSスクリプトのCSS部分だけを保存します。 先頭と最後の行(#beforescript{{ と }} )は保存しません。
同様なCSSを他のサイトでも使用したい場合には、この方法が良いです。

  1. CSSをファイルに保存します。以下の例ではmycss.css ファイルに保存。
  2. このファイルをSWFUでアップロードします。
  3. フッターの編集画面で、以下を記述します。
    #beforescript{{
    <link rel="stylesheet" href="/swfu/d/mycss.css" />
    }}

ご意見箱

皆様のご意見をお待ちします。


当ページは役に立ちましたか?

選択肢 投票
とても役に立った 1  
少しだけ 1  
あんまり 0