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 | レク.ログ

スポンサーリンク
スポンサーリンク
WordPressテーマ「MAG(TCD036)」

ピックアップ記事

  1. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  2. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  3. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  4. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  5. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…

関連記事

  1. original-share-button_ecmg
  2. facebook-page-plugin_ecmg
  3. switch-by-the-device_ecmg
  4. retina-weight-saving_ecmg
  5. widgetoon-js-count-jsoon_ecmg

    マーケティング

    Twitterのシェア数表示を復活!「widgetoon.js & count.jsoon」の登録方…

    簡単登録で、後はおまかせ!Twitterは以前仕様変更があり、公式…

  6. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

スポンサーリンク
魅力的なブログを、今すぐ作る。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. tcd-theme-user-review_ecmg
  2. retina_ecmg
  3. extension-tools-for-bloggers_ec
  4. adjust-the-button_ecmg
  5. todoist-extension_ecmg
  6. tcd-theme-selection_ecmg
  7. display-speed_ec
  8. todoist_ec
  9. theme-change_ecrt
  10. valuable-content-from-image_ec

ピックアップ記事

  1. child-theme_ecmg
  2. quicktag_ecmg
  3. todoist-routine_ecrt
  4. todoist-class_ecrt
  5. todoist-basic_ec
  6. jpg-gif-png_ecmg
  7. sns-count-cache_ecmg
  8. tcd-theme-widget_ecmg
  9. dash_ecmg
  10. phrase-express_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. 【Retinaディスプレイ対応3】ねえ・・どうする?widt…
  2. ほら、こんなに直感的。投稿記事の順番を並び替えるWordPr…
  3. きれいにしっかり画像圧縮。WordPressプラグインCom…
  4. 瞬間転送。写真もURLもポンっ!スマホとパソコン間のデータ移…
  5. 「Mailboxの代わりは・・?」代替メールアプリ最有力。S…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  3. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  4. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…
  5. 移動したいデスカ?TCDテーマMAGでダブルレクタングル広告…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…
  2. 目指せ軽量化!今から始める、WordPressサイトの表示ス…
  3. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…
  4. 最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くし…
  5. 【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  2. retina_ecmg

    ワードプレス

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

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  4. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  5. tcd-theme-selection_ecmg

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
PAGE TOP