wiki編集のすすめ

CSSをいじる

最終更新:

匿名ユーザー

- view
だれでも歓迎! 編集

wikiのデザイン

通常HPを作る場合、基本デザイン(上部にロゴがある・左に共通のメニューがある・大見出しの大きさは○pt等)は
設定が必要ですが、技術・知識がないとメモ帳と見間違う程簡素なHPになってしまいます
@wikiでは、テンプレートから基本デザインを選択することで、見栄えのするwikiにすることが出来ます

基本デザインは、管理者設定の『デザインを選択する』からいつでも変更することができます
変更しても原則としてwikiは現状を維持しますので季節や編集時期・停滞時期でデザインを替えるようなことも可能です

CSSカスタマイズ

一方で、通常HPではデザインの自由度はほぼ無限大にあるのに対して
@wikiの基本デザインだけでは表現が無難なものに限定されてしまいます

そこで、より詳細にwiki内のデザインを自分好みに設定する方法がCSSの埋め込みなのです

管理者はCSS(スタイルシート)を設定して、wikiのデザインをカスタマイズすることが出来ます
管理者設定の『デザインを選択する』の一つ下の項目の『CSSカスタマイズ』でその機能を利用することが出来ます

CSSについてはこのような小さなページ一つに収める事ができるような内容量ではなく
また、外部サイトでわかり易いHPが多数存在している為、CSS説明は本wiki内では割愛します

※CSSをいじりすぎると、他のwikiにソースをコピペした時見栄えが大きく異る場合があるので注意


本wikiで設定してあるCSSのみ載せておきます
大見出し 中見出し 小見出し に影があるようにみせているのが特徴です

  1. h1{
  2. margin: 5px 0;
  3. font-size:167%;
  4. font-weight:bold;
  5. color:#333;
  6. }
  7.  
  8. h2{
  9. background:#FFFFFF;
  10. border-bottom:3px solid #888;
  11. border-right:2px solid #333;
  12.  
  13. margin: 13px 5px;
  14. padding:0px;
  15.  
  16. font-size:170%;
  17. font-weight:nomal;
  18. color:#333;
  19. }
  20.  
  21. h3{
  22. background:#FFFFFF;
  23. border-top:0px solid #FFF;
  24. border-bottom:2px solid #DFDFDF;
  25. border-left:0px solid #FFF;
  26. border-right:2px solid #DADADA;
  27.  
  28. margin: 10px 8px;
  29. padding-left:10px;
  30.  
  31. font-size:150%;
  32. font-weight:bold;
  33. color:#555;
  34. }
  35.  
  36. h4{
  37. background:#FFFEFE;
  38. border-top:2px solid #EEE;
  39. border-bottom:2px solid #BBB;
  40. border-left:2px solid #DDD;
  41. border-right:2px solid #CCC;
  42.  
  43. margin: 5px 1px 10px 25px;
  44. padding-left:10px;
  45.  
  46. font-size:130%;
  47. font-weight:nomal;
  48. color:#555;
  49. }
  50.  
  51. h5{
  52. margin: 13px 0;
  53. font-size:114%;
  54. font-weight:bold;
  55. }
  56.  
  57. h6{
  58. margin: 13px 0;
  59. font-size:100%;
  60. font-weight:bold;
  61. }
  62.  
  63. pre{
  64. background:#FFF;
  65. border:1px dotted #FF8C00;
  66. padding:8px;
  67. margin: 1px 5px;
  68. color:#A50;
  69. }
  70.  


タグ:

+ タグ編集
  • タグ:
記事メニュー
ウィキ募集バナー