browzer-extension_ec

ワードプレス

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

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

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

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

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

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

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

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

そもそも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」という同じような機能を持つ拡張機能をここで紹介していましたが、現在はサービスの提供を終了してしまったようです。

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

・・と思ってしまいそうですが・・・そう割り切るわけにもいきません。

拡大表示の問題

ピンときた方も多いでしょう。『画像をクリックして、拡大表示させたい時』が問題です。

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

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

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

browzer-extension_new07

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

browzer-extension_new08

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

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

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

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

次の記事では、その仕掛けをお伝えします。(⇒NEXT!

1. サイト表示速度改善計画 2. 設定不要プラグインの導入
 display-speed_ec1_283  unveil-lazy-load_ec_283
3. メディア設定と画像サイズ 4. “WEBサイズマスター”へ
 media-setting_ec1_283  browzer-extension_ec_283
 あわせて読みたい記事

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

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  2. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  3. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本
  4. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  5. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

関連記事

  1. ad-placement-in-mag_ecmg
  2. retina-text-widget_ecrt
  3. pushbullet_ec

    マネジメント

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

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

  4. simple-image-sizes_ec-ps

    ワードプレス

    メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Si…

    挿入画像サイズ、もっと自由に選びたい。ハイどーも。お悩み相談室のコ…

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

特集記事

  1. tcd-theme-selection_ecmg-ps
  2. todoist_ec
  3. theme-change_ecrt
  4. todoist-extension_ecmg
  5. tcd-mag_ecmg-ps
  6. todoist-tips_ecmg

ピックアップ記事

  1. tcd-theme-options_ecmg
  2. todoist-basic_ec-ps
  3. sns-count-cache_ecmg
  4. todoist-constitution_ec
  5. like-button-card_ecmg-ps
  6. customized-theme-update_ecmg-1-ps

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

todoist

掘り出し記事

  1. todoist-design_ec
  2. retina-text-widget_ecrt
  3. feedly-count-problem_ecmg
  4. browzer-extension_ec

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. media-setting_ec
  2. tcd-theme-options_ecmg
  3. todoist-productivity_ecmg
  4. annotation-image_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. spark-tutorial-ecmg
  2. modern-dilemma-ecmg
  3. paradigm-shift-ecmg
  4. irreplaceable-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. modern-dilemma-ecmg
  2. reset-button_ecrt
  3. irreplaceable-ecmg
  4. blog-contents_ecrt
  1. extension-tools-for-bloggers_ec

    ブログ

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

    ワードプレス

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

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
  4. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  5. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
PAGE TOP