「CSSカスタマイズ」の編集履歴（バックアップ）一覧はこちら
「CSSカスタマイズ」(2007/09/17 (月) 19:11:23) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
**スタイルシート(CSS)を編集
前述の[[テンプレートの利用]]では、＠Wikiが用意してくれているスタイルを適用して、見栄えを大幅に変更しました。
更に細やかなスタイル設定をしたい場合には、CSSの知識を活用して、よりきめ細やかな見栄えの変更が出来ます。CSSの知識をお持ちの方は、是非チャレンジしてみてください。
逆に、全くCSSを学習したことが無い方は、下準備を整えてから臨まれることをお薦めします。
まずは、ログインし、「&color(red){設定}」ボタンから「&color(red){管理画面}」に入ります。
----
***管理画面から「CSSカスタマイズ」を選択
管理画面に移動しましたら、まずは「&color(red){CSSカスタマイズ}」をクリックします。
#image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-css-custom.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/css-custom.png,center,title=拡大画像)
----
***基本デザインのCSSをクリック
次いで、ページ上段の方にある、「&color(red){基本デザインのCSS}」をクリックします。
#image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-DesigningCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/DesigningCSS.png,center,title=拡大画像)
すると、現在適用されている「基本デザイン」のCSSが全て表示されます。
----
***現在のCSS情報をコピー
ここにあるCSS情報を(表示外にあるものもスクロールして)&color(red){全て選択}し、&color(red){コピー}します。
#image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-CopyCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/CopyCSS.png,center,title=拡大画像)
----
***ユーザー定義CSS欄にペースト
ページを戻して、&color(red){ユーザー定義CSS}の欄に、コピーしてきたCSS情報を&color(red){ペースト(貼りつけ)}します。
#image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-PastCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/PastCSS.png,center,title=拡大画像)
この際、「&color(red){基本デザインのCSSを無効化する}」にチェックを入れておいてください。
----
***変更を保存
以上の手順が間違いなく完了したことを確認し、最下段にある「&color(red){変更}」をクリックして、変更を保存します。
#image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-ChangeCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/ChangeCSS.png,center,title=拡大画像)
以上で、Wikiが自動的に挿入していたCSSは読み込まれなくなり、「ユーザー定義のCSS」が適用されるようになりました。
あとは、CSSの知識を活用して、ユーザー定義CSSの内容を書き換えていけば、より自由なデザインを適用できます。
----
***カスタマイズの事例
当解説サイトでは、h1要素(冒頭の「＠Wikiを始めるために」をマークアップしている)に対して適用されていた「color」プロパティを「black」に変更して，チョッと渋くしています。
また、右段組みに表示されるメニュー・リストも、「li a」セレクタに対して、「color:white;display:block；」を施し、プロックレベル要素でホバーさせて、ホバー時に「color」と「border-color」を青くなるよう，変更しています。
少々敷居の高いCSSではありますが、英単語アレルギーさえ無い方でしたら、ちょっとのルールを覚えるだけで、すぐに使えるようになります。機会を見て是非チャレンジしてみて下さい。
----
**スタイルシート(CSS)を編集
前述の[[テンプレートの利用]]では、＠Wikiが用意してくれているスタイルを適用して、見栄えを大幅に変更しました。
更に細やかなスタイル設定をしたい場合には、CSSの知識を活用して、よりきめ細やかな見栄えの変更が出来ます。CSSの知識をお持ちの方は、是非チャレンジしてみてください。
逆に、全くCSSを学習したことが無い方は、下準備を整えてから臨まれることをお薦めします。
まずは、ログインし、&color(blue){＠Wikiメニュー}にある「&color(red){設定}」ボタンから「&color(red){管理画面}」に入ります。
----
***管理画面から「CSSカスタマイズ」を選択
管理画面に移動しましたら、まずは「&color(red){CSSカスタマイズ}」をクリックします。
#image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-css-custom.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/css-custom.png,center,title=拡大画像)
----
***基本デザインのCSSをクリック
次いで、ページ上段の方にある、「&color(red){基本デザインのCSS}」をクリックします。
#image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-DesigningCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/DesigningCSS.png,center,title=拡大画像)
すると、現在適用されている「基本デザイン」のCSSが全て表示されます。
----
***現在のCSS情報をコピー
ここにあるCSS情報を(表示外にあるものもスクロールして)&color(red){全て選択}し、&color(red){コピー}します。
#image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-CopyCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/CopyCSS.png,center,title=拡大画像)
----
***ユーザー定義CSS欄にペースト
ページを戻して、&color(red){ユーザー定義CSS}の欄に、コピーしてきたCSS情報を&color(red){ペースト(貼りつけ)}します。
#image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-PastCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/PastCSS.png,center,title=拡大画像)
この際、「&color(red){基本デザインのCSSを無効化する}」にチェックを入れておいてください。
----
***変更を保存
以上の手順が間違いなく完了したことを確認し、最下段にある「&color(red){変更}」をクリックして、変更を保存します。
#image(http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/sum-ChangeCSS.png,http://www39.atwiki.jp/ibaraki-it/pub/CSS_Custom/ChangeCSS.png,center,title=拡大画像)
以上で、Wikiが自動的に挿入していたCSSは読み込まれなくなり、「ユーザー定義のCSS」が適用されるようになりました。
あとは、CSSの知識を活用して、ユーザー定義CSSの内容を書き換えていけば、より自由なデザインを適用できます。
----
***カスタマイズの事例
当解説サイトでは、h1要素(冒頭の「＠Wikiを始めるために」をマークアップしている)に対して適用されていた「color」プロパティを「black」に変更して，チョッと渋くしています。
また、右段組みに表示されるメニュー・リストも、「li a」セレクタに対して、「color:white;display:block；」を施し、プロックレベル要素でホバーさせて、ホバー時に「color」と「border-color」を青くなるよう，変更しています。
少々敷居の高いCSSではありますが、英単語アレルギーさえ無い方でしたら、ちょっとのルールを覚えるだけで、すぐに使えるようになります。機会を見て是非チャレンジしてみて下さい。
----
表示オプション
横に並べて表示：
変化行の前後のみ表示：
