mediawiki/画像をボタンにする方法

提供: fukudat
移動: 案内検索

[[Image:画像ファイル名.png]]と記述すればmediawikiに画像を貼ることができるが,その画像部分は画像に関する記事のページへのリンクになってしまい,自由に他のページやURLにリンクを張ることができない.

mediawikiにはボタンとしてカッコいい画像を貼ることができないのかと思っていたが,実は方法があった.右の2番目のボタンはクリックするとTopページに飛ぶようになっている.

[[リンク先のページ|[[Image:画像ファイル名.png]] ]]でよければ簡単なのだが,もちろんこれでは上手くいかない.

以下のようにするとうまくいく.

<div style="position: relative; width: 60px; height: 60px; overflow: hidden;">
  <div style="position: absolute; top: 0px; left: 0px; font-size: 100px; overflow: hidden; line-height: 100px; z-index: 3" >
    [[Top|         ]]
  </div>
  <div style="position: absolute; top: 0px; left: 0px; z-index: 2">
    [[Image:home-button.png]]
  </div>
</div>

一応解説すると,

  • 1番目の<div style=...>でサイズを指定して表示領域を確保している.この場合,縦横 60px の範囲を作り,それを超えた部分は overflow: hidden によりクリップされる.
  • 2番目の<div style=...>で,クリックするとリンク先(この場合Topページ)に飛ぶ透明なリンクを作っている.フォントサイズを100pxにすることで1行で画像を間違いなくカバーできるようにしている.z-index: 3 にすることで,このレイヤが一番上に来るようにしている.透明なリンクには&nbps;を使っているが,全角スペースでもよいかも.
  • 3番目の<div style=...>ではz-index: 2 にすることでクリックできないレイヤに画像を表示している.

以上.

Help:画像の表示#画像リンクによると[[ファイル:home-button.png|link=http://www.fukudat.com/]] とう表記法により,画像のリンク先を指定できるとある.残念ながら,ここで使用しているMediawikiが古いためか,この表記法は使用できない.

個人用ツール
名前空間

変種
操作
案内
ツールボックス