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. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  2. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  3. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  4. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  5. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…

関連記事

  1. child-theme-mechanism_ecmg-ps

    ワードプレス

    WordPressで子テーマを作る際に知っておくべき仕組みと注意点

    知っとかないと、きっと困る。WordPressでカスタマイズをする…

  2. tcd-theme-widget_ecmg

    ワードプレス

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

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

  3. blog-theme-mag_ecmg-ps

    ワードプレス

    【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト…

    本当のことを話します。ワードプレスのブログテーマ【MAG】。このサ…

  4. facebook-page-plugin_ecmg-ps
  5. lightshot_ecmg

    WEBデザイン

    Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightSh…

    "気軽な"先輩をウマく使おう。それなりに融通のきくMacのスクリー…

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

特集記事

  1. todoist-tips_ecmg
  2. tcd-theme-selection_ecmg-ps
  3. tcd-mag_ecmg-ps
  4. display-speed_ec
  5. business-books_ecmg
  6. todoist-extension_ecmg

ピックアップ記事

  1. annotation-image_ecmg
  2. original-share-button_ecmg-ps
  3. customized-theme-update_ecmg-1-ps
  4. todoist-advanced_ec
  5. child-theme_ecmg
  6. jpg-gif-png_ecmg

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

todoist

掘り出し記事

  1. retina-text-widget_ecrt
  2. child-theme-mechanism_ecmg-ps
  3. todoist-share_ec
  4. retina-weight-saving_ecmg

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. todoist-class_ecrt
  2. compress-jpeg-png-images_ecrt
  3. simple-image-sizes_ec-ps
  4. phrase-express_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. blog-contents_ecrt
  2. restriction_ecmg-ps
  3. irreplaceable-ecmg
  4. reset-button_ecrt
  1. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  2. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  3. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
  4. improvement-flow_ecmg

    マネジメント

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

    ワードプレス

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