※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

スタイルシート(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ではありますが、英単語アレルギーさえ無い方でしたら、ちょっとのルールを覚えるだけで、すぐに使えるようになります。機会を見て是非チャレンジしてみて下さい。


|新しいページ|検索|ページ一覧|RSS|@ウィキご利用ガイド | 管理者にお問合せ
|ログイン|