QHMの新世代のホームページ作成ソフト|簡単と安心で初心者に高評価、比較して見て下さい。

CSSスタイルシートを修正するポイント|QHMユーザーの為のカスタマイズ

CSSスタイルシートを修正するポイント

  デザインのカスタマイズするポイント!

デザインのカスタマイズに当たって、「CSS」の定義を反映させる方法は、
大きく分けて2つあります。

  1. 直接「CSS」スタイルシートを修正する方法
  2. 「QHM」の編集画面で、「CSS」を記述して、定義する方法

スタイルシートを定義することで、様々なデザインの変更ができます。
この2つの方法から、ご自身に合った形で、修正する事になります。




直接「CSS」スタイルシートを修正する方法

サーバー上から、以下のフォルダにある「main.css」を修正します。
「skin」~「hokukenstyle」~「デザイン名」~「main.css」

  • 「main.css」:ほとんどのスタイルを定義しています。
  • 「main_print.css」:印刷用のスタイルを定義してあります。

修正するには、UTF8の文字コードに対応したエディタとFTP転送用のソフトが必要です。
ここからダウンロードできます・・・・・・アプリケーションソフト

「main_print.css」のデフォルトは、メニュー部分を除いたデザインとなっています。

メニュー部分を含んで、印刷をさせたいときには、「main.css」をコピーして、
「main_print.css」に貼り付けると、メニュー部分を含んで、印刷出来るようになります。


※修正する際は、予期せぬ事を考慮して、必ずバックアップしてからの作業にして下さい。

「main.css」ファイルを修正する場合

1.FTPソフトを立ち上げる
まだ、お持ちでない場合は、こちらから ダウンロードして下さい。

2.「skin」~「hokukenstyle」と、次々にフォルダを開く
この「hokukenstyle」の中に、デザインが入っております。

3.設定変更をするデザインを開く
例えば、「g_green06」を開きます。

4.「g_green06」の中にある「main.css」をダウンロードする
ドラッグ&ドロップで、デスクトップにダウンロード

5.エディタソフトで立ち上げる
まだ、お持ちでない場合は、こちらから ダウンロードして下さい。

6.修正が終われば、ドラッグ&ドロップで、元の場所にアップロードして完了です。

※FTPはCSSの編集が終わるまで、終了させないでください。
※変更する前に「main.css」は、バックアップしておいてください。





「CSSファイル」を、いじらないでスタイルシートを変更!

「main.css」のスタイルシートを修正することで、様々なデザインの変更を行えますが、
他のデザインに替える際は、再度「main.css」の修正を余儀無くされますし、

アップデートの際は、「main.css」バックアップしてから、アップデートして、
再度「main.css」を元に戻すなど、少々面倒な作業が必要です。

QHMでは、
「おまじない」を記述した際、ソースを解析して「HTML」を出力します。
その他にも、「HTML」や「CSS」などを直接記述することも可能です。

ですので、
「ページの編集画面」「ナビ2の編集画面」或は、「サイト情報の設定」からの「その他のタグ」に
コードを記述することで、手間無くスタイルシートを変更することが可能です。


「ナビ2」

「#beforescriptプラグイン」を使用して、「ナビ2」に記述することで、全ページに反映されます。

  • 「ナビ2」の編集画面に記述!
    #beforescript{{
    <style type="text/css">
    <!--
    (ここにCSSを記述)
    -->
    </style>
    }}

「各ページ」

「#beforescriptプラグイン」を使用して、「ページ」に記述することで、そのページのみ反映されます。

  • 「各ページ」の編集画面に記述!
    #beforescript{{
    <style type="text/css">
    <!--
    (ここにCSSを記述)
    -->
    </style>
    }}

「その他のタグ」

「#beforescriptプラグイン」を除いて、「その他のタグ」に記述することで、全ページに反映されます。

  • 「設定」~「サイト情報の設定」の中にある「その他のタグ」に記述!
    <style type="text/css">
    <!--
    (ここにCSSを記述)
    -->
    </style>



「おまじない」を書いて「CSS」の定義を呼び込む方法

全ページに反映したくは無いけど、複数のページに「CSS」の定義を呼び込むのに役立ちます。

新規ページを作成して、そこに「CSS」の定義を記述して、後は、呼び込みたいページに
「おまじない」を使って、反映させる方法です。

  1. 新規ページを作成
    ページ名は、任意の名前で問題ありません。
    解かりやすいページ名にします。
    ページに、「NOINDEX:」と入力する事で、検索エンジンがクロール出来ない様に設定できます。

  2. 新規ページに「CSS」の定義したコードを記述する。
    #beforescript{{
    <style type="text/css">
    <!--
    (ここにCSSを記述)
    -->
    </style>
    }}
  3. 「CSS」を呼び込みたいページに「おまじない」を書く
    以下の「おまじない」のページ名は、コードを記述した新規ページ名が原則
    #include(ページ名,notitle)

「#include(ページ名,notitle)」は、サイト内の別ページを読み込むプラグインとなり
この「おまじない」書くことで、そのページのみ、指定した定義を反映させます。




注意事項

コードを、記述する際
コードの上にでも、「//」名前を付けておく事で、後から見ても何の修正かを、解かる様にしておく事が良いでしょう。



当サイトでは
様々な、デザイン変更を紹介しておりますが、
誤ったコードを記述すると、画面が崩れたり、真っ白な状態になる場合もあります。

まったく表示されなくなったりすることも考えられます。
必ず全体のバックアップをしてから、お試しすることをお奨めします。




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

選択肢 投票
大変役に立った 6  
多少役に立った 0  
解かりづらかった 0  
まったく必要ない 0  




自動スパムコメントの回避の為、認証コードの4桁の数字を記入して下さい。




a:3369 t:1 y:0

powered by HAIK 7.1.0
based on PukiWiki 1.4.7 License is GPL. HAIK

最新の更新 RSS  Valid XHTML 1.0 Transitional