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. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  2. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  3. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  4. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  5. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…

関連記事

  1. set-double-rectangle_ecmg
  2. screenpresso-capture-ecmg

    ワードプレス

    その瞬間をキャプチャー。Screenpressoでパソコン画面のスクリーンショットを撮る方法

    ピクセル単位でキレイにキャプチャー。前回の記事ではScreenpr…

  3. favicon-generator_ecmg

    ワードプレス

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

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

  4. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

  5. show-title-tag_ecmg

    マーケティング

    もっと・・見せてくれませんか?タブに隠れた見えないタイトル。Show Title Tagを使って全表…

    ちょっと見せてるぐらいなら・・全部見せてください。誤解しないで。ブ…

  6. chrome-full-screen-capture-ecmg

    ブログ

    ChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キャプチャー画像をダウ…

    上から下までの、全体像をゲット。たった今見ている「WEBページ全体…

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

特集記事

  1. tcd-theme-user-review_ecmg
  2. todoist-tips_ecmg
  3. theme-change_ecrt
  4. tcd-mag_ecmg-ps
  5. display-speed_ec
  6. tcd-theme-selection_ecmg-ps

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

todoist

人気記事

  1. chrome-full-screen-capture-ecmg
  2. screenpresso-initial-setting_ec
  3. child-theme_ecmg
  4. media-setting_ec
  5. jpg-gif-png_ecmg
  6. chrome-font_ecmg-1

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

tcd-mag

ピックアップ記事

  1. phrase-express_ecmg
  2. spark-tutorial-ecmg
  3. dash_ecmg
  4. todoist-class_ecrt
  5. firefox-full-screen-capture-ecmg
  6. todoist-constitution_ec

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

retina-os-solution

掘り出し記事

  1. screenpresso-initial-setting_ec
  2. browzer-extension_ec
  3. retina-text-widget-ecmg
  4. facebook-app-id-app-secret-ecmg2
  5. favicon-generator_ecmg
  6. retina-weight-saving_ecmg

ゆっくり、フシギな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. chrome-font_ecmg-1
  2. todoist-constitution_ec
  3. firefox-full-screen-capture-ecmg
  4. blog-theme-mag_ecmg-ps
  5. annotation-image-ecmg
  6. todoist-productivity_ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. valuable-content-from-image_ec
  2. retina_ecmg
  3. display-speed_ec
  4. todoist_ec
  5. tcd-mag_ecmg-ps
  6. tcd-theme-selection_ecmg-ps

人気記事

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

最近の記事

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

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  2. extension-tools-for-bloggers_ec

    ブログ

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

    マネジメント

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

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  5. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
PAGE TOP