検索を切り替える
検索
メニューを切り替える
15
20
2
396
案内
メインページ
Euro Truck Simulator 2の概要
Euro Truck Simulator 2の基本
Euro Truck Simulator 2のデータ
Euro Truck Simulator 2のマップ
特別ページ
ファイルをアップロード
MediaWiki
MediaWikiについての備忘録
WikiMediaをはじめよう
最近の更新
おまかせ表示
MediaWikiについてのヘルプ
サイドバーの編集
通知
個人設定を切り替える
ログインしていません
編集を行うと、IPアドレスが公開されます。
user-interface-preferences
個人用ツール
アカウント作成
ログイン
MinervaNeueのスキンで左メニューを拡張するのソースを表示
提供:Euro Truck Simulator 2 FanWiki
表示
閲覧
ソースを閲覧
履歴表示
associated-pages
ページ
議論
その他の操作
←
MinervaNeueのスキンで左メニューを拡張する
あなたには「このページの編集」を行う権限がありません。理由は以下の通りです:
この操作は、以下のグループのいずれかに属する利用者のみが実行できます:
自動承認された利用者
、emailconfirmed。
ページの編集を始める前にメールアドレスの確認をする必要があります。
個人設定
でメールアドレスを設定し、確認を行ってください。
このページのソースの閲覧やコピーができます。
今は大モバイル時代。一人一モバイル時代でWEBサイトへのアクセスの8割はモバイルからという時代です。そのため、モバイルユーザーフレンドリーなWEBサイトが必要なわけなんですが、このMediaWikiはデフォルトではあまりモバイルにやさしくありません。特にMinervaNeueはモバイル特化用スキンと言いながらコンテンツは見やすくなっているもの、圧倒的にメニューが使いづらいです。デフォルトのメインメニューはホームしかありません。それは、ベクタースキンでも同じなのですが。というわけで、MinervaNeueスキンの左メニューを拡張する方法を探してきました。 <details open> <summary>== MinervaNeueスキンで左メニューを拡張する ==</summary> まず最初に、<code>MediaWiki:Mobile.js</code>この文字列をMediaWikiの検索ボックスに入力して検索します。<br> そうすると、MediaWiki内に存在しているMobile.jsというものを編集できます。私もこの辺はどうなっているのかあまり把握していません。直接ファイルを編集しているわけではなさそうなのですが、でもMediaWikiでMobile.jsというファイルをハンドルしているようにも考えられます。<br> とにかく、MediaWiki上でMobile.jsをソース編集する画面になりますので、そこで以下のコードを貼り付けます。<br> <pre> /* Add to MediaWiki:Mobile.js for custom Mobile Menu links for MW-1.40.1 with MobileFrontend and MinervaNeue Just replace span text and href to add links */ var timer = setInterval(function() { if ($('.menu ul:first').length) { console.log("mobile menu exists"); clearInterval(timer); $('.menu ul:first').after( '<ul class="level1"> \ <li> \ <a href="#" \ class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \ <span>Dropdown Links</span> \ </a> \ </li> \ <ul class ="level2"> \ <li> \ <a href="/wiki/Link_1" \ class="mw-ui-icon mw-ui-icon-before"> \ <span>Link 1</span> \ </a> \ </li> \ <li> \ <a href="/wiki/Link_2" \ class="mw-ui-icon mw-ui-icon-before"> \ <span>Link 2</span> \ </a> \ </li> \ <li> \ <a href="/wiki/Link_3" \ class="mw-ui-icon mw-ui-icon-before"> \ <span>Link 3</span> \ </a> \ </li> \ </ul> \ </ul> \ <ul> \ <li> \ <a href="/wiki/Second_Link" \ class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \ <span>Second Link</span> \ </a> \ </li> \ </ul>' ); $(".menu").find(".level2").hide(); // hide level2 until level1 is clicked $(".level1").click(function(event){ $(this).find(".level2").slideToggle(500); }); // if level1 is clicked, dropdown level2 } }, 100); // check every 100ms </pre> 上記のコードは、色々調べていたらたどりついた[https://qiita.com/mkuriki1990/items/a6073ceaf25ebc5cf08d ブログサイト]で見つけたものです。<br> 簡単な解説をすると、level1ブロックをクリックするとlevel2ブロックが見えるようになるというjavascriptコードです。<br> 私は、あまりjavascriptが好きではないので、いじりたくなかったのですがインデントが多くてコードを整理していたら、最初はコードが動作していたのに急に動作不良になりました。あれこれいじっていると原因がわかりました。<br> 改行をエスケープしている箇所がエラーになっているということがわかりました。というわけで<code>\</code>を消してしまっていたのですが、これは改行コードをエスケープする大事な記号なので、皆さんは間違って消さないように注意してください。私はこれがわかるまで2時間くらいかかりました。<br> もう、だいぶプログラミングの世界から遠ざかっていたのでエスケープという、プログラミングの基本的なことも忘れていたようです。とほほ。<br> あと注意すべきは、文字コードはUTF-8で改行はLFにすることです。一度サクラエディタ等のテキストエディタにこのコードを貼り付けて、編集してから<code>MediaWiki:Mobile.js</code>の編集フォームに入力すると間違いがないと思います。 以上が、モバイル用スキンMinervaNeueにおける左メニューの拡張でした。 </details> <details open> <summary>== 動作環境 ==</summary> * [https://www.mediawiki.org/wiki/Download/ja MediaWiki ver 1.40.1] * [https://www.mediawiki.org/wiki/Extension:MobileFrontend/ja Extension:MobileFrontend] * [https://www.mediawiki.org/wiki/Skin:Minerva%20Neue Skin:Minerva Neue] </details> <details open> <summary>== 参考資料 ==</summary> * [https://qiita.com/mkuriki1990/items/a6073ceaf25ebc5cf08d Qiita@mkuriki1990(村橋 究理基)] * [https://www.mediawiki.org/wiki/Topic:Vqy1kx6q4e0bzvyb Topic on Extension talk:MobileFrontend] </details> [[Category:MediaWikiについての備忘録]]
MinervaNeueのスキンで左メニューを拡張する
に戻る。
Cookieは私達のサービスを提供するのに役立ちます。このサービスを使用することにより、お客様はCookieの使用に同意するものとします。
詳細情報
OK