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. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  2. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  3. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  4. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…
  5. ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方…

関連記事

  1. pushbullet_ec

    マネジメント

    瞬間転送・・写真もURLもポンっ!スマホとパソコン間のデータ移動方法。捗るPushbulletの使い…

    メールで送るより、ずっとお手軽。スマートフォンとパソコン間でデータ…

  2. lightshot_ecmg

    ブログ

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

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

  3. tcd-theme-user-review_ecmg

    ワードプレス

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

    基本機能と実際の使用感。WordPressは、初心者でも本格的なW…

  4. favicon-generator_ecmg

    ワードプレス

    ファビコン表示を一括設定。WordPressプラグイン「Favicon by RealFavicon…

    WEB上で見かける、ハイセンスなアイツ。名前は通称「ファビコン…

  5. child-theme-mechanism_ecmg-ps

    ワードプレス

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

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

  6. firefox-full-screen-capture-ecmg

    ブログ

    FirefoxでWEBページ全体をフルスクリーンショット!見ているページの全画面キャプチャー画像をダ…

    上から下までの、全体像をゲット。たった今見ている「WEBページ全体…

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

特集記事

  1. theme-change_ecrt
  2. tcd-mag_ecmg-ps
  3. tcd-theme-selection_ecmg-ps
  4. todoist-tips_ecmg
  5. display-speed_ec
  6. tcd-theme-user-review_ecmg

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

todoist

人気記事

  1. chrome-full-screen-capture-ecmg
  2. jpg-gif-png_ecmg
  3. media-setting_ec
  4. todoist-basic_ec-ps
  5. compress-jpeg-png-images-ecmg
  6. child-theme_ecmg

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

tcd-mag

ピックアップ記事

  1. chrome-font_ecmg-1
  2. phrase-express_ecmg
  3. lightshot_ecmg
  4. firefox-full-screen-capture-ecmg
  5. child-theme_ecmg
  6. gif-animation_ec

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

retina-os-solution

掘り出し記事

  1. mergely-ecmg
  2. meta-seo-inspector_ecmg
  3. todoist-design_ec
  4. retina-weight-saving_ecmg
  5. todoist-re-schedule_ec
  6. insert-card-link_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. widgetoon-js-count-jsoon_ecmg
  2. blog-theme-mag_ecmg-ps
  3. annotation-image-ecmg
  4. todoist-routine_ecrt
  5. facebook-fast-display_ecmg
  6. enlarge-image-ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. display-speed_ec
  2. adjust-the-button_ecmg
  3. tcd-mag_ecmg-ps
  4. extension-tools-for-bloggers_ec
  5. todoist-tips_ecmg
  6. retina_ecmg

人気記事

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

最近の記事

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

    ワードプレス

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

    ワードプレス

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

    ワードプレス

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

    マネジメント

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

    ブログ

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