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. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  2. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  3. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  4. Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャー…
  5. WordPressで子テーマを作る際に知っておくべき仕組みと注意点

関連記事

  1. customized-theme-update_ecmg-1-ps
  2. todoist-constitution_ec

    マネジメント

    ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

    ストレスフリーで効率的な下準備。いざ記事を書こうとしても、すぐに手…

  3. theme-change_ecrt

    ワードプレス

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

    TCDテーマからTCDテーマへ。魅了されてしまった。ついに乗り換え…

  4. blog-contents_ecrt

    思考志向 - シコウシコウ

    ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体

    いまだから、考えるべきこと。音楽制作をしていると、”自分の発するも…

  5. dash_ecmg

    マネジメント

    あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方法と使い方

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

  6. tcd-css-customize_ecmg

    ワードプレス

    実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

    初心者のうちに、実践で学ぶ。初心者にとって避けて通りたい・・避けた…

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

特集記事

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

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

todoist

ピックアップ記事

  1. original-share-button_ecmg-ps
  2. like-button-card_ecmg-ps
  3. dash_ecmg
  4. child-theme_ecmg
  5. child-theme-mechanism_ecmg-ps
  6. todoist-basic_ec-ps

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

tcd-mag

掘り出し記事

  1. pushbullet_ec
  2. feedly-count-problem_ecmg
  3. retina-text-widget-ecmg
  4. mailbox-goodbye-newapp_ec
  5. mergely-ecmg
  6. todoist-re-schedule_ec

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

retina-os-solution

ピックアップ記事

  1. facebook-page-plugin_ecmg-ps
  2. todoist-constitution_ec
  3. phrase-express_ecmg
  4. annotation-image-ecmg
  5. blog-theme-mag_ecmg-ps
  6. child-theme_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. spark-tutorial-ecmg
  2. todoist-constitution_ec
  3. blog-theme-mag_ecmg-ps
  4. firefox-full-screen-capture-ecmg
  5. child-theme_ecmg
  6. todoist-advanced_ec

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. display-speed_ec
  2. tcd-mag_ecmg-ps
  3. extension-tools-for-bloggers_ec
  4. todoist_ec
  5. theme-change_ecrt
  6. improvement-flow_ecmg

ピックアップ記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-font_ecmg
  3. annotation-image-ecmg
  4. lightshot_ecmg
  5. simple-image-sizes_ec-ps
  6. original-share-button_ecmg-ps

最近の記事

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  2. extension-tools-for-bloggers_ec

    ブログ

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

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  4. theme-change_ecrt

    ワードプレス

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

    マネジメント

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