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. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  2. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  3. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  4. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  5. アレ?Chromeの表示文字、汚なくなった!? キレイなフォントを1分で取り戻そ…

関連記事

  1. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

  2. adjust-the-button_ecmg

    ワードプレス

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

    もっと思い通りに。具体的な調整例。下の記事で紹介した「カッコ美しい…

  3. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー

    TCDテーマの、実際の使用感。幅広いユーザーニーズに応える『TCD…

  4. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット」の使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

  5. blog-contents_ecrt

    思考志向 - シコウシコウ

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

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

  6. screenpresso-capture_ec

    ワードプレス

    その瞬間をキャプチャー。Screenpressoでブログに必須のスクリーンショットを撮る方法

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

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

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. retina_ecmg
  2. tcd-theme-user-review_ecmg
  3. tcd-theme-selection_ecmg-ps
  4. extension-tools-for-bloggers_ec
  5. valuable-content-from-image_ec
  6. tcd-mag_ecmg-ps
  7. adjust-the-button_ecmg
  8. improvement-flow_ecmg

ピックアップ記事

  1. blog-theme-mag_ecmg-ps
  2. tcd-theme-widget_ecmg
  3. dash_ecmg
  4. original-share-button_ecmg-ps
  5. jpg-gif-png_ecmg
  6. widgetoon-js-count-jsoon_ecmg
  7. chrome-font_ecmg
  8. tcd-css-customize_ecmg

強みを見つけて、活かしていこう。

business-books

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

todoist

掘り出し記事

  1. feedly-count-problem_ecmg
  2. analytics-ip-filter_ecmg
  3. retina-text-widget_ecrt

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. chrome-font_ecmg
  2. customized-theme-update_ecmg-1-ps
  3. phrase-express_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | Blogger おすすめ書籍

「言葉にできる」は武器になる。 コンテンツの秘密-ぼくがジブリで考えたこと
プロフェッショナルは「ストーリー」で伝える 現代広告の心理技術101

Requ.log | おすすめエッセイ

言葉の贈り物 今日の人生

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. blog-contents_ecrt
  2. reset-button_ecrt
  3. restriction_ecmg-ps
  1. extension-tools-for-bloggers_ec

    ブログ

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

    ワードプレス

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

    ワードプレス

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

    ワードプレス

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

    マネジメント

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