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をファイルに保存して、それを読み込む方法です。方法１で作成したＣＳＳスクリプトのCSS部分だけを保存します。 先頭と最後の行（#beforescript{{ と }} ）は保存しません。
同様なCSSを他のサイトでも使用したい場合には、この方法が良いです。
- CSSをファイルに保存します。以下の例ではmycss.css ファイルに保存。
- このファイルをSWFUでアップロードします。
- フッターの編集画面で、以下を記述します。
#beforescript{{ <link rel="stylesheet" href="/swfu/d/mycss.css" /> }}