[み]PukiWikiでブラウザの幅に合わせて画像サイズを変更させる方法

WordPressでは、だいぶ一般的になったレスポンシブデザインですが、PukiWikiでも、ブラウザの幅に合わせて画像を縮めたい!なんてことはよくあることと思います。

今回は、そのPukiWikiでブラウザの幅に合わせて画像サイズを変更させる方法を紹介します。

PukiWikiで画像サイズを指定する方法

PukiWikiでは、(当然ですが)画像サイズを指定することができます。

#ref(画像へのパス,300x200)
#ref(画像へのパス,80%)

わたくし、ここでちょっと勘違いしておりました。ここで100%を指定すれば、ブラウザに合わせて100%表示するもんだと思っていました。そんなわけないですねww

ブラウザに合わせてサイズを変えるには、当然CSSで指定します

当然ですが、CSSで指定しないとダメです。なので、 pukiwiki.css.php に次のコードを追加します。

div#body img {
    max-width: 100%;
}

これで、メイン部の画像はブラウザに合わせてサイズ変更されるようになりました。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup