Skin:Timeless
Timeless リリースの状態: 安定 |
|||
---|---|---|---|
作者 | Isarra | ||
互換性の方針 | MediaWiki とともにリリースされるスナップショット。 master には後方互換性がありません。 | ||
MediaWiki | 1.31+ | ||
ライセンス | GNU 一般公衆利用許諾書 2.0 以降 | ||
ダウンロード | |||
例 | |||
|
|||
四半期ごとのダウンロード数 | 158 (Ranked 3rd) | ||
使用している公開ウィキ | 2,938 (Ranked 13th) | ||
既定の外装として使用している公開ウィキ | 165 | ||
translatewiki.net で翻訳を利用できる場合は、Timeless 外装の翻訳にご協力ください | |||
Vagrant role | timeless | ||
問題点 : | 未解決のタスク · バグを報告 |
Timeless strongly supports responsive web design and is optimized for a multitude of screen widths ranging from narrow mobile phone screens up to wide monitors.
Winter を基にした外装であり、実用的なものをすべて取り込むことを意図しています。これは2015年の英語版ウィキペディアの井戸端で提案され外装となりました。
インストール
- Vagrant を使用している場合は、
vagrant roles enable timeless -p
でインストールします
手動インストール
- ダウンロードして、ファイルを
skins/
フォルダー内のTimeless
という名前のディレクトリ内に配置します。 - ファイル LocalSettings.php の末尾に以下のコードを追加してください:
wfLoadSkin( 'Timeless' );
- 必要に応じて設定します。
- 完了 - 自分のウィキの Special:Version に移動して、外装が正しくインストールされたことを確認してください。
特徴
携帯電話用の既定の外装であるミニマルな Minerva とは異なり、Timeless はデスクトップ用の既定の外装である Skin:ベクター のようなデスクトップ向けテーマの機能を、あらゆる画面サイズに取り込んでいます。
In addition, Timeless offers a distinct convenient shortcut to the user contribution list in the top bar, next to the “編集” and “履歴表示” buttons.
全体的な目的は、コンテンツと編集ツールの両方を強調、すべてを表示するための複数の表示モード、コンテンツ (winter) のみに焦点を当てる、ダークモード/夜間モードへの切り替えを備える、フル機能の外装を作ることです。
MobileFrontend/Minervaとは異なり、Timelessはモバイル解像度に合わせてテーブルを強制的に再形成するのではなく、ユーザーが自らテーブルやテンプレートをレスポンシブにし、特定の用途に最適化することを期待・推奨しています。
With Skin:Timeless-DarkCSS , users are able to manually enable a dark background for reducing eye strain and power saving on AMOLED displays. 説明はそちらにあります。
将来の目標は、以下の機能を含むフル機能の外装を作成することです:
- コンテンツと編集ツールの双方に重点を置いています。
- すべてを表示するモード、コンテンツにのみフォーカスするモード(ウインター)、複数のビューモードがあります。
- 暗視/夜間視に切り替えます。
レスポンシブWebデザイン詳細
この節では既定の設定に基づき説明します。
≥1340 pixels
画面幅1340ピクセルのシミュレーション上では、サイトは3カラムで表示されます。 Some site navigation sections are on the left side of the content area (e.g. "案内", "ツール") while some are on the right side ("その他", "印刷/書き出し", "他のプロジェクト", "他言語版", "カテゴリ").
ブラウザーのビューポート幅を約 1900 ピクセルと仮定した場合、コンテンツを含む中央のカラムの幅は 1261 ピクセルに固定されますが、以前の外装 ベクター 、モノブック では画面の幅に合わせて無限に拡張できます。
An indefinite content width can be achieved with this skin using this CSS code snippet.
With this CSS code, users can optionally display the navigation sections from the third (right-side) column in the first (left-side) column, like already done at 1339 to 1100 pixels of browser width.
1339〜1100ピクセル
サイトは2カラムで表示されます。 コンテンツエリアの右側にあるサイトナビゲーションセクションは、既存のセクションの下の左側に移動します。
1100ピクセル以下
サイトが1カラムで表示されます。 コンテンツエリアは画面いっぱいに表示されます。 カテゴリはページの一番下まで表示され、ベクター 、Monobook のところに表示されます。
The site navigation sections are collapsed into a top navigation bar with text labels, and currently shown and hidden using JavaScript, rather than pure CSS, as implemented in the Skin:MinervaNeue using :checked
.
851ピクセル以下
Below 851 pixels, the responsive design of Timeless adapts to mobile phone screens.
The text labels on the navigation elements above the content area (e.g. "ページ", "議論", "編集", "ソースを編集", "履歴表示") are not shown to save horizontal space; only the icons are shown instead of both.
サイトナビゲーションの各セクションは、アイコンラベル付きのトップナビゲーションバーに折りたたまれています。
CSSスニペット
These code snippets can be used to customize the skin's appearance, by pasting them into MediaWiki:Timeless.css as a MediaWiki administrator, into one's own user space CSS as a regular user, or into a user skin browser extension as a visitor.
コンテンツ幅の不定
Regarding criticism of limited content widths, using this CSS code snippet, the width of the center (content) column and the blue middle line of the colour bar above it extends indefinitely with screen width.
/* Indefinite content width */
@media screen and (min-width: 851px) {
.color-middle-container,
.ts-inner { max-width: none; }
}
片側ナビゲーションメニュー
Using this code snippet, the elements of the right-side navigation menu (#mw-related-navigation
) will continue to be displayed in the left column (under #mw-site-navigation
) like they do on 1100 to 1330 pixels of browser width even beyond 1340 pixels of browser width, for users who prefer a one-sided navigation menu as known from the skins ベクター and モノブック .
このコードは、上記のコンテンツ幅を無制限にするコードと組み合わせても機能します。
/* 片側ナビゲーションメニュー */
@media (min-width: 1340px) {
#mw-content-block {
display: block;
}
#mw-content,
#content-bottom-stuff {
margin-left: 14em;
}
#mw-content-wrapper {
float: right;
margin-left: -14em;
width: 100%;
}
#mw-related-navigation {
width: 14em;
padding: 0 1em 0 0;
}
div.color-middle {
margin-right: 0;
}
.mw-wiki-logo {
display: inline-block;
}
}
/* トップカラーバーとページカラムを揃える */
.ts-inner {
padding: 0 0 0 1em;
}
/* ボトムロゴの再調整 */
#footer { padding-right: 1em; }
トップバーのフォントをモダンに変更
The following CSS code adds a set of modern sans serif font types (including fallback fonts) to the currently serif fonts (Linux Libertine, Times New Roman, etc.) of the user name and top-bar navigation menus displayed between 852 and 1100 pixels of browser width.
/* トップバーフォントのモダン化 */
#mw-header *,
#mw-site-navigation *,
#mw-related-navigation * {
font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}
/* ディセンダーで文字を切ることは避けてください。 g,j,p,q,y */
#personal h2 span {
height: 1.5em;
position:relative;
bottom:0.1em
}
/* トライアングルポジションパッチ */
#personal h2::after {
position: relative;
bottom: 0.5em;
}
ナビゲーション時にセクションのタイトルを強調表示
This CSS code snippet highlights the last section header upon navigation to facilitate returning to it when scrolling through a long document.
.mw-headline:target {
background-color: gold;
}
レガシーパッチ
この外装の初期の成熟していないバージョンの古い MediaWiki インストレーションの利用者とリモート インターフェイス管理者は、その間に外観の欠点に対処するためにこれらのコードのパッチを後付けできます。
/* 横幅の最適化。携帯電話上での狭すぎる表示を防止 */
@media (max-width:850px) {
#mw-content { padding: 0.5em 0.5em 3em; }
#firstHeading { width: 100%; }
#mw-header-container { padding: 3.75em 0.5em 0.35em; }
#site-navigation h2 { left: 0.5em; }
#p-logo-text { left: 3em; }
#user-tools h2 { right: 1em; }
#site-tools h2 { right: 4em; }
}
/* 目次のインデントパッチ(ヘッダーレベルのインデントがない場合、後付けする) */
#toc ul ul {
margin: 0 0 0 2em;
}
設定
MediaWiki 1.34以降でサポートされています。
$wgTimelessBackdropImage
(string, default 'cat.svg')- 背景画像に
$wgLogo
を設定します 推奨は、高解像度に対応するために 500-750px 幅の svg に設定した svg です。サイズは本当に何でも構いませんが、その場合、既定の猫と同様にコンテンツの後ろに見えるようになります。 - 背景が他の背景色のテーマでも変更されずに機能する可能性がある場合は、後で実装する場合は、不透明度が20〜50%の黒/白の透明な単色画像をお勧めします。白黒のアルファ値はパーツも同様に約10-50 / 255です。これにより、純粋な白/黒以外のほとんどすべてで機能するようになります。
- 例(実際には上記の推奨に従わないため、おそらく暗い背景では機能しません):Timeless backdrop (wiktionary).svg、Timeless backdrop (metawiki).svg
$wgTimelessLogo
(null|string|array, default null)- ロゴのレンダリングを特別に行い、Timeless専用のカスタムロゴを作成可能(ヘッダーとの重複を避けるため、ワードマークなしのスクエアロゴバージョンなど)。 また、135x135pxのロゴに対してのみ機能し、すべての高解像度ロゴをこのサイズに縮小するため、$wgLogoHDを使用するよりもわずかに優れたHiDPIサポートを提供します。
- ファイル名を指定するだけで、ウィキにアップロードされたファイルをTimelessに指定することができます(これを使用する場合は、ファイルを保護することを忘れないでください)。
- 公称160x160pxのロゴにすでに設定されている$wgLogo、$wgLogoHDを再利用すること。ただし、HD版も正しいサイズで出力されるようにする。
$wgTimelessLogo = [ '1x' => $wgLogo, '1.5x' => $wgLogoHD['1.5x'], '2x' => $wgLogoHD['2x'], 'width' => 160, 'height' => 160 ];
- wikiにアップロードされたFile:Cows.svgを使用する:
$wgTimelessLogo = 'Cows.svg';
- アップロードされたロゴは、svgまたは2倍以上のラスタサイズとして最適で、ターゲット解像度ごとに縮小されることに注意してください。 もちろん、この方法では、ファイルのアップロードとサムネイルが有効であることが必要です。
- 135pxから165pxが推奨されます。
$wgTimelessWordmark
(null|string|array, default null)- バナーのワードマークにデフォルトのLinux Libertineセリフテキストの代わりにイメージを使用する方法。 $wgTimelessLogoと同じ使用方法
- だから、英語のウィキペディアでは、Wikipedia wordmark.svgをこう使うかもしれない。
$wgTimelessWordmark = 'Wikipedia wordmark.svg';
- または、上記のように各解像度バージョンと寸法の配列を指定します(率直に言って、これらの方が可能性が高いです)。
- onwikiにアップロードされたファイルを使用しない場合、寸法の指定が必要です。
- 推奨されるサイズは200px×38px
なお、TimelessはManual:$wgLogos で設定したワードマークやHiDPIロゴをサポートしているので、特に理由がなければそれを使うだけでも推奨されます。 特に、サイトタイトルのレンダリングは、テキストタイトルのスタイルが基本的に推測に過ぎないため、正しくレンダリングするためにワードマークイメージを必要とする場合もあれば、そうでない場合もあります。 その他、ワードマークを正しくレンダリングするためのオプションは以下の通りです。
- wikiの
Timeless.css
にno-wrapや異なるfont-sizeの値など、いくつかのカスタムCSSを設定します。 timeless-sitetitle
メッセージの内容を変更することで異なる表示文字列を設定する。
ウィキメディア・コモンズに Category:Timeless skin に関連するメディアがあります。 |
この外装は 1 つ以上のウィキメディアのプロジェクトで使用されています。 これはおそらく、この外装が安定していて高いトラフィックのウェブサイトでも十分に動作することを意味します。 この外装がインストールされている場所を確認するには、ウィキメディアの設定ファイル CommonSettings.php および InitialiseSettings.php 内で、この拡張機能の名前を探してください。 特定のウィキにインストールされている外装の完全な一覧は、そのウィキの Special:Version ページにあります。 |
この外装は以下のウィキ ファーム/ウィキ ホスト/パッケージに含まれています: これは正式な一覧ではありません。 一部のウィキ ファーム/ウィキ ホスト/パッケージは、ここに記載されていなくてもこの外装を含んでいる場合があります。 必ずご利用のウィキ ファーム、ウィキ ホスト、バンドルで確認してください。 |
- Skins bundled with MediaWiki 1.31/ja
- GPL licensed skins/ja
- Stable skins/ja
- Skins in Wikimedia version control/ja
- All skins/ja
- Skins used on Wikimedia/ja
- Skins included in Canasta/ja
- Skins available as Debian packages/ja
- Skins included in Miraheze/ja
- Skins included in MyWikis/ja
- Skins included in ProWiki/ja
- Skins included in semantic::core/ja
- Skins included in WikiForge/ja
- Mobile skins/ja