管理者用ヘルプ

管理者用ヘルプについて

こちらは管理者用なので、一般の編集者の方々は以下に記載されている内容を実行する権限がありません。

このサイトの「管理者権限」を持っている方(現在4名)のみ実行可能となります。

「わたしもMediaWikiを作ってみよう！」という方には参考になると思います。

なお、以下の「1.」と「2.」は、「ビューロクラット」権限をお持ちの方(記念誌部会メンバー)も設定可能です。

「ビューロクラット」権限につきましては、今後「同期会幹事」、「班OB会幹事」の方にも付与する予定です。

ということで、新たに「ビューロクラット」となられた方は、ご理解いただき、正しく運用くださるようお願いいたします。

1.「アカウント」の登録

　ユーザーアカウントの登録は以下の手順で行う。

　1. 「特別ページ」→「アカウント作成」をクリック

　2. 表示された画面で、「利用者名」と「仮パスワード」を入力後、「アカウントを作成」をクリック

　　その他の入力欄は記載不要です。

　　アカウントの「利用者名」入力規則

(1) 半角英数で入力します。

(2) 「姓イニシャルの大文字+名前小文字」とします。

例：「山田太郎」→ アカウント名「Ytarou」

ダブリ例の表記例：「橋本隆:Htakashi」「平山高志:Hiratakashi」「星野貴士:Hoshitakashi」(姓の読みを追記)

(3) 仮パスワードについて

　ここで設定するパスワードは「仮」のものです。

　設定したアカウントと仮パスワードを本人に連絡しますが、そのときに「パスワードの変更」をお願いします。

　そのため、仮パスワードはぐちゃぐちゃの記号として「こんなの覚えられないから自分で新たに設定し直したい！」と思わせましょう。

　例：「BxZ_6tpLy7nqM」

(4) アカウント、仮パスワード管理

　「アカウント名」と「仮パスワード」は一覧表を作成して、そちらに記入し、そちらからコピー&ペーストしましょう。

　本人から「パスワード変更しました」との連絡が入ったら、仮パスワードは削除します。　

　これで誰がパスワード未変更かが一目瞭然ですね。

2.「アカウント」の権限設定

　登録したユーザーアカウントは「閲覧権限」しかありません。

　「編集」も可能としたい場合は以下の手順で「編集権限」を設定しましょう。

　1. 「特別ページ」→「利用者権限」をクリック

　2. 表示された画面の「利用者名を入力」のところに、「アカウント名」を入力

　　アカウント名は「半角英数」です。

　3. 「利用者名を入力」欄にアカウント名を入力後、「利用者グループの表示」ボタンをクリック

　4. 「利用者グループ編集」画面が表示されます。

　5. 「変更できるグループ」一番下の「project_editor」にチェックを入れて、下の「利用者グループを保存」ボタンをクリック

これで、編集可能になりました。

権限設定は、一人ずつ設定する必要があります。お手数ですが頑張って。

MediaWiki作成者用

このWikiの作成者用のヘルプです。

本サイトの作成者は、何でもすぐに忘れてしまうので、こちらに書いておくことにしました。

「わたしもMediaWikiを作ってみよう」という方には役立つかも知れません。

関係ない方には興味ないと思われますので、タイトル以外は折り畳んでページをスッキリしています。

興味のある方は、右端の「展開する」をクリックしてお読みください。

1. 作成中の「MediaWiki」を非公開にする

展開する

現在、この「八中・小山台デジタルアーカイブ」はまだ、工事中(編集作業中)なので、一般の方には「非公開」としています。

すこしずつ充実させて、一般公開を行う予定です (2021年3月公開予定)。

それまでは、以下の手順で「非公開」にしています。

「localsetting.php」に以下の記述を行う

$wgGroupPermissions['*']['read'] = false;

これだけで「OK」です。

簡単ですね。

「localsetting.phpってどこにあるの」→ はい、MediaWikiのインストールが無事完了した画面で出てきます。

実際には、「localsetting.php」はローカルにダウンロードされていますので、それをFTP転送でMediaWikiをインストールしたルートフォルダーに入れ込みます。

