@Wikiを始めるために
CSSカスタマイズ
最終更新：
ibaraki-it
-
view
スタイルシート(CSS)を編集
前述のテンプレートの利用では、＠Wikiが用意してくれているスタイルを適用して、見栄えを大幅に変更しました。
更に細やかなスタイル設定をしたい場合には、CSSの知識を活用して、よりきめ細やかな見栄えの変更が出来ます。CSSの知識をお持ちの方は、是非チャレンジしてみてください。
逆に、全くCSSを学習したことが無い方は、下準備を整えてから臨まれることをお薦めします。
まずは、ログインし、＠Wikiメニューにある「設定」ボタンから「管理画面」に入ります。
管理画面から「CSSカスタマイズ」を選択
管理画面に移動しましたら、まずは「CSSカスタマイズ」をクリックします。
基本デザインのCSSをクリック
次いで、ページ上段の方にある、「基本デザインのCSS」をクリックします。
すると、現在適用されている「基本デザイン」のCSSが全て表示されます。
現在のCSS情報をコピー
ここにあるCSS情報を(表示外にあるものもスクロールして)全て選択し、コピーします。
ユーザー定義CSS欄にペースト
ページを戻して、ユーザー定義CSSの欄に、コピーしてきたCSS情報をペースト(貼りつけ)します。
この際、「基本デザインのCSSを無効化する」にチェックを入れておいてください。
変更を保存
以上の手順が間違いなく完了したことを確認し、最下段にある「変更」をクリックして、変更を保存します。
以上で、Wikiが自動的に挿入していたCSSは読み込まれなくなり、「ユーザー定義のCSS」が適用されるようになりました。
あとは、CSSの知識を活用して、ユーザー定義CSSの内容を書き換えていけば、より自由なデザインを適用できます。
カスタマイズの事例
当解説サイトでは、h1要素(冒頭の「＠Wikiを始めるために」をマークアップしている)に対して適用されていた「color」プロパティを「black」に変更して，チョッと渋くしています。
また、右段組みに表示されるメニュー・リストも、「li a」セレクタに対して、「color:white;display:block；」を施し、プロックレベル要素でホバーさせて、ホバー時に「color」と「border-color」を青くなるよう，変更しています。
少々敷居の高いCSSではありますが、英単語アレルギーさえ無い方でしたら、ちょっとのルールを覚えるだけで、すぐに使えるようになります。機会を見て是非チャレンジしてみて下さい。
