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>

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

【通常の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 | レク.ログ

スポンサーリンク
スポンサーリンク
WordPressテーマ「MAG(TCD036)」

ピックアップ記事

  1. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  2. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  4. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  5. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

関連記事

  1. description-video_ec
  2. original-share-button_ecmg
  3. tcd-theme-options_ecmg

    ワードプレス

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

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

  4. backwpup-japanese_ec

    ワードプレス

    アップデートで英語化された!?BackWPupをサクッと日本語化する方法

    アップデートしたら、設定画面が英語化された!? 2…

  5. display-speed_ec

    ワードプレス

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

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

  6. widgetoon-js-count-jsoon_ecmg

    マーケティング

    Twitterのシェア数表示を復活!「widgetoon.js & count.jsoon」の登録方…

    簡単登録で、後はおまかせ!Twitterは以前仕様変更があり、公式…

スポンサーリンク
魅力的なブログを、今すぐ作る。
tcd-mag

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

レク.サウンドラボ

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

特集記事

  1. tcd-mag_ecmg
  2. todoist_ec
  3. retina_ecmg
  4. theme-change_ecrt
  5. valuable-content-from-image_ec
  6. extension-tools-for-bloggers_ec
  7. tcd-theme-selection_ecmg
  8. display-speed_ec
  9. todoist-extension_ecmg
  10. adjust-the-button_ecmg

ピックアップ記事

  1. todoist-routine_ecrt
  2. blog-contents_ecrt
  3. dash_ecmg
  4. widgetoon-js-count-jsoon_ecmg
  5. tcd-theme-options_ecmg
  6. facebook-page-plugin_ecmg
  7. tcd-css-customize_ecmg
  8. reset-button_ecrt
  9. original-share-button_ecmg
  10. todoist-class_ecrt

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

business-books

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

todoist

おすすめ記事

  1. Windows?Mac?なんでもゴザレ。スクリーンショットに…
  2. 基本的なSEOチェックに。DescriptionやOGPを確…
  3. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  4. WordPressサイトを丸ごとバックアップ!「BackWP…
  5. 自分のアクセス痕は残さない。アナリティクスのフィルタで自宅の…

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

tcd-mag

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

retina-os-solution

最近の記事

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

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. 【目的別】とっておきのWordPressテーマ比較。TCDテ…
  3. 最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くし…
  4. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…
  5. 『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテ…

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. tcd-theme-user-review_ecmg

    ワードプレス

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

    ワードプレス

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

    ブログ

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

    マネジメント

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

    マネジメント

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