Fandom


ヘルプ
このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。
原文リンク未指定

ウィキアへのアクセスの過半数は、モバイルデバイスからであることをご存知でしたか?これは、モバイル上でうまく機能するように作られていないページがあなたのウィキアコミュニティにあった場合、コミュニティを見る人の半分以上がそのページをきちんと読むことができないということを意味していて、同時に全てのページがモバイルデバイスで綺麗に表示されることを確実にすることが、とても重要であることを示しています。これはメインページにも当てはまります。メインページがPC版でうまく機能するからといって、必ずしもモバイルでもうまく機能するとは限りません。つまり、たくさんの人が壊れたページに行き着いてしまう恐れがあるということです。

ページがモバイルデバイスから見やすくなっているか確認する 編集

ファイル:Mobile main page preview.png

メインページを含め、モバイル上でページがうまく表示されているかどうかを確認することは非常に簡単です。まず、メインページをクラシックエディタで編集したら、「モバイル」プレビューボタンを押します。

そうすると、そのページが一般的なモバイルデバイスでどのように表示されるか見ることができ、またメインページの中のどの部分がモバイルできちんと表示されるのかを確認することができます。この機能は WYSIWYG インターフェイスの都合上、ビジュアルエディタではご利用いただくことができませんので、ご了承ください。

もしビジュアルエディタを利用していたり、異なったサイズの画面でメインページがどのように表示されるのかを確認したい場合には、メジャーなブラウザでサポートされているモバイルエミュレーションをお試しください。特に Google Chrome には無料のモバイル・エミューレション・ツールがついており、デベロッパーコンソールからアクセスすることができます (Googleのモバイルエミュレーションについての英語での詳細はこちらをご覧ください)。Safari でも似た機能を使うことができます。

モバイルのメインページにおいてよくある問題 編集

モバイルのメインページでは、使いやすさに大きく影響する恐れがあり、よく発生しがちな問題が多々あります。こちらではそのようなの課題を一覧で掲載し、解決方法をご紹介します。

画像ヘッダ 編集

CSSを使って表示される画像ヘッダはモバイルでは表示されません。また[[ファイル:]]のタグで挿入されたヘッダはモバイル版でも表示されますが、サイズの関係で上手く表示されないことがよくあります。これを修正する最も簡単な方法は、画像ヘッダのすぐ下に、モバイル版だけで表示されPC版では現れない「モバイルヘッダ」を加えることです。例えば「Welcome」というCSSで入れられた画像ヘッダがあったとします。

CSSを使った画像ヘッダの例

HTML

<h2 title="Welcome" class="mainpage-header-welcome"></h2>

CSS

.mainpage-header-welcome {
    background: url("http://static.wikia.com/middleearthshadowofmordor7723/images/6/66/Mainpage-Header-Welcome.png") no-repeat scroll 0 0 transparent;
    border-bottom: medium none !important;
    height: 28px;
    margin: 21px auto 8px 12px !important;
    padding-bottom: 0px !important;
    width: 99%;
}

PC版で見るヘッダ

Shadow of Mordor image header

この画像ヘッダのすぐ下に隠しヘッダを入れることで、モバイルだけでテキストが表示されるようになります。

モバイルの画像ヘッダの例

HTML

<h2 title="Welcome" class="mainpage-header-welcome"></h2>
<h2 style="display:none;">Welcome</h2>

モバイル版で見るヘッダ

Shadow of Mordor image header mobile

h2タグに「display:none」のスタイルを加えることにより、ブラウザにこの部分をページで表示しないようにと教えています。ですがモバイル版では、スタイル ( と CSS ) をタグから外してしまうため、モバイルではこの部分が表示されることになります。これがヘッダをPC版では隠し、モバイルでは表示するとても簡単な方法です。[[ファイル:]]で挿入した画像ヘッダを使っている場合には、画像の代わりにこの CSS と隠しヘッダを使うことぜひ検討してみてください。PC版でもモバイル版でもヘッダがきちんと表示されることを確実にすることができます。

Polls編集

Polls are currently incompatible with mobile display. They can be seen successfully on a mobile device, but cannot be voted on at this time. Wikia's Product team is currently working on a solution to this, so please stay tuned!

Blog List編集

Though well organized on desktop, the current blog list module does not display well on mobile and it is difficult to differentiate one blog post from another. Blog lists on mobile also tend to take up an inordinate amount of screen real estate.

Optimizing blog list for mobile is fortunately a fairly easy fix. Limit the total number of blog posts to 3 and ensure the preview function for the blog post is removed. The headline will be displayed as linked text and the author of the blog post will still be displayed, making it easy for the reader to navigate regardless of their platform.

Take a look at this side-by-side example to see the difference:

Example of a Blog list optimized for mobile


HTML

<bloglist type=plain timestamp=true order=date category=News count=3>

Comparison


Sliders編集

Mobile Slider

A slider module as seen on mobile

On mobile, all four slider images will be cropped into much smaller square images, centered, and grouped into a square configuration.

Due to limited space in mobile devices, captions must be shortened to be seen, which means captions must be limited to 2-3 words. Note that text on slider images will also likely be lost due to the automatic cropping.

This is another feature the Wikia product team is currently working on. We hope to have a more mobile-friendly version of this feature in the future.

Tips, Tricks, & Technical Stuff編集

JavaScriptやCSSの使用 編集

一部のウィキアでは、JavaScript や CSS を使ってメインページの機能をカスタマイズしたり、既存の機能のスタイルを変更したりしています。そのようにカスタマイズされたものはPC版では上手く機能しますが、下記のように残念ながらモバイル版では表示されません。

詳細にカスタマイズされた機能のモバイル版、PC版での例

While there are workarounds for separating which elements are called to which environment, Wikia users are strongly encouraged to forego JavaScript and CSS implementation and convert existing JS/CSS-customized elements into more universal modules that are more likely to display easily on mobile and future iterations of the Wikia platform.


Larger, text-heavy elements編集

Push large elements/text-heavy elements to the bottom. General rule of thumb is the more users have to scroll down, the less likely they are to see the content.

Case Study編集

Check out the following before-and-after comparison of Monster Hunter Wiki on desktop and mobile for an example of what mobile optimization looks like in action.

Monster Hunter Desktop Before and After

Monster Hunter Mobile Before and After

Conclusion編集

The most important thing to keep in mind about mobile optimization and improving your main page is to stay flexible. There are many different ways to display content. If you find a way that looks good on desktop and mobile, you are improving the experience of the other half of your viewers. In the meantime, Wikia is working to offer our communities the best mobile experience possible. As the saying goes, there’s more than one way to skin a cat.

関連情報 編集

その他のヘルプとフィードバック 編集



特に記載のない限り、コミュニティのコンテンツはCC-BY-SA ライセンスの下で利用可能です。