コミュニティセントラル
登録
((untranslated))
(+TR)
(他の1人の利用者による、間の1版が非表示)
7行目: 7行目:
 
=== テーマデザイナーを使おう! ===
 
=== テーマデザイナーを使おう! ===
 
[[ファイル:Theme designer.png|thumb|300px|実行中のテーマデザイナー]]
 
[[ファイル:Theme designer.png|thumb|300px|実行中のテーマデザイナー]]
サイトに対して随時行われるレイアウトの調整を生かしながらWikiのカスタマイズを行う最も簡単な方法は、FANDOMのテーマデザイナー機能を使うことです。
+
サイトに対して随時行われるレイアウトの調整を生かしながらWikiのカスタマイズを行う最も簡単な方法は、Fandomのテーマデザイナー機能を使うことです。
   
 
* テーマデザイナーは、Wikiのロゴ、色、背景の変更を手っ取り早く簡単に行えるようにしたものです。
 
* テーマデザイナーは、Wikiのロゴ、色、背景の変更を手っ取り早く簡単に行えるようにしたものです。
27行目: 27行目:
 
Wikiのデザインを変更するにあたって、アイコンやアニメーション、カラフルな色使いでいっぱいにしたくなることがあるかもしれません。しかし、そのようなデザインは、Wikiを訪れる人に良くない印象を与えることがあります。
 
Wikiのデザインを変更するにあたって、アイコンやアニメーション、カラフルな色使いでいっぱいにしたくなることがあるかもしれません。しかし、そのようなデザインは、Wikiを訪れる人に良くない印象を与えることがあります。
   
また、FANDOMでは流動的な横幅を採用していることを忘れないでください - あなたの画面と、異なるサイズの画面を使用している他の人とでは、同じ内容でも異なって表示される場合があります。たとえば、幅を指定するとき、絶対値ではなくパーセントで指定すると、コンテンツ同士に大きな隙間ができたり重なりができたりする可能性を減らせます。
+
また、Fandomでは流動的な横幅を採用していることを忘れないでください - あなたの画面と、異なるサイズの画面を使用している他の人とでは、同じ内容でも異なって表示される場合があります。たとえば、幅を指定するとき、絶対値ではなくパーセントで指定すると、コンテンツ同士に大きな隙間ができたり重なりができたりする可能性を減らせます。
   
 
=== 読みやすいコードを書く ===
 
=== 読みやすいコードを書く ===
37行目: 37行目:
   
 
== 関連情報 ==
 
== 関連情報 ==
* [[ヘルプ:カスタマイゼーション・ポリシー]] - 認められているカスタマゼーションに関するFANDOMのポリシー
+
* [[ヘルプ:カスタマイゼーション・ポリシー]] - 認められているカスタマゼーションに関するFandomのポリシー
 
* [[ヘルプ:色覚多様性に対応したWiki]]
 
* [[ヘルプ:色覚多様性に対応したWiki]]
 
* [[ヘルプ:コントラスト]]
 
* [[ヘルプ:コントラスト]]
44行目: 44行目:
 
* [https://html-color-codes.info/ HTML Color Codes]
 
* [https://html-color-codes.info/ HTML Color Codes]
 
* [http://jigsaw.w3.org/css-validator/ The W3C CSS Validation Service] - [[ヘルプ:コミュニティのCSSとJavaScript|特別:CSS]]に似た、コードのエラーの確認に有用なものです
 
* [http://jigsaw.w3.org/css-validator/ The W3C CSS Validation Service] - [[ヘルプ:コミュニティのCSSとJavaScript|特別:CSS]]に似た、コードのエラーの確認に有用なものです
* [[w:c:dev:Bootstrap|FANDOM Open Source Library のBootstrap拡張機能]] - FANDOMで[https://getbootstrap.com/ Bootstrap]を利用する
+
* [[w:c:dev:Bootstrap|Fandom Open Source Library のBootstrap拡張機能]] - Fandomで[https://getbootstrap.com/ Bootstrap]を利用する
   
 
== その他のヘルプとフィードバック ==
 
== その他のヘルプとフィードバック ==
60行目: 60行目:
 
[[pt:Ajuda:Melhores práticas de CSS]]
 
[[pt:Ajuda:Melhores práticas de CSS]]
 
[[ru:Справка:Советы по использованию CSS]]
 
[[ru:Справка:Советы по использованию CSS]]
  +
[[tr:Yardım:En iyi CSS uygulamaları]]
 
[[uk:Довідка:Поради щодо використання CSS]]
 
[[uk:Довідка:Поради щодо використання CSS]]
 
[[vi:Trợ giúp:Thực hành CSS tốt nhất]]
 
[[vi:Trợ giúp:Thực hành CSS tốt nhất]]
 
[[zh:Help:CSS 最佳實踐]]
 
[[zh:Help:CSS 最佳實踐]]
 
 
[[カテゴリ:ヘルプ]]
 
[[カテゴリ:ヘルプ]]
 
[[カテゴリ:CSS]]
 
[[カテゴリ:CSS]]

2019年12月29日 (日) 03:35時点における版

ヘルプ
このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
原文 : w:help:CSS best practices

このヘルプは、CSSを使用してWikiのカスタマイズを行いたい方向けのガイドラインです。

ガイドライン

テーマデザイナーを使おう!

Theme designer

実行中のテーマデザイナー

サイトに対して随時行われるレイアウトの調整を生かしながらWikiのカスタマイズを行う最も簡単な方法は、Fandomのテーマデザイナー機能を使うことです。

調和のとれない色やどぎつい色を避ける

これは、コンテンツが表示される領域で特に気をつけてください。

  • すべての人の視力や色覚が、あなたと同じというわけではなく、低視力であったり色覚異常であったりする人は少なくありません。
  • デバイス画面が異なればその振る舞いも異なります - あなたが使用しているデバイスで見た色が、他の人のデバイスでは異なって表示されることもあります。

とはいえ、どのようなテーマにすればよいのかを判断するのは簡単ではありません。そのような場合は、以下の基準にそってテーマを調整してみましょう。

  • 文字と背景との間のコントラストが良くなるようにする - たとえば、明るい背景に暗い文字といった組み合わせです。
  • 背景画像を設定するのは良いことですが、画像の上に表示される文字が読めなくなっていないかにご注意ください。テーマデザイナーでは、画面全体に背景を表示させたい方向けに、透過率を簡単に変更できる機能があります。
  • 画面に表示されるものはあまり小さくしすぎないようにし、主要なテキストが表示される領域については特にご注意ください。

デザインをシンプルに保つ

Wikiのデザインを変更するにあたって、アイコンやアニメーション、カラフルな色使いでいっぱいにしたくなることがあるかもしれません。しかし、そのようなデザインは、Wikiを訪れる人に良くない印象を与えることがあります。

また、Fandomでは流動的な横幅を採用していることを忘れないでください - あなたの画面と、異なるサイズの画面を使用している他の人とでは、同じ内容でも異なって表示される場合があります。たとえば、幅を指定するとき、絶対値ではなくパーセントで指定すると、コンテンツ同士に大きな隙間ができたり重なりができたりする可能性を減らせます。

読みやすいコードを書く

あなた1人だけがWikiをカスタマイズするわけではないことを忘れないでください。コードを書く際は、他の人もそのコードを読んで理解できるようにすることを心がけましょう。

さらに、そのコードが何をするものなのか、コードを見ただけでは容易にはわからないところには、コメントを追加しましょう。コメントの追加は、文章を /* と */ で囲むことで行えます。例:

/* これはコメントです */

関連情報

その他のヘルプとフィードバック