自分のブログを作成して、記事の中やサイドバー・ヘッダーフッターなどに入れる画像を準備しようと思ったときに、この場所・この画像のサイズ・横幅や高さは何ピクセルなんだろう?、、、と悩むことがあると思います。
スキマとかが気にならないなら、だいたいのサイズでアバウトに画像をいったん作っちゃって、後でアバウトに微調整して完了でもいいと思うんですが、やっぱりすぐパッと正確なピクセル単位でのサイズが分かるとうれしいし便利ですよね。
そこで今回は、ブラウザ上で表示しているブログやウェブサイトなどの画像のサイズや、記事やサイドバーなどの各スペースの横幅・高さを、ピクセル単位での調べ方をご紹介します。
目次
1,デベロッパーツール(開発者ツール)
少し難しそうに見えるけど一番カンタンな準備なしのサイズの調べ方
デベロッパーツールという名前から、いかにも難しそうなイメージが伝わってきますが、とりあえずパッと正確にページ内の狙った場所やパーツのピクセルサイズを調べることができる、ブラウザにもとから付いている機能です。
グーグルクロームなら【Dev tools】、ファイヤーフォックスなら【ウェブ開発ツール】、microsoft edgeなら【開発者ツール】、という名前の機能で使うことができます。
デベロッパーツールを使ったピクセルサイズの調べ方
1,まずページの中のサイズを調べたい場所・パーツを右クリックして、表示されるメニューの中から【検証】(もしくは調査)をクリックします。
2,ブラウザ画面の下か右に、HTMLコードがいっぱい表示されたスペースが出てきます。さきほど、右クリックで指定した場所のHTMLコードが、背景に色がついてマークされています。
3,背景に色がついてマークされているHTMLコードの上に、マウスカーソルを移動させて乗せると、ブラウザ画面にその場所・画像のピクセルサイズが表示されます。
ブラウザを開いていればできる方法なので、ページ閲覧中に準備なしで利用できてとても便利です。
拡張機能やアプリ・ソフトのインストールなども必要なにのでお手軽です♪
2,ブラウザに定規の拡張機能を追加する
ブラウザの拡張機能で画面の中で定規を使えるようにしてピクセルサイズを調べる
ブラウザに拡張機能(アドオン)で定規の機能を追加して、画面の中の好きな場所をピクセル単位でサイズを測ることができるようにします。
1のデベロッパーツールに比べて、拡張機能(アドオン)をブラウザに追加インストールする手間がかかってしまいますが、一度ピクセル定規の機能を追加しておけば、幅や画像サイズを調べたいときにワンクリックでピクセル単位の定規を画面上で使うことができて便利です。
実物の定規を使うような感覚で使えるので、使い方や理解もとてもカンタンで、サイズを調べることが頻繁にあるようなら、ぜひブラウザに追加しておいたほうがいいです。
グーグルクロームなら【Page Ruler Redux】、ファイヤーフォックスなら【Measure-it】などが、定規の拡張機能として有名で、定番人気です。
3,ウィンドウズの定規アプリをインストールしておく
ディスプレイ画面上のすべてをピクセルで測りたいならウィンドウズアプリで
1と2で紹介したピクセルサイズの調べ方は、あくまでもブラウザの中の表示内容の範囲の中で、横幅スペースや画像サイズを測る方法です。
ブログやウェブサイトの画像サイズや幅などのサイズ測定ならそれで足りると思いますが、ディスプレイ画面上のすべてのサイズを測れるようにしたいなら、ウィンドウズの定規アプリのインストールになります。
まとめ
正確なサイズを調べるときは【デベロッパーツール】で、アバウトにサイズ感を知りたいときは拡張機能の定規で、デベロッパーツールと拡張機能(アドオン)の定規の併用がおすすめです。
- ブログでお金を稼ぐ:ブログを収益化する仕組みとは
- 準備しておくもの3ステップ
- 初期にかかるお金(ざっくり目安)
- アフィリエイトブログの始め方:広告を貼り収益化スタートまでの全体の流れ
- ブログを設置するサーバーの準備
- 初心者におすすめのレンタルサーバー
- 初心者におすすめのドメイン管理会社
- スタートにおすすめのサーバー・ドメイン会社の組み合わせ
- ワードプレスでブログを作成
- 最初に使うおすすめ無料SEOテーマ
- 最初のおすすめプラグイン
- アクセス数を見られるようにする GoogleAnalytics [無料]
- グーグル検索に登録用にサイトマップxmlを送信する
- ブログ記事を作成
- ブログ記事の基本的な書き方
- ブログ記事作りに最低限必要な画像の準備
- メイン画像を無料で作る
- 画像サイズや横幅の調べ方
- 広告でブログを収益化
- 初心者スタートに役立つ おすすめ広告会社
- 収益が出やすい広告の種類
- クリックだけで収益が発生する広告
- アフィリエイト広告を使う
- 商品リンク【アマゾン】
- 商品リンク【楽天】
- 商品リンク【ヤフー】
- 商品リンク【カルディ】
- 商品リンク【成城石井】
- 商品リンク【生活の木】
- 商品リンク【ディーン&デルーカ】
- スタート地点までのカンタン準備ルート解説【格安ロリポップ編】
- スタート地点までのカンタン準備ルート解説【優秀エックスサーバー編】