browzer-extension_ec

ワードプレス

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

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

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

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

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

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

browzer-extension-ins1

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

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

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

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

スポンサーリンク

「Page Ruler」の導入

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

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

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

Page Ruler

extension_01

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

クリックで拡大

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. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  2. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  3. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  4. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…
  5. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…

関連記事

  1. customized-theme-update_ecmg-1-ps
  2. tcd-css-customize_ecmg

    ワードプレス

    実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

    初心者のうちに、実践で学ぶ。初心者にとって避けて通りたい・・避けた…

  3. dash_ecmg

    マネジメント

    あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方法と使い方

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

  4. sns-count-cache_ecmg2

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス。「ページを表示するたびに、今のシェア数…

  5. tcd-theme-options_ecmg

    ワードプレス

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

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

  6. facebook-app-id-app-secret-ecmg2

    マーケティング

    今すぐできる、開発者登録とFacebookアプリの作り方。App ID、App secretを取得し…

    こんなに簡単だったんですか。サイト運営をしていると、Faceboo…

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

特集記事

  1. extension-tools-for-bloggers_ec
  2. todoist-tips_ecmg
  3. retina_ecmg
  4. tcd-mag_ecmg-ps
  5. todoist_ec
  6. valuable-content-from-image_ec

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

todoist

ピックアップ記事

  1. dash_ecmg
  2. firefox-full-screen-capture-ecmg
  3. media-setting_ec
  4. gif-animation_ec
  5. unroll-me_ec
  6. child-theme_ecmg

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

tcd-mag

掘り出し記事

  1. retina-text-widget-ecmg
  2. LightShot-Screenpresso_ecmg
  3. backup-all-in-auto_ec
  4. favicon-generator_ecmg
  5. todoist-re-schedule_ec
  6. meta-seo-inspector_ecmg

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

retina-os-solution

ピックアップ記事

  1. simple-image-sizes_ec-ps
  2. tcd-theme-options_ecmg
  3. quicktag_ecmg
  4. jpg-gif-png_ecmg
  5. facebook-fast-display_ecmg
  6. todoist-productivity_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. blog-theme-mag_ecmg-ps
  3. simple-image-sizes_ec-ps
  4. dash_ecmg
  5. spark-tutorial-ecmg
  6. child-theme-mechanism_ecmg-ps

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. extension-tools-for-bloggers_ec
  2. retina_ecmg
  3. tcd-theme-user-review_ecmg
  4. tcd-mag_ecmg-ps
  5. adjust-the-button_ecmg
  6. improvement-flow_ecmg

ピックアップ記事

  1. quicktag_ecmg
  2. compress-jpeg-png-images-ecmg
  3. todoist-constitution_ec
  4. firefox-full-screen-capture-ecmg
  5. tcd-theme-options_ecmg
  6. facebook-page-plugin_ecmg-ps

最近の記事

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

    ワードプレス

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  3. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  4. theme-change_ecrt

    ワードプレス

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

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
PAGE TOP