retina-text-widget_ecrt

ワードプレス

【Retinaディスプレイ対応3】ねえ・・どうする?widthが効かない。テキストウィジェットでの画像幅サイズ指定方法

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

テキストウィジェットにオリジナルの画像リンクを貼って利用している人のほとんどは、画像を適切な大きさにリサイズしたものを貼っている、またはあまり気にせずざっくりと、少し大きめにリサイズしたものを貼っているのではないでしょうか。

前者の場合はもちろん、後者の場合も、貼り付けた画像は「実際に表示可能なウィジェット枠サイズ」にギュッと詰め込まれ、枠いっぱいに問題なく表示されます。これらの場合、結果的に思い通りに表示されているわけなので特に問題に感じることはないでしょう。

でも、アップロードしたオリジナル画像を「ウィジェット枠内で」小さく表示したい場合、困ることがあります。それは意外と知られていない、あるウィジェットの掟が存在するため。その掟によって時には…自由に画像サイズ指定が出来ないことがあるんです。

「せやねん。困ってんねん。いつも通りwidth=”●●”ってやってんねんけど…」

「え?ワタクシはそれでフツーに出来てザマスけど?」

この二人のような状況は、実は両方ともあり得ます。一体どんな違いがあるんでしょう。ここではその答えを知り、ウィジェット画像サイズを思い通りに表示させられるようになることを通して、Retinaディスプレイでも綺麗に表示させる方法を紹介します。

画像サイズ指定が必要となるシチュエーション

テキストウィジェット内では、いつも使うこんな「width指定」が効かない場合があります

<img src="http://..." width="150">
以下、この指定方法を【通常のwidth指定】と表記します。

え?小さく表示したいなら、小さくリサイズしてアップロードしたら解決でしょ?

その通りです。もちろんそれで思い通りのサイズを表示できるのですが、あるシチュエーションにおいては、アップロード画像は大きくし、表示だけを小さくしたい場合があります。それは…Retinaディスプレイに対応させ、Macなどでも綺麗に表示させたい時、です。

Retina対応に不可欠な画像幅指定

例えば幅150px(ピクセル)の画像を貼り付けてそのままの大きさで表示させた場合、Windowsでは違和感なく表示されるのですが、MacをはじめとするRetinaディスプレイではボヤケて見えてしまいます。Macをメインで利用している人にとってはちょっと残念ですよね。

Retinaディスプレイで元画像のクオリティーを再現したいなら、表示させたいサイズの2倍サイズ(300px)の画像をギュッ!と凝縮して表示する必要があります。だから、ウィジェットでも画像をギュッ!とさせる必要があるわけです。Retina対応についての詳細はこちらから

【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適切表示させる方法

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

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

「ああっ!!」とここでもう納得する人もいると思いますが、こんな感じで記述してあげればいいということです 

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

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

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

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

具体例を挙げましょう。このページでは、右カラムの一番上にあるウィジェットには「テキストウィジェット」を使っています。その中にはこんなGIFアニメーションが入っています 

レク.サウンドラボ

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

<div align="center">
<a href="http://reqlab.com/" target="_blank"><img src="http://requlog.com/wp-content/uploads/requlab.gif" alt="レク.サウンドラボ" style="width:150px;"></a>
</div>
<br />
<div align="center">
<p>音に、景色と”振る舞い”を。</p>
</div>

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

記事公開時はGIFアニメでしたが、現在は静止画像に切り替えています。

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

「で?ワタクシの【通常のwidth指定】が出来てる理由はなんザマスの?」

おっと、置いてけぼりでスミマセン。ザマス様が【通常のwidth指定】が出来ている理由。これも先に答えを挙げましょう。答えは、使用している画像形式(拡張子)によるです。

つまり使用したい画像形式によって、【通常のwidth指定】が可能になります。じゃあどんな時?ザマス様のためにまとめたので、ついでに知っておきましょう。

テキストウィジェットにおける画像形式の特徴

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

知っているつもりの拡張子、jpg gif png。画像形式による違いと特徴、ブログでの使い分け方

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における透過処理の有無は関係なく、同様の結果となります。

まとめ

ウィジェット内でのサイズ指定

GIFアニメ、PNG-24形式のみスタイル指定が必要

スタイル指定はいずれの画像形式に対しても有効

以上です。静止画像リンクを作る場合もやはり画像形式の使い分けをした方がいいでしょう。そしてRetinaディスプレイ対応の面で考えると、2倍サイズにしたいところですが….

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

今回をきっかけに、Retinaをはじめとする高解像度ディスプレイ対応にも挑戦してみてはいかがでしょうか?

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

【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetinaディスプレイ対応方法

PREV NEXT

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  2. Todoistとも連携。複数のメールアカウントを一括管理するMac・iPhone…
  3. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  4. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  5. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…

関連記事

  1. blog-contents_ecrt

    思考志向 - シコウシコウ

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

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

  2. tcd-theme-options_ecmg

    ワードプレス

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

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

  3. LightShot-Screenpresso_ec

    WEBデザイン

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

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

  4. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画

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

  5. todoist-constitution_ec

    マネジメント

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

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

  6. simple-image-sizes_ec-ps

    ワードプレス

    メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Si…

    挿入画像サイズ、もっと自由に選びたい。ハイ。お悩み相談室のコーナー…

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

特集記事

  1. todoist-extension_ecmg
  2. todoist-tips_ecmg
  3. business-books_ecmg
  4. theme-change_ecrt
  5. tcd-theme-user-review_ecmg
  6. tcd-mag_ecmg-ps

ピックアップ記事

  1. unroll-me_ec
  2. dash_ecmg
  3. todoist-advanced_ec
  4. chrome-font_ecmg
  5. sns-count-cache_ecmg
  6. todoist-routine_ecrt

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

todoist

掘り出し記事

  1. mailbox-goodbye-newapp_ec
  2. retina-os-solution_ecmg
  3. screenpresso-initial-setting_ec
  4. meta-seo-inspector_ecmg

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. todoist-basic_ec-ps
  2. gif-animation_ec
  3. todoist-productivity_ecmg
  4. like-button-card_ecmg-ps

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. enlarge-image-ecmg
  2. spark-tutorial-ecmg
  3. modern-dilemma-ecmg
  4. paradigm-shift-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. modern-dilemma-ecmg
  2. irreplaceable-ecmg
  3. blog-contents_ecrt
  4. restriction_ecmg-ps
  1. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  2. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
  3. tcd-theme-selection_ecmg-ps

    ワードプレス

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

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  5. adjust-the-button_ecmg

    ワードプレス

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