retina_ecmg

ワードプレス

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

WEBサイトのRetina対応、そろそろ始めたい?

あ、でも”初心者お断り”系のカスタマイズはちょっと…

画面が真っ白になるよーなアブナイことはしたくない

ここはひとつ、プラグインとかでサクッといっちゃいたいんすけど

OKです。みなさんお入りください。

必要とされていく、高解像度ディスプレイ対策

MacのRetinaディスプレイをはじめ、モニター環境はどんどん高解像度化し、画面も大きくなっています。普段Windows環境で更新している中でふと、MacやiPadで自分のサイトを覗いてみると…

ンン…!? 画像がボヤけとる… 歳とったなぁ…

retina_ins1

って、それは歳のせいなんかじゃあないんです。Windowsで閲覧する分には全く問題ない。でもMacで見るとやっぱり画像がボヤケて見える。ディスプレイの解像度の違いですね。そして今や、モバイルやタブレットさえも画面は大きくなってきている…

画像をRetina対応させたい!可愛い我が子のようなサイトを思うと、人様の前でキレイでいてほしい…そんな気持ちにもなりますよね。分かります。だってこんなに違うんですから… 

そんな、うっかり目が肥えちゃったあなたに送ります

Retinaディスプレイで綺麗に表示させるには?

Retinaディスプレイで元画像のクオリティーをそのまま再現するためには、単純に2倍のサイズの画像をアップロードすればいいのは有名な話です。

でも、そんな大きい画像をむやみにペタペタ貼っていたら、ページの読込みはどんどん遅くなっていきます。せっかく立ち寄ってくれた天使さんに、ページ表示されるまでいつまでもグルグルマークを眺めさせるわけにはいきません。

retina_ins2

WEBサイトの”場所別”Retina対応

でも難しいのはイヤ。サイトが真っ白になりそうなコワーいカスタマイズもイヤ。だから、私たちでも簡単にできる方法で解決しましょう。ここではブログサイトを例に、サイト内の構成場所ごとに分けて紹介していきます。

【事前知識】

1. 記事画像・アイキャッチ画像

2. ウィジェット画像

3. ロゴ画像

4. スライダー画像・サムネイル画像

WEBサイト全体をRetina対応させるために4箇所に分けて紹介していきますが、必要になるのは【画像形式の使い分け】と【2つのプラグイン】だけ。初心者にも優しい方法です。

使用しているテーマなどの環境によって結果が異なることもあると思います。あくまで実例として参考にしてください。私の使用テーマはTCDテーマです。

【事前知識】

画像形式の使い分け

Retina対応化するにあたっては、特に必要になる知識です。貼り付ける画像形式、なんとなーく統一してませんか?特に「PNG一択!いつだってフルサイズ挿入!」でオラオラ突っ走っているとしたら…イエローカード。

ブログレベルに必要なことだけをまとめています。まずはここから。

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


1. 記事画像・アイキャッチ画像

retina_01

Windowsでは軽い画像を表示させる

Windowsでは2倍サイズの画像を必要としません。つまりそのままだと、Windowsでの閲覧者にとっては「ただ重いページ」になってしまいます。Windowsでは従来通り、サクサク表示させましょう。プラグインひとつで。

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

Macで表示される重たい画像の圧縮

Windowsでサクサク。じゃあMacでは?やっぱりサクサク表示してもらわないと困ります。じゃあ、それも解決しましょう。こっちもプラグインひとつで。

【Retinaディスプレイ対応2】スリムで美しいブログを実現させる、画像圧縮と不可欠な知識


2. ウィジェット画像

retina_02

ウィジェット画像をギュッ!と凝縮表示

ウィジェットにだってリンク付き画像を表示させたい。じゃあアレでしょ?2倍サイズの画像をアップロードして「width」で半分の大きさに表示指定。そうすれば綺麗に表示され…アレ?

いつものwidth指定が…効かない!?

独自の世界観を持つウィジェットさん対策。

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


3. ロゴ画像

retina_03

サイトの顔だって凝縮表示

WEBサイトの顔とも言えるロゴ。ぼんやりしてる表情をシュッ!と引き締めてあげましょう 

requlog_logo

TCDテーマなら余裕の3ステップ!ついでに上のようなGIFアニメーションに挑戦してみるのもアリです。あわせて紹介中 

【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像の解像度アップ


4. スライダー画像・サムネイル画像

retina_04

スライダーもサムネイルも、まとめて綺麗に

残すところはあと2つ、スライダーと小さなサムネイル画像たち。まとめて美しくします!

【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう画像設定


以上、ブログサイトを例にRetinaディスプレイ対応方法を紹介してきました。デバイスの高解像度ディスプレイ化が進む中、対応済みのサイトは今後「差別化⇒一般化」していくのではないでしょうか。

この機会にぜひ、WEBサイトのクオリティーアップにチャレンジしてみてください。

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  2. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  3. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  4. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  5. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…

関連記事

  1. tcd-theme-selection_ecmg
  2. compress-jpeg-png-images_ecrt

    ワードプレス

    きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG ima…

    どうせ圧縮するなら、きれいにしっかり。WEBサイトで表示されている…

  3. LightShot-Screenpresso_ec

    WEBデザイン

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

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

  4. gif-animation_ec

    WEBデザイン

    ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

    色が変わっていく...目を引くサイトロゴを簡単に。休むことなく働き…

  5. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!「BackWPup」で丸投げタイマー設定

    一度設定したら、後はおまかせ!せっかく作った自分のWEBサイトが、…

  6. screenpresso-capture_ec

    ワードプレス

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

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

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

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

レク.サウンドラボ

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

特集記事

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

ピックアップ記事

  1. tcd-css-customize_ecmg
  2. reset-button_ecrt
  3. tcd-theme-widget_ecmg
  4. media-setting_ec
  5. dash_ecmg
  6. todoist-constitution_ec
  7. jpg-gif-png_ecmg
  8. child-theme_ecmg
  9. chrome-font_ecmg
  10. like-button-card_ecmg

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

business-books

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

todoist

おすすめ記事

  1. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  2. 成長に欠かせない大切な秘訣。真面目な人ほど陥りやすい、”モヤ…
  3. 瞬間転送。写真もURLもポンっ!スマホとパソコン間のデータ移…
  4. きれいにしっかり画像圧縮。WordPressプラグインCom…
  5. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…

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

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. 【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  4. 【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底…
  5. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. todoist_ec

    マネジメント

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

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  3. tcd-theme-user-review_ecmg

    ワードプレス

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

    ワードプレス

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

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
PAGE TOP