retina-text-widget-ecmg

ワードプレス

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

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

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

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

関連記事

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

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

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

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

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

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

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

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

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

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

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

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

Logo_3sec_40f

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

<div align="center">
<img src="http://...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. ChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キ…
  4. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…
  5. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…

関連記事

  1. extension-tools-for-bloggers_ec

    ブログ

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

    知らなきゃもったいない。先日、とある交差点で信号待ちをしていた時の…

  2. LightShot-Screenpresso_ecmg

    WEBデザイン

    辿り着いたブログ用キャプチャーツール、LightShotとScreenpresso。機能比較と併用の…

    併用すれば、もっとハカドる。スクリーンショットに特化したキャプチャ…

  3. tcd-theme-options_ecmg

    ワードプレス

    理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方

    サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最…

  4. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計画/基本編

    あなたの●●●、ちょっと重すぎない? いえ、すみません。あなた…

  5. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】WordPressのスライダーやサムネイル画像を綺麗に表示させる設…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

  6. browzer-extension_ec

    ワードプレス

    なんでも計測!”WEBサイズマスター”へ。Chrome拡張「Page Ruler Redux」「Vi…

    自分のWEBサイトの幅、知ってますか?今自分が見ているページの「あ…

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

特集記事

  1. extension-tools-for-bloggers_ec
  2. adjust-the-button_ecmg
  3. todoist_ec
  4. tcd-theme-selection_ecmg-ps
  5. tcd-theme-user-review_ecmg
  6. display-speed_ec

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

todoist

人気記事

  1. media-setting_ec
  2. compress-jpeg-png-images-ecmg
  3. jpg-gif-png_ecmg
  4. child-theme-mechanism_ecmg-ps
  5. child-theme_ecmg
  6. chrome-full-screen-capture-ecmg

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

tcd-mag

ピックアップ記事

  1. gif-animation_ec
  2. chrome-font_ecmg
  3. todoist-advanced_ec
  4. todoist-constitution_ec
  5. todoist-routine_ecrt
  6. facebook-page-plugin_ecmg-ps

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

retina-os-solution

掘り出し記事

  1. analytics-ip-filter-ecmg
  2. retina-text-widget-ecmg
  3. retina-weight-saving_ecmg
  4. LightShot-Screenpresso_ecmg
  5. favicon-generator_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. quicktag_ecmg
  2. sns-count-cache_ecmg2
  3. todoist-basic_ec-ps
  4. todoist-advanced_ec
  5. firefox-full-screen-capture-ecmg
  6. media-setting_ec

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. display-speed_ec
  2. improvement-flow_ecmg
  3. tcd-mag_ecmg-ps
  4. tcd-theme-selection_ecmg-ps
  5. todoist-tips_ecmg
  6. valuable-content-from-image_ec

人気記事

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

最近の記事

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

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  2. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  3. extension-tools-for-bloggers_ec

    ブログ

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

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  5. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
PAGE TOP