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. ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方…
  2. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  3. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…
  4. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…
  5. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…

関連記事

  1. intuitive-custom-post-order_ec

    ワードプレス

    ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIntuitive Cu…

    記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ…

  2. backwpup-japanese_ec

    ワードプレス

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

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

  3. screenpresso-initial-setting_ec
  4. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  5. phrase-express_ecmg

    マネジメント

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

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

  6. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

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

特集記事

  1. adjust-the-button_ecmg
  2. tcd-theme-selection_ecmg-ps
  3. todoist_ec
  4. valuable-content-from-image_ec
  5. theme-change_ecrt
  6. display-speed_ec

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

todoist

人気記事

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

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

tcd-mag

ピックアップ記事

  1. todoist-class_ecrt
  2. gif-animation_ec
  3. customized-theme-update_ecmg-1-ps
  4. phrase-express_ecmg
  5. facebook-fast-display_ecmg
  6. tcd-css-customize_ecmg

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

retina-os-solution

掘り出し記事

  1. insert-card-link_ecmg
  2. mergely-ecmg
  3. unroll-me_ec
  4. retina-os-solution_ecmg
  5. pushbullet_ec
  6. mailbox-goodbye-newapp_ec

ゆっくり、フシギな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. chrome-font_ecmg-1
  2. tcd-css-customize_ecmg
  3. facebook-page-plugin_ecmg-ps
  4. child-theme-mechanism_ecmg-ps
  5. todoist-productivity_ecmg
  6. firefox-full-screen-capture-ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. improvement-flow_ecmg
  2. tcd-mag_ecmg-ps
  3. tcd-theme-selection_ecmg-ps
  4. theme-change_ecrt
  5. todoist_ec
  6. tcd-theme-user-review_ecmg

人気記事

  1. chrome-full-screen-capture-ecmg
  2. todoist-basic_ec-ps
  3. child-theme-mechanism_ecmg-ps
  4. child-theme_ecmg
  5. compress-jpeg-png-images-ecmg
  6. screenpresso-initial-setting_ec
  7. media-setting_ec

最近の記事

  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. display-speed_ec

    ワードプレス

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

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
  4. tcd-mag_ecmg-ps

    ワードプレス

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

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
PAGE TOP