2. 最初のページだけは見せて、他は非公開にする

展開する

　「メインページ」と「このページとあのページ」だけはOKだけど、後はダメよ、とするには、

　「localsetting.php」に以下の記述を追記します。

　$wgWhitelistRead = array ( "メインページ", "特別:ログイン", "執筆者一覧");

　などと記述するようです。今回はこれで行ってみましょうか。

　「array」って配列ですね。公開するページだけをカンマ区切りで記述すれば良さそうです。

　「メインページ」と「ログインページ」は無いとまずそうですね。

　本題とは無関係ですが、近年のこのような BLMの時代では「Whitelist」という記述法も変わっていくかも知れませんね。

3. アカウントを持っていてログインしたユーザーには閲覧権限のみ付与

展開する

　読めるだけで、編集はできないようにします。

　localsetting.phpに以下を追記

　$wgGroupPermissions['user']['edit'] = false;

　$wgGroupPermissions['user']['createpage'] = false;

4. 編集可能グループを作成する

展開する

ログインしたユーザーは「閲覧権限」しかありません。

「編集権限」を付与するには、まず「編集権限」を持ったグループを作成しておきます。

そのためには、localsetting.phpに以下の記述を追記します。

例：「編集権限」を持つ「project_editor(名称は任意)」というグループを作成して権限を設定

　$wgGroupPermissions['project_editor']['edit'] = true;

　$wgGroupPermissions['project_editor']['createpage'] = true;

そして、アカウントの権限設定で「project_editor」にチェックを入れます。

5. ファビコンを作成する

展開する

「ファビコン」ってご存じですか？

そう、ブラウザーのタブ先頭についてる小さなアイコンのことです。

ブラウザーのタブをどんどん開いていくと、サイトの名称部分の表示が狭くなってきて「これは何のサイトかな？」となります。

アイコンがあると、これは「○○のサイトだ」とすぐ分かります。

このサイトにも「高校の帽章」が付いてますね。以下にファビコン作成の手順を記載します。

1. 「ファビコン」用の画像を作成する。

　画像ファイルの形式は「.png」で作成し、2～3種類の解像度で作成します。

　「16x16」「32x32」は必ず作成、「152x152」はできれば作っておきましょう。

2. 作成した画像を一つの「アイコン」ファイルにまとめる。

　これは、無料でまとめてくれるサイトがありますので、こちら↓でやってもらいます。

　半透過マルチアイコンfavicon.icoを作ろう!

　上記サイトで、作成した「png」ファイルを「画像ファイル1を選択」～「画像ファイル3を選択」ボタンで選択し、下にある「アイコン作成」ボタンをクリック

　選択されたファイルの画像が表示されますので、OKなら、「アイコンダウンロード」ボタンをクリック

　これであなたのパソコンのダウンロードフォルダーに「favicon.ico」という名前のファイルがダウンロードされました。

3. 「アイコン」ファイルをMediaWikiをインストールしたルートフォルダーにFTP転送

　ダウンロードされた「favicon.ico」ファイルを、FTPクライアントソフトでMediaWikiのルートフォルダーに転送します。

　ちゃんとできたかどうかは、ブラウザーの再起動をして確認しましょう。

6. 動画を表示するための事前実施項目

展開する

動画を表示するためには、<youtube>hMu0sd_1ZFM</youtube>のように記述すればOKですが、

この<youtube>タグが機能するためには、以下の事前実施項目が必須となります。

1. YouTube Extensionのダウンロード

　Download MediaWiki extensionからダウンロードします。

　このとき、MediaWikiのバージョン確認をした後に、「Continue」をクリックします。

2. ダウンロードした「YouTube-REL1_34-a0bbd39.tar.gz」を解凍

　「tar.gz」に対応した解凍ソフト(Bandizip等)で解凍します。

3. 解凍してできた「YouTube」フォルダーごと、MediaWikiインストールフォルダーの「extensions」フォルダーにFTP転送

　FTPクライアントソフト(ALFTP等)を使って転送します。

