リンク元 | ページの移動 | セクション | 特殊文字 | ページ名 | リンク先の更新状況 | 編集用ショートカット | 差分 | Wikiquote | On Meta MediaWiki:Common.css contains 画像/ファイル | この文書では、「ユーザースタイルシート」という仕組みを通して、 Cascading Stylesheet、略してCSSの導入を行います。読者にはある程度のHTMLの知識を要求します。 公開前のテスト | 関連ページの更新状況 新規ページの作成 | ウォッチリスト | 画像ページ | 数式の書き方 | トークページ | 最近更新したページ | オプション | 変数 | パイプ付きリンク | Content is available under these licenses. 履歴 | Wikisource | リダイレクト | 編集のパトロール スタイルシートを追加する スタイルシートのファイルを作成 「… 2012-11-21 Sigilでepubを作ろう(1) とりあえずepubにする. It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in links, etc. ページの編集 | ウェブページに代替スタイルシートを指定すると、ユーザーのニーズや設定に応じて複数のバージョンのページを見る方法を提供します。. This page was last edited on 16 May 2020, at 05:45. 例えば上記のように設定されている場合は、制作者スタイルシート側のスタイルが優先されるので、p要素内のテキストは赤(red)で表示されます。 言語間リンク | 特別ページ JKだろうけどメモ。 iPhoneのSafariで、青空文庫のサイトにいく… もっと読 … 改定追跡: Wikicommons | よくある間違いとして、スタイルにリンクするために、":link"ではなく"a"を使うというものがあります。":link"はリンクのみに適用されますが、"a"はリンクと名前が付けられたアンカーの両方に適用されます(たとえば、など)。, 通常の内部リンクは、現在では「internal」のclassで設定されていません(MediaWikiの古いヴァージョンではそうでしたので、今でも古いヴァージョンを使っているサイト[たとえば、[3]]ではそうなっているものがあります)。現在では、通常は、:linkと:link:visitedを参照しています。加えて、:link.extiwなどのスタイルは、例外的なスタイルとして提供されています。, のように特定の利用者(自分を含む)や特定のページへのリンクに対して、色を付けたり強調したりすることができます。たとえば最近更新したページでウォッチリストのページが強調されるようにです。これはOperaでは働きますが、IEではうまくいきません。Help:Watching pages/ja#Cssを参照してください。, このため、userのclassに対して指定したフォントはページ履歴中では適用されますが、ウォッチリスト又は最近更新したページでは適用されません。, Customization:Explaining_skins#Major_style_blocks_by_nameを参照。, One application is the use of a hidden sortkey in JavaScript table sorting. リンク | ユーザースタイルシート p { color: green; } 制作者スタイルシート p { color: red; }. 変数を用いたスタイルはTemplate:M to ft css中で適用されています。 検索 | ログイン及びユーザー設定: Wikinews | 他プロジェクト: リダイレクト | テンプレート | epub勉強中です。 この作業の目標 テキストのみの小説を縦書き… 2012-08-30 Kinoppyで青空文庫を読む. Wikipedia | ログインしている利用者は、フォント、色、ページ内におけるリンクなどの位置、その他いろいろなことを自分の好みによって変えることができます。これは自分の利用者ページのサブページの中に、Cascading Style Sheets(一般にCSSと呼ばれています)という一種のスタイルシートを置くことによって実現することができます。, たとえば、デフォルトで使われるmonobookスキンに、自分の好みの変更を加えるには、Special:Mypage/monobook.cssページを作成して、使いたいと思っているCSSを書き加えればいいのです。. 名前空間 | 表の作り方 | 注意: MediaWikiのデフォルトの設定では、利用者設定のスタイルコードはすべて無視されます。ユーザースタイルを有効にするには、LocalSettings.phpに以下の2つの設定をしなければなりません: 利用者それぞれの外装のスタイルは、まずスキンが選択され、次に選択したスキンに対応するCSSが選択されるようになっています。そして、それぞれのスキンの設定として、フォント、色、ページ内におけるリンクの位置など、いろいろな設定ができます。言い換えると、利用者は好みの設定をスキンごとに作ることができるのです。CSSは、HTMLコード中で指定されたHTML要素、クラス(class)、IDというセレクタ[1]を参照することで指定されます。したがって、それぞれのスキンにどんなスタイルが設定できるかは、ページのHTMLソースコードを見ることで、特に、クラスとIDを見ることによって理解できます。クラスやIDの数が多ければ多いほど、幅広い選択肢が生じます。, 全スキン共通のデフォルトのCSS設定はMediaWiki:Common.cssにあります。またJavaScript (JS) のデフォルト設定と一部のIEFixes ファイルは[2]と、MediaWiki:Common.jsにあります。(どんなページでも、HTMLソースを覗いてみると、必ずMediaWiki:Common.jsが参照されているはずです。), その他のデフォルトのCSSとJSページはスキン毎に設定されています。例をあげると、日本語版ウィキペディアではデフォルト設定は次のページにあります。, styleディレクトリにあるファイルは、外装ごとにあり、おそらくどのプロジェクトでも同じです。styleディレクトリの名前は、インストールの時に決められます。詳しくはLocalSettings.php#Stylesheet_Locationを見てください。, monobookスキンでは、http://ja.wikipedia.org/style/monobook/main.css や ja:MediaWiki:Monobook.cssなどで指定されているユーザーインターフェイスの様々な容貌を、JavascriptやCSSを使って変えることができます。これらは自分のユーザページのサブページを作って設定します。例えば、メタウィキメディアにおけるmonobookスキンなら、Special:Mypage/monobook.css ないし Special:Mypage/monobook.jsという名前のページを作り、その中で記述します。, 「標準」でも同様です。つまり、Special:Mypage/standard.css ないし Special:Mypage/standard.jsという名前のページです。その他の外装でも同様です。, 設定は、これらのページの中に、CSSやJavaScriptを書き込むだけです。プレビューでの動作確認はJSでは動かず、CSSでは特殊な動き方をします。編集時に、CSSを設定しようとしているスキンを実際に使用していれば、プレビューでスタイルシートの効果を直接見ることができます。ただし、これはページマージンなど、そのページに現れている要素のみですので、利用者がチェックしたいことのすべてがここでチェックできるとは限りません。ページを保存したら、強制リロード(シフト+リロード/ctrl+f5)をしてください(これはどのページからでも有効です)。そうしないと、新しいスタイルシートが読み込まれません。, 通常のページのHTMLソースには、共有スタイルシートとユーザー設定のスタイルシートを読み込む、次のような行があります。, まず、プロジェクト共有のCSSを参照し(メタでは //meta.wikimedia.org/style/wikistandard.css を参照しています)、次にユーザー個人のJSとCSSを参照しているのがわかると思います。プロジェクト共有のCSSよりもユーザー個人のCSSがあとなので、後者が優先するわけです。, サーバは、CSSとJSファイルを参照してHTMLを生成しますが、HTMLコードの解釈はしません。ですから、例えば[[a]] をリンクとして解釈したりしません。解釈はブラウザによって行なわれ、その能力と設定に応じた結果が表示されます。, 「MySkin」の外装には、main.cssのようなファイルはありません。ユーザーのCSSファイルは、Special:Mypage/myskin.cssとなります。, 上に加えて、ブラウザーにはローカルCSSが設定できます。もし、いくつかのブラウザを使っているなら、それぞれに別のCSSを設定できます。それぞれのCSSは、ログインしていなくても適用されますし、ウィキペディアなど、メディアウィキプロジェクトに限らず、すべてのインターネットページに適用されます。ただし、この設定は、閲覧しているページが同じCSSセレクタを、すなわちclass名なら同じclass名を、ID名なら同じID名を使っているときだけに適用されます。たとえば、a.extiwの設定はタグであるh2を使っているサイトには適用されません。, CSSの命令は、メディアウィキプロジェクトごとに、変えたいことがあります。たとえば、違うプロジェクトであることを区別しやすくするために、背景色を変えるなどです。当然この用途には、ローカルCSSを使うことができません。このような用途のためには、少なくともユーザーサブページを使う必要があります。, 一部のコンピューター、たとえばインターネットカフェのコンピューターなどでは、ブラウザの設定ができないことがあります。このような場合にも、ユーザーサブページを使った設定は役に立ちます。, 一方、ブラウザで、ウェブページや外部CSSファイルで指定されたフォントサイズを無視する設定をしてあるとき、フォントサイズを参照するCSSの命令は、ローカルCSSに置かれていなければなりません。, CSSのセレクタは、要素、class、IDごとに指定することができます。ページ本体のスタイルに関連するものは、次のようなものです。現在の設定を確認できるような例をできるだけ与えています。, a vs :link - 検索に使用できない単語 | Wikibooks | ユーザの投稿記録 | 外装の詳細設定 ‘(green)で表示されます。, ホームページ制作を支援する タグインデックス. Wiktionary - Edit このテンプレートを編集, From Meta, a Wikimedia project coordination wiki, http://ja.wikipedia.org/style/monobook/main.css, http://ja.wikipedia.org/style/wikistandard.css, http://ja.wikipedia.org/style/cologneblue.css, http://ja.wikipedia.org/style/nostalgia.css, http://meta.wikimedia.org/style/monobook/main.css, http://meta.wikimedia.org/style/wikistandard.css, http://meta.wikimedia.org/style/cologneblue.css, http://meta.wikimedia.org/style/nostalgia.css, Customization:Explaining_skins#Major_style_blocks_by_name, http://www.vertexwerks.com/tests/sidebox/, http://www.alistapart.com/articles/slidingdoors2/, http://www.alistapart.com/articles/customcorners/, http://alistapart.com/articles/customcorners2/, http://www.alistapart.com/articles/mountaintop/, http://www.virtuelvis.com/gallery/css/rounded/, http://www.quirksmode.org/dom/domform.html, https://meta.wikimedia.org/w/index.php?title=Help:User_style/ja&oldid=20089202, Creative Commons Attribution-ShareAlike License, a - リンクとアンカー。ただし、アンカーではオープンタグとクローズタグの間に文字が入らないので、スタイル指定は、リンクのものにしか関係ありません。例:, :link.internal – ファイル(メディア)そのものへのリンク、およびサムネイルや虫眼鏡アイコンから画像説明ページへのリンク(ただし、色やフォントサイズに関するスタイル指定は、前者にしか適用しません) - 例:, body.ns-0, ..., body.ns-15 - 各ネームスペースのbody*div#bodyContent. © 2005-2020 Mozilla and individual contributors. 要約欄 | カテゴリ | 起稿・編集: Get the latest and greatest from MDN delivered straight to your inbox. 拡張された最近更新したページ | ログインして、MDNアカウントの特典をお楽しみください。アカウントを作成していない場合は、ログイン後、作成を促されます。, このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、, https://github.com/mdn/browser-compat-data, 以前は、 HTML 仕様書自体で推奨及び代替スタイルシートの概念を定義していました。. EasyTimeline | ログイン | 細部の編集 | ウェブページに代替スタイルシートを指定すると、ユーザーのニーズや設定に応じて複数のバージョンのページを見る方法を提供します。, Firefox では、表示 >スタイルシートのサブメニューを使用して、ユーザーがスタイルシートを選択することができます。 Internet Explorer でも (IE 8 から) この機能に対応しており、表示 >スタイルから利用できます。 Chrome では (バージョン48時点で) この機能を使用するのに拡張機能が必要です。ウェブページがユーザーからスタイルの切り替えができるユーザーインターフェイスを提供することもできます。, 代替スタイルシートはふつう、次のように 要素に rel="alternate stylesheet" およびび title="..." 属性を使用することで指定されます。, この例では、スタイルシートのサブメニューに「既定のスタイル」「ファンシー」「基本」という項目が追加され、「既定のスタイル」が選択されています。ユーザーがスタイルを選択すると、ページはそのスタイルシートを使って即座に再描画されます。, 又は