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. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…
  2. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  3. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  4. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  5. ChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キ…

関連記事

  1. child-theme_ecmg

    ワードプレス

    「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

    とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え…

  2. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  3. enlarge-image-ecmg
  4. child-theme-mechanism_ecmg-ps

    ワードプレス

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

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

  5. screenpresso-initial-setting_ec
  6. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!BackWPupプラグインで自動保存のタイマー設定

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

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

特集記事

  1. theme-change_ecrt
  2. todoist-tips_ecmg
  3. todoist-extension_ecmg
  4. todoist_ec
  5. display-speed_ec
  6. valuable-content-from-image_ec

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

todoist

人気記事

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

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

tcd-mag

ピックアップ記事

  1. widgetoon-js-count-jsoon_ecmg
  2. lightshot_ecmg
  3. phrase-express_ecmg
  4. chrome-font_ecmg-1
  5. spark-tutorial-ecmg
  6. todoist-productivity_ecmg

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

retina-os-solution

掘り出し記事

  1. retina-text-widget-ecmg
  2. todoist-share_ec
  3. retina-weight-saving_ecmg
  4. facebook-app-id-app-secret-ecmg2
  5. theme-manual-update-ecmg
  6. favicon-generator_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. tcd-css-customize_ecmg
  2. simple-image-sizes_ec-ps
  3. like-button-card_ecmg-ps
  4. todoist-routine_ecrt
  5. widgetoon-js-count-jsoon_ecmg
  6. annotation-image-ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. display-speed_ec
  2. todoist-extension_ecmg
  3. retina_ecmg
  4. todoist-tips_ecmg
  5. todoist_ec
  6. improvement-flow_ecmg

人気記事

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

最近の記事

  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. extension-tools-for-bloggers_ec

    ブログ

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

    ワードプレス

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  5. todoist-tips_ecmg

    マネジメント

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