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. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  2. ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文…
  3. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…
  4. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  5. 理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方

関連記事

  1. facebook-fast-display_ecmg
  2. enlarge-image-ecmg
  3. theme-manual-update-ecmg
  4. phrase-express_ecmg

    マネジメント

    魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「PhraseExpress」の設…

    「ズバッと入力」でラクしよう。HTMLの入力、メールの文言、署名・…

  5. set-double-rectangle_ecmg
  6. sns-count-cache_ecmg2

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス。「ページを表示するたびに、今のシェア数…

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

特集記事

  1. tcd-theme-user-review_ecmg
  2. todoist-tips_ecmg
  3. display-speed_ec
  4. improvement-flow_ecmg
  5. todoist_ec
  6. tcd-theme-selection_ecmg-ps

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

todoist

人気記事

  1. child-theme_ecmg
  2. chrome-font_ecmg-1
  3. screenpresso-initial-setting_ec
  4. child-theme-mechanism_ecmg-ps
  5. media-setting_ec
  6. chrome-full-screen-capture-ecmg

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

tcd-mag

ピックアップ記事

  1. chrome-font_ecmg-1
  2. enlarge-image-ecmg
  3. widgetoon-js-count-jsoon_ecmg
  4. todoist-constitution_ec
  5. chrome-full-screen-capture-ecmg
  6. jpg-gif-png_ecmg

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

retina-os-solution

掘り出し記事

  1. LightShot-Screenpresso_ecmg
  2. retina-os-solution_ecmg
  3. theme-manual-update-ecmg
  4. mailbox-goodbye-newapp_ec
  5. meta-seo-inspector_ecmg
  6. backup-all-in-auto_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. tcd-theme-options_ecmg
  2. like-button-card_ecmg-ps
  3. gif-animation_ec
  4. todoist-constitution_ec
  5. widgetoon-js-count-jsoon_ecmg
  6. spark-tutorial-ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. tcd-mag_ecmg-ps
  2. adjust-the-button_ecmg
  3. display-speed_ec
  4. retina_ecmg
  5. valuable-content-from-image_ec
  6. tcd-theme-user-review_ecmg

人気記事

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

最近の記事

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

    ワードプレス

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  3. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  4. tcd-mag_ecmg-ps

    ワードプレス

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

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
PAGE TOP