browzer-extension_ec

ワードプレス

なんでも計測!”WEBサイズマスター”へ。Chrome拡張「Page Ruler Redux」「View Image Info (properties)」の使い方

今自分が見ているページの「あの場所」や「あの画像」の、幅と高さってどのくらいのサイズなんでしょう?記事を書いて画像を挿入したい時、どのくらいのサイズにしてアップロードすればいいんでしょう?

え?とにかくデカい画像にしとけば、ピッタリフィットしてくれるんだよ

なんて曖昧なままにしてませんか?見た目では問題なくても、ある時気がつくかもしれません。

なんか… ボクのサイトってば、表示されるの遅い…?

あなたが『なんとなく貼り付けている』画像は、もしかするとページの表示速度に影響しているかもしれません。必要以上のサイズの画像が溜まっていくことで、自分のサイトが次第に太っていくかのように重くなる・・・

browzer-extension-ins1

サイトが重ーく、太っちゃう前にできる対策は?

画像って、どのくらいのサイズで貼り付ければいい?

そもそもWEB上に表示されているもののサイズって、どーやって調べるんじゃい

この機会に全部知っておきましょう。まずは、ブラウザ拡張機能を導入しておく必要があります。ここではGoogle Chromeの拡張機能を紹介しますが、ブラウザによって同じような拡張機能があるかもしれません。Chrome以外を利用している人は調べてみてください。

スポンサーリンク

「Page Ruler Redux」の導入

まずは汎用的なものから。ここでは無料拡張機能【Page Ruler Redux】を導入します。

Firefoxなら「MeasureIt 」などがあるようです。

下のリンクからChromeに追加してください。ブラウザ上にアイコンが追加されます。

Page Ruler Redux

extension_01

2018/7/26追記:以前は「Page Ruler」という拡張機能名でしたが、作成者が所有権を移譲し、「Page Ruler Redux」という名前になったようです。現在も「Page Ruler」という同名の拡張機能が存在しますが、インストール後のアイコンが違います。セキュリティ上の可能性など”個人的な判断”により、私の環境では今のところ、「Page Ruler Redux」を使用しています。どちらを利用するにせよ、自己責任のとれる範囲内でご利用ください。

以降使いたい時はこのアイコンをクリックすればいいんですが、例えばこんなことが出来るようになります。

クリックで拡大

extension_02

こんなかんじで、範囲指定した部分の「幅」「高さ」「ページ上での場所」がピクセル単位で確認できてしまいます。

さらに、左上の『<>』マークをクリックすると「エレメントモード」に切り替わり、マウスオーバーした部分の構成要素ごとに、自動で範囲選択してくれるようになるんです

エレメントモード時(クリックで拡大)

extension_03

extension_04

extension_05

これで、WEB上に表示されているもののサイズは簡単に調べることが出来ますね。

このツールを使って知っておきたいこと

ここで再認識しておきたいことは、
「記事ページ枠全体の幅」=「記事内容部分の幅」ではないということです。

下の図で見比べてみましょう。

クリックで拡大

browzer-extension_new01

browzer-extension_new02

上のようにエレメントモードで比較すると、「記事ページ枠全体の幅」=790px、「記事内容部分の幅」=690px。このように、若干マージンがあることが普通です。

この知識は「アップロードするべき画像サイズ」が分かるだけでなく、「ページ表示速度アップ」にも応用できるので、ツールを使えるようになるのと同時に覚えておいてください。

スポンサーリンク

「View Image Info (properties)」の導入

次に拡張機能【View Image Info (properties)】を導入します。これはWEB上にある画像の情報を調べることができる便利ツールです。

以前は「Image Properties Context Menu」という、より詳細な情報を表示してくれる拡張機能もあったんですが、サービスの提供が終了してしまったようです。

しかしView Image Infoも、今回の用途としては充分な機能を備えています。下のリンクからChromeに追加して下さい。こちらも無料です。

View Image Info

インストール後、画像を右クリックすると「View Image Info (properties)」メニューが表示されるようになり・・・

browzer-extension_new03

選択すると、画像情報がポップアップ表示されます。

browzer-extension_new04

各項目の意味(クリックで拡大)

browzer-extension_new05

つまりこの画像の場合、
アップロードした画像幅は1380px、実際に表示されている画像幅は690px
ということです。一方、タイトル上に表示されるアイキャッチ画像は790pxでした。

browzer-extension_new06

このツールを使って知っておきたいこと

こうしてこのWordPressテーマの場合を例に調べてみると、記事中に挿入する画像は690pxのものを、アイキャッチ用の画像は790pxのものをアップロードすれば十分だということに気づくことが出来ます。

過去に「Image Size Info」という同じような機能を持つ拡張機能をここで紹介していましたが、一時的にサービスの提供を終了した経緯もあり、今は「View Image Info (properties)」を紹介しています。

スポンサーリンク

拡大表示の問題

じゃあ、画像は全部、最小限にリサイズしてからアップロードすればいいんだね!

・・と思ってしまいそうですが・・・そう割り切るわけにもいきません。
ピンときた方もいるでしょう。『画像をクリックして、拡大表示させたい時』が問題です。

記事部分の幅にピッタリなサイズの画像をアップロードした場合、画像をクリックで拡大させようとしても、そもそもアップロードしたオリジナルサイズが同じ大きさなので、拡大表示されることはないんです。同じサイズのものが改めて表示されるだけ。

下の2つの画像をそれぞれクリックしてみてください。その意味が分かると思います。

記事幅ピッタリにリサイズしてからアップロードした画像

browzer-extension_new07

リサイズせずにアップロードした画像

browzer-extension_new08

リサイズしてからアップロードした画像は、クリックしても拡大されることはありません。画像内で注釈説明をしている時や、細かい部分を説明したい時、これでは伝わりづらくなります。

でもリサイズしないままだと画像は大きいので、やたらと貼り付けているとページを表示する時、モッサリと遅くなっていきます。

じゃあ、【ページの表示速度も考慮し、見やすく拡大表示も出来るようにする】にはどうしたらいいんでしょうか?

実は上の、リサイズせずにアップロードした画像にはその答えとなる仕掛けが施されています。次の記事では、その仕掛けをお伝えします。

画像サイズの悩みにサヨナラ。

 関連記事

スポンサーリンク

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. 子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と…
  2. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…
  3. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  4. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  5. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…

関連記事

  1. phrase-express_ecmg

    マネジメント

    魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「PhraseExpress」の設…

    「ズバッと入力」でラクしよう。HTMLの入力、メールの文言、署名・…

  2. theme-manual-update-ecmg
  3. lightshot_ecmg

    ブログ

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

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

  4. todoist-constitution_ec

    マネジメント

    ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

    ストレスフリーで効率的な下準備。いざ記事を書こうとしても、すぐに手…

  5. show-title-tag_ecmg

    マーケティング

    もっと・・見せてくれませんか?タブに隠れた見えないタイトル。Show Title Tagを使って全表…

    ちょっと見せてるぐらいなら・・全部見せてください。誤解しないで。ブ…

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

特集記事

  1. tcd-theme-selection_ecmg-ps
  2. todoist_ec
  3. display-speed_ec
  4. retina_ecmg
  5. adjust-the-button_ecmg
  6. extension-tools-for-bloggers_ec

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

todoist

人気記事

  1. chrome-font_ecmg-1
  2. screenpresso-initial-setting_ec
  3. todoist-basic_ec-ps
  4. child-theme_ecmg
  5. jpg-gif-png_ecmg
  6. child-theme-mechanism_ecmg-ps

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

tcd-mag

ピックアップ記事

  1. compress-jpeg-png-images-ecmg
  2. dash_ecmg
  3. facebook-fast-display_ecmg
  4. sns-count-cache_ecmg2
  5. media-setting_ec
  6. child-theme_ecmg

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

retina-os-solution

掘り出し記事

  1. favicon-generator_ecmg
  2. mergely-ecmg
  3. browzer-extension_ec
  4. facebook-app-id-app-secret-ecmg2
  5. feedly-count-problem_ecmg
  6. analytics-ip-filter-ecmg

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

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. todoist-routine_ecrt
  2. firefox-full-screen-capture-ecmg
  3. todoist-basic_ec-ps
  4. phrase-express_ecmg
  5. jpg-gif-png_ecmg
  6. sns-count-cache_ecmg2

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. extension-tools-for-bloggers_ec
  2. tcd-theme-selection_ecmg-ps
  3. improvement-flow_ecmg
  4. todoist-extension_ecmg
  5. theme-change_ecrt
  6. retina_ecmg

人気記事

  1. chrome-font_ecmg-1
  2. screenpresso-initial-setting_ec
  3. jpg-gif-png_ecmg
  4. compress-jpeg-png-images-ecmg
  5. chrome-full-screen-capture-ecmg
  6. media-setting_ec
  7. child-theme-mechanism_ecmg-ps

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. tcd-theme-selection_ecmg-ps

    ワードプレス

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

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  3. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  4. extension-tools-for-bloggers_ec

    ブログ

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

    ワードプレス

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