【画像】画像の表示方法をカスタマイズする

この記事はウィキアの初心者向けに書かれています
ウィキペディアの記事Wikipedia:ja:Help:画像の表示の内容をすでに理解している読者にはほとんど役に立たない場合があります

前回の記事『【画像】記事に画像を掲載するもっともシンプルな方法』で、主にキーボードをだけを使って記事に画像へのリンクを貼るシンプルな方法を紹介しました。

こちらも今までブログで扱ってきた『【画像アップロード】思いつきで記事に画像を付け足す』と『【画像アップロード】昔ながらのスタンダードな方法』ですでに説明されている内容と少し被るところがありますが、もっとそちらのふたつのブログで説明されている方法よりも汎用的な例です。

カスタマイズ[]

画像を掲載するとき、サイズを調整したり、右によせたり、キャプションを載せたり、サムネイルにしたいと思うことがあると思います。さらに画像を張り替えたりしたいと思うことがあると思います。

『【画像アップロード】思いつきで記事に画像を付け足す』で画像を付け足すときに、マウスだけでサムネイルにしたり右に寄せたりキャプションをつけることができますが、何度も同じ作業を繰り返していると、編集画面上で直接キーボードだけで修正したい場合がありますね。

たとえば、画像にキャプションを付けたい場合は、縦棒を示すパイプ ( | ) を間に挟んでから、キャプションを入れます。さきほどの先頭にコロンを付けた場合とは違い、「編集ボタンの画像」という文字が、画像にマウスカーソルを載せたときにツールチップとして表示されます。

[[File:編集ボタン.jpg|編集ボタンの画像]]

これはHTMLの<img />タグのtitle属性と同じように機能します。 HTMLでは次のように表示されていることになります。

<img src="http://static1.wikia.nocookie.net/__cb20131110051052/ja_/images/c/c5/%E7%B7%A8%E9%9B%86%E3%83%9C%E3%82%BF%E3%83%B3.jpg" title="編集ボタンの画像" />

また、万一サーバに負荷がかかる、動作が重たい端末を使用しているときに、一時的に画像が表示されるまで時間がかかることがあります。そのときに、画像が表示されるまでに表示される機能があります。そのときは、パラメータとして "alt=" を追加します。

[[File:編集ボタン.jpg|編集ボタンの画像|alt=ここに編集ボタンが表示される]]

とすると次のようになりますが、とくに画像の表示に遅延がないときは「ここに編集ボタンが表示される」という文字列が見えないかもしれません。もしサーバや端末に負荷がかかっているときや何かしらのエラーが発生したときは、このような文字が代替テキストとして表示されます。

これはHTMLタグのalt属性に相当し、HTMLタグタグでは次のように表されます。

<img src="http://static1.wikia.nocookie.net/__cb20131110051052/ja_/images/c/c5/%E7%B7%A8%E9%9B%86%E3%83%9C%E3%82%BF%E3%83%B3.jpg" title="編集ボタンの画像" alt="っこに編集ボタンが表示される" />

このalt属性は、HTML仕様では必須とされていますが、ほとんどの人はつけていませんし、その記事をPCで閲覧するときに、altを付けないことによる悪影響は、ほとんどありません。

このaltで代替テキストを追加しておくことは、非常に少数の例ですが、Lynxのような画像を表示できないテキストブラウザを使用しているユーザーや画像を非表示にしているユーザーには優しい機能です。またiPhoneなどのようなスマートフォンでは、表示に時間がかかることがあるため、つけておくと画像が表示されるまで時間がかかって困っているスマートフォンユーザーにはありがたい機能にもなりえます。

画像を、右に寄せたい場合は、縦棒を示すパイプ ( | ) を間に挟んでから rightと入力します。

左文字列[[File:編集ボタン.jpg|right]]右文字列

するとこのように画像が右寄せになります。両端も文字列も無視して右に飛びます。

左文字列

右文字列

左文字列[[File:編集ボタン.jpg|center]]右文字列

にすると画像をセンタリング (中央揃え) することもできます。

左文字列

右文字列

左文字列[[File:編集ボタン.jpg|left]]右文字列

にすると左側の文字列を飛び越えて画面の左端に画像を表示します。

左文字列

右文字列

ここで、

左文字列[[File:アップロード記録.png|thumb|right|記録]]右文字列

とthumbを追加すると、右のようにサムネイルとして扱われて表示されます。ここでは、サムネイルとは何かをわかりやすく説明するために違う画像を使用します。

左文字列

右文字列

この場合は画像があまりにも小さいのでサムネイルにする必要はないのですが、「編集ボタン」という画像キャプションも一緒に表示されます。