4. 「LocalSettings.php」に以下の記述を追記

　wfLoadExtension( 'YouTube' );

　Extensionの追加の記述は、最後にありますので、その後に追記しましょう。

7. サイドバー(左のメニュー)を編集

展開する

サイドバーを変更するには、「MediaWiki:Sidebar」に次のように記述する。

右上の「検索窓」に「MediaWiki:Sidebar」と入力して[Enter]キーを押すと、「MediaWiki:Sidebar」の内容が表示される。

記述例

* navigation

* 八中・小山台デジタルアーカイブ

** mainpage|トップページ

** recentchanges-url|recentchanges

** randompage-url|randompage

** helppage|help-mediawiki

** 特別:MyPage/sandbox|編集時サンドボックス

* SEARCH

* TOOLBOX

* LANGUAGES

* 関連リンク

** https://koyamadai100.jp|100周年記念サイト

** https://www.kikuoh-kai.jp|菊桜会Webサイト

** https://koyamadai100.jp/fund/|寄付のお願い

そして、さらに「MediaWiki:Vector.css」に以下のように記述。

同様に「検索窓」に「MediaWiki:Vector.css」と入力してページを作成し、内容を記述する(管理者のみ可能)。

記述例

/* ここに記述したCSSはベクター外装の利用者に影響します */

#mw-panel { width: 11.5em; }

#footer, #mw-head-base, #content { margin-left: 12em; }

#left-navigation { margin-left: 12em; }

#p-logo a, #p-logo a:hover { width: 11.5em; }

#mw-panel div.portal h3 { font-size: inherit; }

#mw-panel div.portal div.body ul li { font-size: 80%; }

そして、「変更を保存」の後に、Google Cromeの場合は、[Shift]+[Ctrl]+[R]キーを押して、ブラウザーのキャッシュをクリアする。

「11.5em」などとなっているところは、ご自分の環境に合わせて変更して、最適な数値としてください。

「変更を保存」後、「ブラウザーのキャッシュ・クリアー」を忘れないようにしてください(変更内容が反映されません)。

8. ボタンのCSS指定

展開する

ボタンの色・動作時の形状等を規定するには、「MediaWiki:Common.css」を作成して、CSS(styleの詳細を記載したテキストデータ)を記述する。

右上の「検索窓」に「MediaWiki:Common.css」と入力して[Enter]キーを押すと、「MediaWiki:Common.css」のページが開き編集できるようになる(管理者のみ)。

このページに書いた「CSS」が、このWiki全体の"style"を規定することになります。

そうとは知らず、「MediaWikiをインストールしたフォルダーのどこかに「Common.css」というファイルがあって、それを編集するのだろう」とFTPクライアントソフトで必死に探していたのでした。orz

以下はボタン5色(薄赤、緑、紫、薄い青緑、灰色)の「Common.css」記載例です。

---

/* ボタンのCSS指定 */
/* 最終版All */
.koyama-button-r, .koyama-button-g, .koyama-button-b, .koyama-button-c, .koyama-button-h {

 display: inline-block;

/* width: 120px; */

 height: 25px;

 text-align: center;

 text-decoration: none;

 line-height: 25px;

 outline: none;

}

.koyama-button-r, .koyama-button-g, .koyama-button-b, .koyama-button-c, .koyama-button-h,
.koyama-button-r::before, .koyama-button-g::before, .koyama-button-b::before, .koyama-button-c::before, .koyama-button-h::before,
.koyama-button-r::after, .koyama-button-g::after, .koyama-button-b::after, .koyama-button-c::after, .koyama-button-h::after {

 -webkit-transition: all 1.0s;

 transition: all 1.0s;

}


