コミュニティセントラル
ヘルプ

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

ガイドライン

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

Theme designer

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

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

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

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

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

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

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

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

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

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

読みやすいコードを書く

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

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

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

有用なリンク

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