このケースでは、そのファイルをアップロードしたユーザー名と虫眼鏡アイコンも表示されています。これは現在のところどこのウィキアでも thumb 指定をするとデフォルトで表示されます。これはウィキペディア日本語版には存在しないウィキア特有のデフォルト仕様です。このユーザー名を非表示にするには、原則として管理者権限が必要で、なおかつ、スタイルシートの知識が必要です。どこかのウィキアで非表示にしたい場合は、"thumb" 指定をやめるか、そのウィキアのコミュニティか管理者に非表示にするよう議論してみるか、あるいは、サムネイルを表示するようなテンプレートを作って代用するなどの方法があります。

ここで虫眼鏡アイコンをクリックすると、画像の情報ページにジャンプします。画像をクリックすると、その画像が実際のサイズで表示されます。

[[File:アップロード記録.png|right|記録|500px]]

のように500pxとピクセル数を指定すると、画像の横幅を500ピクセルにして表示します。

[[File:アップロード記録.png|right|記録|500px|100px]]

のように100pxとさらにピクセル数を追加指定すると、後から指定されたものが適用され、画像の横幅を100ピクセルにして表示します。

[[File:アップロード記録.png|right|記録|200x1000px]]

のようなピクセル指定をすると、画像の横幅と高さの上限値を指定できます。この例では横幅上限値を200px、高さ上限値を1000pxと、指定していますが、実際には高さは1000pxもないため実際にそのように表示されることはなく、また横幅上限を200pxと指定したため、それに合わせて高さも相対的に下がって小さく表示されています。

しかし、

[[File:編集ボタン.jpg|right|編集ボタン|900px]]

のように900pxと入力すると、実際にはそんなにサイズがない画像でもこのように大きく表示されます。

[[File:編集ボタン.jpg|right|クリックするとメインページへ|link=メインページ]]

のようにlink=と入力すると、そこに指定したページ (この例ではメインページ) へのリンクを画像に貼ることができます。

[[File:編集ボタン.jpg|right|クリックするとメインページへ|link=en:Main page]]

のように、言語間リンクを指定して英語版のメインページ (en:Main page)にリンクを貼ることもできます。

回りこみ解除[]

HTMLやCSSでは、画像を表示するときに、左の画像のように、回り込み (float) という現象があり、それを解除するためのテクニックがあります。これは、ウィキアでも同じようなテクニックがあります。これは、テンプレートによってHTMLよりも簡単になったテクニックがあります。これは、このコミュニティセントラルでは、{{Clear}}または{{-}}というテンプレートで実現できます。このテンプレートは、ほとんどのウィキアで用意されています。もしそのウィキアがかなり昔に作られたもので存在していない場合は、{{Clear}}をクリックして、ソースコードをコピーしてそのウィキアでも同じテンプレートを作ってみるといいでしょう。ウィキペディアでは{{-}}という記述で同じことをしていますが、ウィキアによっては、{{-}}を表組み用テンプレートのための別の用途で使っている場合もあるので、記事を保存する前にプレビューで事前に確認するか、そのテンプレートのドキュメントかソースコードをよく読んでそのテンプレートの動作を確認してから使用するように気をつけてください。

途中で回り込みをやめさせたいとき、その場所に {{Clear}} を配置します。例えばこのパラグラフと左の画像の直前に使用すると、このように、このパラグラフの文が上の画像File:自分のユーザーページへのリンク.pngに回りこむことなく、一旦改行されて文 (や画像) が、File:自分のユーザーページへのリンク.pngの真下にくるようになります。この {{Clear}}を使用した回りこみ解除テクニックは、画像だけでなく、目次、表、インフォボックステンプレートなどボックス形のものに対しても何でも応用が聞きます。とくに、ページの最上部で目次とインフォボックスや画像を同時に表示しているときにはとくにこのテクニックは役に立つことがあります。

まとめ[]

このように画像の表示方法をカスタマイズすることができます。さらに詳しいカスタマイズ方法はウィキペディアの記事Wikipedia:ja:Help:画像の表示にも掲載されているので、そちらをご覧ください。

次のブログ記事では、もっと楽しく画像を表示する方法を紹介します。これはギャラリーやメインページでも使われているスライダーというものです。今のところウィキペディアでは使われることがない機能です。

もし他のウィキアでメインページを編集できる状態ならば、見栄えをよくし、閲覧者をわくわくさせるためにも、スライダーを使うことをおすすめします。スライダーを導入すると、視覚的でわかりやすくなり、編集する側も楽しくなりますし、見ている側も楽しくなってきます。

【画像】画像の表示方法をカスタマイズする

目次

カスタマイズ[]

回りこみ解除[]

まとめ[]

関連項目[]

テンプレート[]

ウィキメディア[]