「ページのデザイン変更」の編集履歴(バックアップ)一覧はこちら
「ページのデザイン変更」(2009/06/20 (土) 18:17:19) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
**イントロ
ウィキのデザインを変更するには、用意された「基本デザイン」を選択することで、簡単に変更することができます。
その上で、その一部を変更したいという場合があります。この場合は多少、HTMLやCSSの知識が必要になります。
**手順
***基本デザインの変更
-ログインして、ウィキメニューの「設定」をクリック(→「wiki管理画面」へ)。
-「wiki管理画面」左段組の「デザイン設定」欄の「デザインを選択する」をクリック(→「基本デザインの選択」へ)。
#html2(){<div style="text-align:center;"><a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_select.JPG" title="クリックで拡大画像" target="_blank"><img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_select.jpg" style="margin:auto;"></a></div>
}
-「基本デザインの選択」画面の中から、好きなものを選んで、該当するラジオボタンをクリック。
#html2(){<div style="text-align:center;"><a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_select02.JPG" title="クリックで拡大画像" target="_blank"><img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_select02.jpg" style="margin:auto;">
</a></div>
}
-画面を下にスクロールさせて、「変更」をクリック。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_select03.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_select03.jpg" style="margin:auto;">
</a>
</div>}}
-自動的に元の画面に戻り、「変更しました」とでれば、基本デザインの変更に成功です。
#html2(){
<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_select04.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_select04.jpg" style="margin:auto;">
</a>
</div>
}
***デザインの一部変更
****下準備
-ログインして、ウィキメニューの「設定」をクリック(→「wiki管理画面」へ)。
-「wiki管理画面」左段組の「デザイン設定」欄の「CSSカスタマイズ」をクリック(→「CSSカスタマイズ画面」へ)。
-CSSカスタマイズ画面、右段組にある「現在のデザインのCSS]をクリック。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom01.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom01.jpg" style="margin:auto;">
</a>
</div>}}
-すると「基本デザインの選択」で選んだデザインの実体であるCSSがすべて表示されます。これをブラウザメニューの「編集」-「すべて選択」します(反転表示になる)。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom02.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom02.jpg" style="margin:auto;">
</a>
</div>}}
-反転表示されたCSSソース上で右クリックして、「コピー」。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom03.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom03.jpg" style="margin:auto;">
</a>
</div>}}
-CSSカスタマイズ画面に戻り、「ユーザー定義CSS」の入力欄にカーソルを合わせて、右クリック「貼り付け」します。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom04.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom04.jpg" style="margin:auto;">
</a>
</div>}}
-同じ画面の「基本デザインのCSSを無効化する」にチェックを入れます。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom05.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom05.jpg" style="margin:auto;">
</a>
</div>}}
-同じ画面を下にスクロールさせて、「変更」をクリックします。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom06.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom06.jpg" style="margin:auto;">
</a>
</div>}}
ここまでで、「基本デザイン」のCSSを「ユーザー定義CSS」にそっくり引越しし、「基本デザイン」がWikiの表示に影響を与えることはなくなりました。
****ユーザー定義CSSを一部変更する
ここからは、HTMLとCSSの基礎知識が必要となります。WikiのCSSカスタマイズに必要となる、最低限の知識は、別ページ、[[HTML・CSSについて]]に記載しておきましたので、ご参照ください。
----
**イントロ
ウィキのデザインを変更するには、用意された「基本デザイン」を選択することで、簡単に変更することができます。
その上で、その一部を変更したいという場合があります。この場合は多少、HTMLやCSSの知識が必要になります。
**手順
***基本デザインの変更
-ログインして、ウィキメニューの「設定」をクリック(→「wiki管理画面」へ)。
-「wiki管理画面」左段組の「デザイン設定」欄の「デザインを選択する」をクリック(→「基本デザインの選択」へ)。
#html2(){<div style="text-align:center;"><a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_select.JPG" title="クリックで拡大画像" target="_blank"><img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_select.jpg" style="margin:auto;"></a></div>
}
-「基本デザインの選択」画面の中から、好きなものを選んで、該当するラジオボタンをクリック。
#html2(){<div style="text-align:center;"><a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_select02.JPG" title="クリックで拡大画像" target="_blank"><img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_select02.jpg" style="margin:auto;">
</a></div>
}
-画面を下にスクロールさせて、「変更」をクリック。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_select03.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_select03.jpg" style="margin:auto;">
</a>
</div>}}
-自動的に元の画面に戻り、「変更しました」とでれば、基本デザインの変更に成功です。
#html2(){
<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_select04.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_select04.jpg" style="margin:auto;">
</a>
</div>
}
***デザインの一部変更
****下準備
-ログインして、ウィキメニューの「設定」をクリック(→「wiki管理画面」へ)。
-「wiki管理画面」左段組の「デザイン設定」欄の「CSSカスタマイズ」をクリック(→「CSSカスタマイズ画面」へ)。
-CSSカスタマイズ画面、右段組にある「現在のデザインのCSS]をクリック。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom01.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom01.jpg" style="margin:auto;">
</a>
</div>}}
-すると「基本デザインの選択」で選んだデザインの実体であるCSSがすべて表示されます。これをブラウザメニューの「編集」-「すべて選択」します(反転表示になる)。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom02.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom02.jpg" style="margin:auto;">
</a>
</div>}}
-反転表示されたCSSソース上で右クリックして、「コピー」。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom03.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom03.jpg" style="margin:auto;">
</a>
</div>}}
-CSSカスタマイズ画面に戻り、「ユーザー定義CSS」の入力欄にカーソルを合わせて、右クリック「貼り付け」します。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom04.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom04.jpg" style="margin:auto;">
</a>
</div>}}
-同じ画面の「基本デザインのCSSを無効化する」にチェックを入れます。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom05.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom05.jpg" style="margin:auto;">
</a>
</div>}}
-同じ画面を下にスクロールさせて、「変更」をクリックします。
#html2(){{<div style="text-align:center;">
<a href="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/css_custom06.JPG" title="クリックで拡大画像" target="_blank">
<img src="http://www19.atwiki.jp/wiki-kouza1/pub/css_edit/sum/sum_css_custom06.jpg" style="margin:auto;">
</a>
</div>}}
ここまでで、「基本デザイン」のCSSを「ユーザー定義CSS」にそっくり引越しし、「基本デザイン」がWikiの表示に影響を与えることはなくなりました。
****ユーザー定義CSSを一部変更する
ここからは、HTMLとCSSの基礎知識が必要となります。WikiのCSSカスタマイズに必要となる、最低限の知識は、別ページ、[[HTML・CSSについて]]に記載しておきましたので、ご参照ください。
----
表示オプション
横に並べて表示:
変化行の前後のみ表示: