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. “知っているつもり”の拡張子、jpg gif png。画…
  2. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  3. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  4. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  5. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…

関連記事

  1. retina_ecmg
  2. display-speed_ec

    ワードプレス

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

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

  3. meta-seo-inspector_ecmg

    マーケティング

    基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO…

    せっかく設定したなら、チェックしよう。メタタイトル、メタディスクリ…

  4. description-video_ec
  5. quicktag_ecmg

    ワードプレス

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

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

  6. blog-contents_ecrt

    思考志向 - シコウシコウ

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

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

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

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

レク.サウンドラボ

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

特集記事

  1. display-speed_ec
  2. tcd-mag_ecmg
  3. todoist_ec
  4. business-books_ecmg
  5. tcd-theme-selection_ecmg
  6. retina_ecmg
  7. improvement-flow_ecmg
  8. tcd-theme-user-review_ecmg
  9. valuable-content-from-image_ec
  10. extension-tools-for-bloggers_ec

ピックアップ記事

  1. todoist-basic_ec
  2. restriction_ecmg
  3. facebook-page-plugin_ecmg-ps
  4. phrase-express_ecmg
  5. original-share-button_ecmg
  6. blog-contents_ecrt
  7. todoist-class_ecrt
  8. tcd-css-customize_ecmg
  9. blog-theme-mag_ecmg-ps
  10. chrome-font_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. タスクを完了させたくなる!? モチベーションアップに役立つT…
  2. 成長に欠かせない大切な秘訣。真面目な人ほど陥りやすい、”モヤ…
  3. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…
  4. 簡単に予定変更。Todoistで実現する、カレンダーだけでは…
  5. ほら、こんなに直感的。投稿記事の順番を並び替えるWordPr…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底…
  2. いつでもどこでも即タスク化。Todoistの便利すぎる拡張機…
  3. 目指せ軽量化!今から始める、WordPressサイトの表示ス…
  4. 【目的別】とっておきのWordPressテーマ比較。TCDテ…
  5. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  2. tcd-theme-user-review_ecmg

    ワードプレス

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

    ブログ

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

    マネジメント

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

    マネジメント

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