/* 最終版Red */
.koyama-button-r {

 position: relative;

 border: 1px solid #cb5462;

 border-radius: 4px;

 color: #ffffff;

 line-height: 28px;

/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

 text-shadow: 0px 1px 0px #f56778;

}
.koyama-button-r,
.koyama-button-r:hover {

 border-bottom: 2px solid #cb5462;

 background-color: #f56778;

 background-image: -webkit-linear-gradient(top, #f997b0, #f56778);

 background-image: linear-gradient(to bottom, #f997b0, #f56778);

 box-shadow: inset 1px 1px 0 #fbc1d0;

}
.koyama-button-r::before,
.koyama-button-r::after {

 bottom: -1px;

 left: -1px;

/* width: 200px; */

 height: 28px;

 border: 1px solid #ee8090;

 border-bottom: 1px solid #b84d5a;

 border-radius: 4px;

/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

}
.koyama-button-r::before {

 height: 26px;

 bottom: -2px;

 border-top: 0;

 border-radius: 4px 4px 4px 4px;

 box-shadow: 0 1px 1px 0px #bfbfbf;

}
.koyama-button-r:hover {

 background: #f56778;

 background-image: -webkit-linear-gradient(top, #f56778, #f997b0);

 background-image: linear-gradient(to bottom, #f56778, #f997b0);

 color: #913944;

/* 以下のシャドゥが明るいと、文字がへこんで見える */

 text-shadow: 0px 1px 0px #f9a0ad;

}
.koyama-button-r:active {

 bottom: -2px;

 margin-bottom: 2px;

 border: none;

 box-shadow: 1px 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, .3);

}
.koyama-button-r:active::before,
.koyama-button-r:active::after {

 border: none;

 box-shadow: none;

}

/* 最終版Green */
.koyama-button-g {

 position: relative;

 border: 1px solid #148b22;

 border-radius: 4px;

 color: #ffffff;

 line-height: 28px;

/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

 text-shadow: 0px 1px 0px #27b538;

}
.koyama-button-g,
.koyama-button-g:hover {

 border-bottom: 2px solid #148b22;

 background-color: #27b538;

 background-image: -webkit-linear-gradient(top, #77d990, #27b538);

 background-image: linear-gradient(to bottom, #77d990, #27b538);

 box-shadow: inset 1px 1px 0 #b2ffc5;

}
.koyama-button-g::before,
.koyama-button-g::after {

 bottom: -1px;

 left: -1px;

/* width: 300px; */

 height: 28px;

 border: 1px solid #40ae50;

 border-bottom: 1px solid #0d781a;

 border-radius: 4px;

/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

}
.koyama-button-g::before {

 height: 26px;

 bottom: -2px;

 border-top: 0;

 border-radius: 4px 4px 4px 4px;

 box-shadow: 0 1px 1px 0px #afafaf;

}
.koyama-button-g:hover {

 background: #27b538;

 background-image: -webkit-linear-gradient(top, #27b538, #77d990);

 background-image: linear-gradient(to bottom, #27b538, #77d990);

 color: #096114;

/* 以下のシャドゥが明るいと、文字がへこんで見える */

 text-shadow: 0px 1px 0px #80d98d;

}
.koyama-button-g:active {

 bottom: -2px;

 margin-bottom: 2px;

 border: none;

 box-shadow: 1px 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, .3);

}
.koyama-button-g:active::before,
.koyama-button-g:active::after {

 border: none;

 box-shadow: none;

}


/* 最終版Blue */
.koyama-button-b {

 position: relative;

 border: 1px solid #6254cb;

 border-radius: 4px;

 color: #ffffff;

 line-height: 28px;

/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

 text-shadow: 0px 1px 0px #7867f5;

}
.koyama-button-b,
.koyama-button-b:hover {

 border-bottom: 2px solid #6254cb;

 background-color: #7867f5;

 background-image: -webkit-linear-gradient(top, #b097f9, #7867f5);

 background-image: linear-gradient(to bottom, #b097f9, #7867f5);

 box-shadow: inset 1px 1px 0 #d0bcfb;

}
.koyama-button-b::before,
.koyama-button-b::after {

 bottom: -1px;

 left: -1px;

/* width: 200px; */

 height: 28px;

 border: 1px solid #9080ee;

 border-bottom: 1px solid #5a4db8;

 border-radius: 4px;

/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

}
.koyama-button-b::before {

 height: 26px;

 bottom: -2px;

 border-top: 0;

 border-radius: 4px 4px 4px 4px;

 box-shadow: 0 1px 1px 0px #bfbfbf;

}
.koyama-button-b:hover {

 background: #7867f5;

 background-image: -webkit-linear-gradient(top, #7867f5, #b097f9);

 background-image: linear-gradient(to bottom, #7867f5, #b097f9);

 color: #443991;

/* 以下のシャドゥが明るいと、文字がへこんで見える */

 text-shadow: 0px 1px 0px #ada0f9;

}
.koyama-button-b:active {

 bottom: -2px;

 margin-bottom: 2px;

 border: none;

 box-shadow: 1px 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, .3);

}
.koyama-button-b:active::before,
.koyama-button-b:active::after {

 border: none;

 box-shadow: none;

}


/* 最終版Cyan */
.koyama-button-c {

 position: relative;

 border: 1px solid #22a0a0;

 border-radius: 4px;

 color: #ffffff;

 line-height: 28px;

/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

 text-shadow: 0px 1px 0px #229393;

}
.koyama-button-c,
.koyama-button-c:hover {

 border-bottom: 2px solid #22a0a0;

 background-color: #22b5b5;

 background-image: -webkit-linear-gradient(top, #9ed9d9, #22b5b5);

 background-image: linear-gradient(to bottom, #9ed9d9, #22b5b5);

/* insetの値を明るくすると、ボタン上側がくっきりする */

 box-shadow: inset 1px 1px 0 #d0f4fb;

}
.koyama-button-c::before,
.koyama-button-c::after {

 bottom: -1px;

 left: -1px;

/* width: 200px; */

 height: 28px;

 border: 1px solid #22a0a0;

 border-bottom: 1px solid #22a0a0;

 border-radius: 4px;

/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

}
.koyama-button-c::before {

 height: 26px;

 bottom: -2px;

 border-top: 0;

 border-radius: 4px 4px 4px 4px;

 box-shadow: 0 1px 1px 0px #bfbfbf;

}
.koyama-button-c:hover {

 background: #22b5b5;

 background-image: -webkit-linear-gradient(top, #22b5b5, #9ed9d9);

 background-image: linear-gradient(to bottom, #22b5b5, #9ed9d9);

 color: #0f405f;

/* 以下のシャドゥが明るいと、文字がへこんで見える */

 text-shadow: 0px 1px 0px #ade8e8;

}
.koyama-button-c:active {

 bottom: -2px;

 margin-bottom: 2px;

 border: none;

 box-shadow: 1px 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, .3);

}
.koyama-button-c:active::before,
.koyama-button-c:active::after {

 border: none;

 box-shadow: none;

}


/* 最終版Grey */
.koyama-button-h {

 position: relative;

 border: 1px solid #888888;

 border-radius: 4px;

 color: #ffffff;

 line-height: 28px;

/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

 text-shadow: 0px 1px 0px #333333;

}
.koyama-button-h,
.koyama-button-h:hover {

 border-bottom: 2px solid #333333;

 background-color: #337744;

 background-image: -webkit-linear-gradient(top, #dddddd, #888888);

 background-image: linear-gradient(to bottom, #ddddd, #888888);

 box-shadow: inset 1px 1px 0 #f1f1f1

}
.koyama-button-h::before,
.koyama-button-h::after {

 bottom: -1px;

 left: -1px;

/* width: 300px; */

 height: 28px;

 border: 1px solid #888888;

 border-bottom: 1px solid #333333;

 border-radius: 4px;

/* 以下の3行は"content-box"にしないと、"border-box"で最初の列に大きな縦棒が入る */

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

}
.koyama-button-h::before {

 height: 26px;

 bottom: -2px;

 border-top: 0;

 border-radius: 4px 4px 4px 4px;

 box-shadow: 0 1px 1px 0px #afafaf;

}
.koyama-button-h:hover {

 background: #888888;

 background-image: -webkit-linear-gradient(top, #888888, #dddddd);

 background-image: linear-gradient(to bottom, #888888, #dddddd);

 color: #333333;

/* 以下のシャドゥが明るいと、文字がへこんで見える */

 text-shadow: 0px 1px 0px #f0f0f0;

}
.koyama-button-h:active {

 bottom: -2px;

 margin-bottom: 2px;

 border: none;

 box-shadow: 1px 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, .3);

}
.koyama-button-h:active::before,
.koyama-button-h:active::after {

 border: none;

 box-shadow: none;

}

---

まずは、そのままコピペして保存し、「ブラウザーのキャッシュをクリアー」を行ってから、実際のページに以下のような記述で呼び出してみてください。

記述例

<div class="koyama-button-r" style="padding: 0 4px 0 4px;">薄い赤のボタン</div>　<div class="koyama-button-g" style="padding: 0 4px 0 4px;">緑色のボタン</div>　<div class="koyama-button-b" style="padding: 0 4px 0 4px;">紫色のボタン</div>　<div class="koyama-button-c" style="padding: 0 4px 0 4px;">薄い青緑のボタン</div>　<div class="koyama-button-h" style="padding: 0 4px 0 4px;">灰色のボタン</div>

表示

薄い赤のボタン

　

緑色のボタン

　

紫色のボタン

　

薄い青緑のボタン

　

灰色のボタン

9. 「外部リンク」を新しいタブで表示する

展開する

MediaWikiでは「外部リンク」をクリックすると、現在表示されているタブが外部リンクに書き換わってしまいます。

これは著しく不便な仕様ですね。

そこで、「外部リンク」クリック時に新しいタブを開いて、そちらに表示するように変更しました。

変更方法

LocalSteeings.phpに次の記述を追記する。

$wgExternalLinkTarget = '_blank';

10. 外部サイトの画像ファイルを直接埋め込む

展開する

画像ファイルを表示するには、煩雑な作業が必要です。

まず、表示したいファイルをアップロードして、そのリンクを記載しなければなりません。

外部Webサイトにある画像を簡単に表示したいときは、以下の設定を行えばOK。

設定方法

LocalSteeings.phpに次の記述を追記する。

$wgAllowExternalImages=true;

使用方法

https://xxxxxx.xxx.jp/img/dummy.jpg

URLを書き込むだけで画像が表示される。

えー、これは簡単で良いね！さっそくやってみよう。→ こちらのWikiではこれを設定しています。

11. 直近の編集日時と編集者を表示する

展開する

「最終の編集者とその編集日時」をページに表示することができます。

MediaWikiでは、「履歴表示」タブを選択すれば、編集履歴の詳細が表示されます。

誰が、いつ、どのような変更を行ったのかが分かります。

また、最終編集日時は、ページ最下部に常に表示されています。

なので、「最終の編集者とその編集日時の表示」にはあまり意味はありませんが「まあ、こんな表示もできるよ」ということでご理解ください。

記述例

{{REVISIONYEAR}}年{{REVISIONMONTH1}}月{{REVISIONDAY}}日：直近編集者：{{REVISIONUSER}}：TimeStamp：{{REVISIONTIMESTAMP}}

表示例

2023年2月21日：直近編集者：Adminkoyama100：TimeStamp：20230221180402 ←(TimeStampは年月日時分秒の連続表示)

このような記述は、管理者以外の方には意味の無いことなので、目立つところには表示しない方が良いでしょう。

そこで、最下段に右寄せで記述する場合、以下のように記述します。

<div align="right">

{{REVISIONYEAR}}年{{REVISIONMONTH1}}月{{REVISIONDAY}}日：直近編集者：{{REVISIONUSER}}：TimeStamp：{{REVISIONTIMESTAMP}}

</div>

以下のように、文字色を「白」にするとスッキリします。

記述例

･<br>

<div align="right">

<span style="color:white;">

{{REVISIONYEAR}}年{{REVISIONMONTH1}}月{{REVISIONDAY}}日：直近編集者：{{REVISIONUSER}}<br>

TimeStamp：{{REVISIONTIMESTAMP}}

</span>

</div>

-------------------------

通常は非表示ですが、「･」のある右端部分をマウスでドラッグすると表示されます。

このページ最下段に「表示例」がありますのでご確認ください。

12. Tab機能を使う

展開する

Tab機能を使うと、表示の切り替えをすばやく行うことができて、長い文章を表示するときに便利です。

MediaWikiでは、「Tab」機能を追加するには「extension」です。

こちらから、MediaWikiのバージョンを確認し、それにあったものをダウンロードしましょう。

MediaWiki 1.36ですと「Tabs-REL1_36-7a7d7b9.tar.gz」ですね。

解凍してできた「Tabs」フォルダーごと、「extensions」フォルダーにFTP転送します。

そして、LocalSettings.php の最後に以下の記述を追記します。

wfLoadExtension( 'Tabs' );。

これでOKです。

13. ギャラリーの自動スライド機能CSS

展開する

ギャラリーで「mode="slideshow"」と書くと、スライドショー表示ができますが、このとき画像サイズを指定することはできません。

「スライドショー」なのですから、小さい表示ではさみしいということなのでしょう。

そこで、CSSを組み込んで、自動でスライドする機能を実現してみました。

「MediaWiki:Common.css」と入力して以下のコードをコピー&ペーストする。

/* CSS Sliding Image Gallery for Mediawiki
 * 自動スライド機能のCSS
 * @author: Unknown
 * current version crafted together by [[User:Christharp]] from several CSS sites.
 */

.wrapper {
  position: absolute;
  top: 1%;
  width: 6000px;
-webkit-animation: 30s credits linear infinite;
-moz-animation: 30s credits linear infinite;
-ms-animation:30s credits linear infinite;
-o-animation: 30s credits linear infinite;
animation: 30s credits linear infinite;
}

.wrapper img:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
    cursor: pointer;
}
@keyframes credits {
  0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -6000px;
 }
 
}

@-webkit-keyframes credits {
  0% {
   margin-left: 0px;
  }
100% {
    margin-left: -6000px;
  }

}
@-moz-keyframes credits {
  0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -6000px;
 }
 
}
@-o-keyframes credits {
  0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -6000px;
 }
 
}

/* 以下の記述を追加すると、マウスホーバーでスライドが停止する。 */
.wrapper:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    cursor: pointer;
}

/* 自動スライドのCSSはここまで */

「変更を保存」の後にブラウザーのキャッシュを消去する必要があります。

Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)。

その他のブラウザーの場合は調べてね。

表示速度を変更するには、「animation: 30s」となっている「30」→「60」にすると、遅くなります。

ギャラリー全体の長さは「6000px」に設定しています。これで25枚くらいまでのスライドショーができます。それ以上になると、最後の画像が表示されなくなります。

あまりたくさんの画像を並べないようにしましょう。

「40枚くらい並べたい」という場合には「6000px」の数値を大きくしてください(4～5個所ありますので全部修正します)。

あまり大きくすると、画像枚数が少ない場合に「空白部分」が長くなりますので注意。

14. mp3ファイルを再生可能とする設定方法

展開する

事前にアップロードした「mp3」ファイルをクリックするだけで再生可能とする設定方法です。

そこで、CSSを組み込んで、自動でスライドする機能を実現してみました。

---

質問・ご意見はこちら

お問い合わせ・ご意見のメールはこちら

上記リンクをクリックしてもメールソフトが起動しない場合は、以下のアドレスをコピーしてメールソフトの「宛先」に貼り付けてください。

　【担当者メールアドレス】wiki_admin@koyamadai100.jp

---

　 ←「12. 動画・音声を再生する」　　　 ←「13. コメント(編集時のみ表示)」　　　 ←「14. Marginを使った表示位置の微調整」　　　 ←「15. テンプレートの作成と利用」　　　 ←「16. ファイルアップロードと削除」

　 ↑ページトップへ　　　 ↑↑「メインページ」の「編集者のためのヘルプ」に戻る　　　 ↑↑「メインページ」トップに戻る

---

脚注：　

･

2023年2月21日：直近編集者：Adminkoyama100
TimeStamp：20230221180402