ヘルプ:CSS

提供:ウィキボヤージュ
ナビゲーションに移動 検索に移動

註:このページを読む前に、Help:編集の仕方Help:WikivoyageにおけるHTMLHelp:利用者ぺージを読むことをお勧めします。


日本語版ウィキボヤージュをはじめとする、MediaWikiのマークアップ記法を使っているウィキでは、ほかのWebサイト同様にCSSを使うことができます。ここでは、そもそもCSSが何で、どこでどのように使用できるのかを解説します。

CSSとは[編集]

CSS(正式名称:Cascading Style Sheets)は、HTML(これは何?)で書かれた文章に色を付けたり太さを変えたりするために使われます。MediaWikiのマークアップ記法を使用しているウィキでは、CSSが適用できるようになっており(例外あり)、文字の色や太さなどの見た目を変えることができます。

MediaWiki上でのCSS[編集]

ここでは、CSSを記述する具体的な場所について説明します。

なお、CSSのページは、拡張子.cssで終わるものである必要があります[註 1]

MediaWiki名前空間に記述[編集]

註:MediaWiki名前空間は、インターフェース管理者の権限を持つ利用者のみが編集できます。


MediaWiki名前空間にCSSを記述する場合、以下のページにCSSを記述すると、そのウィキを見る全ての利用者(非ログイン利用者も含む)に対して適用されます。

このほかに、ガジェットに付属するCSSなどもMediaWiki名前空間に保存されています。

利用者サブページに記述[編集]

ログイン利用者は、利用者:(利用者名)/common.css(サブページ名は小文字です)というページに記述することで、独自のCSSを自分だけに適用することができます。

なお、サブページ名は、利用者:(利用者名)/common.cssなら全体に、利用者:(利用者名)/print.cssなら印刷時になど、MediaWiki名前空間に記述する場合と同様です。

タグのstyle属性[編集]

先述の2つは、一つのページを丸ごとCSSのファイルとするものでしたが、ここで紹介するのは記事のHTMLタグに直接CSSを書く方法です(通常のHTMLと同様)。

<タグ名 style="ここにCSS">ほげほげ</タグ名>のようにすることで、HTMLタグのstyle属性にCSSを設定できます。

コード 出力
<div style="border:lightgray 2px solid; background-color:aliceblue;">
<span style="color:red;"></span>いうえお
</div>

いうえお

TemplateStyles[編集]

TemplateStyles拡張機能は、テンプレートにCSSを適用するための拡張機能で、日本語版ウィキボヤージュでは利用することができます。

TemplateStyles機能で呼び出すCSSは、通常は呼び出す側のテンプレートのサブページに置くべきです。また、サブページ名はstyles.cssが推奨されます。

CSSを呼び出す方法は、以下のとおりです。

  1. CSS用のページを作成します。
  2. 呼び出す側のテンプレートで、<templatestyles src="(CSSのページ名)"/>と記述します。

書き方[編集]

ここでは、CSSの書き方について解説します。

CSSは、セレクタ・プロパティ・値の3つで構成されています。

使用例[編集]

ここでは、いくつか使用例を挙げます。導入する際は「導入」にある「コード」の内容をcommon.jsに追加するか「スタイルシート」にあるCSSをcommon.cssに追加することで実際に使用することができます。また、「コード」の内容をメタglobal.jsに追加すれば(或いは「スタイルシート」の内容をglobal.cssに追加すれば)、全てのウィキメディア・プロジェクトのウィキで使用することができます。

旗を隠す[編集]

  • レベル : ★★★☆☆
  • 説明 : Listingテンプレートで表示される旗(例 : ベネルクス#主要都市)を非表示にします。
  • スタイルシート :
.vcard image {
    display: none;
}

バナー固定[編集]

  • レベル : ★★★☆☆
  • 説明 : ページバナーをスクロールしても動かない様固定します。
  • スタイルシート :
.ext-wpb-pagebanner {
    position: fixed;
    z-index: 10;
}

#contentSub {
    margin-bottom: 198.3px;
}

外装変更[編集]

  • レベル : ★★★★★
  • 説明 : 外装を変更します。具体的には、ページのコンテンツを枠で囲み、ページの頭の部分に半透明の背景を付け、フォントを游ゴシックに変更します。
#content {
	background-image: url("//upload.wikimedia.org/wikipedia/commons/c/c9/Bluemarble_banner_RTL_%28cropped%29.jpg");
	background-repeat: no-repeat;
	background-position: right top;
	background-color: rgba(255,255,255,0.9);
	background-blend-mode: screen;
	background-size: 100% auto;
	background-origin: content-box;
	background-attachment: local;
	background-clip: border-box;
	-webkit-background-clip: border-box;
	border: solid 1px transparent;
	border-top: solid 3px transparent;
	border-image: linear-gradient(-68deg, #000080, #00008B, #33F, #4B0082, #8A2BE2);
	border-image-slice: 1;
	border-image-repeat: stretch;
	border-image-source: linear-gradient(-68deg, rgb(0, 0, 128), rgb(0, 0, 139), rgb(51, 51, 255), rgb(75, 0, 130), rgb(138, 43, 226));
	color: #444 !important;
	font-family: "Yu Gothic", 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
	-webkit-touch-callout: none;
	animation-duration: 2s;
	animation-name: backgroundAnimation;
	line-height: 1.5;
	letter-spacing: 0;
	tab-size: 4;
	padding: 1px 4px;
}

::placeholder {
	font-family: "Yu Gothic", 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
}

脚注[編集]

註釈[編集]

関連項目[編集]