retina-text-widget-ecmg

ワードプレス

【Retinaディスプレイ対応3】いつものwidthが効かない!? テキストウィジェット内での画像幅・サイズ指定方法

WordPressにデフォルトで備わっている「テキスト」ウィジェット。基本的なHTMLの記述ができるので、リンク付き画像を表示させたり、広告を表示させたり、幅広く利用できる”汎用ウィジェット”です。

そんなテキストウィジェット内に、オリジナルの画像リンクを貼って利用したい。でも、「表示させたい大きさぴったりにリサイズした画像」をアップロードし、そのまま貼っても、高解像度ディスプレイでは綺麗に表示されません。

例えばRetinaディスプレイで閲覧した時にも元画像のクオリティーを再現したいなら、表示させたい2倍のサイズの画像をギュッ!と凝縮して表示させる必要があります。だから、ウィジェット内でも画像をギュッ!と縮小表示させる必要があるわけですね。

関連記事

で、こんな風に「width」を付けて、サイズ指定しようとしても・・・

<img src="https://..." width="150">

・・・アレ?小さく表示されない?ナンデ?width指定が効いてない?

という残念な結果になります。heightを追加しても同じ。なぜでしょう?
実は意外と知られていない、【ウィジェットの掟】が存在するからなんです。

以下、この指定方法を「通常のwidth指定」と表記します。

テキストウィジェットで必ず有効な幅指定

通常のwidth指定が効かない場合はどうしたらいいんでしょう?「なぜ効かないのか」の理由は後回しにして先に答えを出します。スタイル指定をすればOK。つまり、こんな感じで記述してあげればいいということです。

<img src="https://..." style="width:150px;">

この指定方法であれば、画像を小さくすることも、逆に大きくすることも可能になります。

ただしウィジェット内では、アップロードしたオリジナル画像よりも大きく表示させるスタイル指定は出来ません。これもウィジェットならではの特徴として、ついでに覚えておきましょう。

ウィジェットでスタイル指定をするソース例

具体例を挙げます。例えばこんなGIFアニメーションのロゴを表示させたい場合。

Logo_3sec_40f

このコが入っているウィジェット内では、このように記述します。

<div align="center">
<img src="https://...gif" alt="レク.ログ" style="width:150px;">
</div>

余談ですが、画像や広告がウィジェット枠内の左に寄ってしまっているのをたまに見かけます。好みによるかもしれませんが、このように中寄せ指定もすると綺麗に収まるのでオススメです。

厳密にはclass指定で中寄せするとベターです。
TCDテーマであれば、<div class=”align1″></div>で挟めばOK。

「通常のwidth指定」が出来る場合と、出来ない場合

おれ、通常のwidth指定でうまいこと縮んでくれてるねんけど・・・?

実は、そんなことも起こります。もちろん、運やタイミングで左右されるわけではなくて、ちゃんと理由があります。答えは、「使用している画像形式(拡張子)による」、です。

つまり使用する画像形式によっては、通常のwidth指定が効くということ。独特な「ウィジェットの掟」を以下にまとめます。

「ウィジェットの掟」-画像形式ごとの特徴

「JPEG」「GIF」「PNG-8」「PNG-24」の4つの画像形式に分けてまとめています。
…??「PNG-8」?…「PNG-24」? という方はこちらを参照下さい。

JPEG

【通常のwidth指定】が可能

width=”150px” または width=”150″ の記述が可能

width=”50%” など%記述は不可

GIF

【通常のwidth指定】が可能

width=”150px” または width=”150″ の記述が可能

width=”50%” など%記述は不可

GIFアニメーションはスタイル指定が必要

PNG-8

【通常のwidth指定】が可能

width=”150px” または width=”150″ の記述が可能

width=”50%” など%記述は不可

PNG-24

【通常のwidth指定】が出来ない

必ずスタイル指定が必要

つまり、GIFアニメとPNG-24形式の場合のみ、スタイル指定が必要ということですね。

画像をPNGで書き出している場合、なんとなくPNG-24で書き出している人も多いと思います。「アレ?widthが効かない?」という場合の多くはそのパターンが多いのではないでしょうか。なお、GIFやPNGにおける透過処理の有無は関係なく、同様の結果となります

【まとめ】ウィジェット内でのサイズ指定

高解像度ディスプレイに対応させるためには、画像のファイルサイズは大きくなりがちです。静止画像でリンクを作る場合も、やはり画像形式の使い分けをした方がいいでしょう。

また、【記事がメインであること】【ウィジェットのせいでページ表示を遅延させない】観点から、バランスをとったサイジングに抑える、という方法も考えられます。

Retinaディスプレイ対応まとめ

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. WordPressで子テーマを作る際に知っておくべき仕組みと注意点
  2. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  3. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  4. 子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と…
  5. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…

関連記事

  1. theme-manual-update-ecmg
  2. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな簡単さ。小見出しのデザインを美しくしたい?ああ、例え…

  3. meta-seo-inspector_ecmg

    マーケティング

    基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO…

    せっかく設定したなら、チェックしよう。メタタイトル、メタディスクリ…

  4. enlarge-image-ecmg
  5. favicon-generator_ecmg

    ワードプレス

    ファビコン表示を一括設定。WordPressプラグイン「Favicon by RealFavicon…

    WEB上で見かける、ハイセンスなアイツ。名前は通称「ファビコン…

  6. ad-placement-in-mag_ecmg
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. tcd-theme-user-review_ecmg
  2. extension-tools-for-bloggers_ec
  3. valuable-content-from-image_ec
  4. display-speed_ec
  5. adjust-the-button_ecmg
  6. todoist-tips_ecmg

タスク管理で、自己管理。

todoist

人気記事

  1. compress-jpeg-png-images-ecmg
  2. child-theme_ecmg
  3. jpg-gif-png_ecmg
  4. media-setting_ec
  5. screenpresso-initial-setting_ec
  6. todoist-basic_ec-ps

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. blog-theme-mag_ecmg-ps
  2. phrase-express_ecmg
  3. quicktag_ecmg
  4. tcd-css-customize_ecmg
  5. compress-jpeg-png-images-ecmg
  6. todoist-class_ecrt

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. mailbox-goodbye-newapp_ec
  2. screenpresso-initial-setting_ec
  3. analytics-ip-filter-ecmg
  4. browzer-extension_ec
  5. meta-seo-inspector_ecmg
  6. todoist-re-schedule_ec

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. phrase-express_ecmg
  2. spark-tutorial-ecmg
  3. todoist-productivity_ecmg
  4. compress-jpeg-png-images-ecmg
  5. intuitive-custom-post-order_ec
  6. lightshot_ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. retina_ecmg
  2. todoist-extension_ecmg
  3. theme-change_ecrt
  4. valuable-content-from-image_ec
  5. display-speed_ec
  6. tcd-theme-selection_ecmg-ps

人気記事

  1. media-setting_ec
  2. child-theme_ecmg
  3. todoist-basic_ec-ps
  4. chrome-font_ecmg-1
  5. child-theme-mechanism_ecmg-ps
  6. jpg-gif-png_ecmg
  7. chrome-full-screen-capture-ecmg

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  2. improvement-flow_ecmg

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
  3. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  4. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  5. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
PAGE TOP