How To

自分のブログの横幅を調べる方法【他のサイトの幅も簡単にわかる】

2020年3月20日

ブログの横幅を調べる

この記事では、自分のブログの横幅を調べる方法を紹介しています。

横幅がわかれば、自分のブログに挿入する画像の最適なサイズを知ることができますね。

また、この方法を使えば自分のブログだけでなく「ライバルサイト」や「見本にしたいサイト」の横幅を調べることもできます。

 

こんな人におすすめの記事です。

小豆
ブログに挿入する画像のサイズって、どれくらいにしたらいいの?
WordPressの設定を色々見てみたけど、どこにも自分のブログのサイズが載っていない。
簡単に横幅を調べる方法を誰か教えて。

Googleクロームを使用すればブログの横幅は簡単に調べられる

Googleクロームを使った「ブログの横幅の調べ方」を説明する前に、この記事内で言う【ブログの横幅】について解説しておきます。

この記事内で言う【ブログの横幅】とは【記事コンテンツエリアの幅】を指しています。

ブログの幅

大福
サイト全体の幅のことではないから注意してね。

では、早速方法を紹介していきますが、【Google Chrome ウェブブラウザ】を使用していない人はインストールを済ませておいてください、

 

Google Chrome ウェブブラウザのインストール方法

chromeのダウンロード

  1. Google Chromeにアクセス
  2. Chromeをダウンロードをクリック
  3. 同意してインストール → 実行
大福
インストールはもちろん無料だよ。

ブログの横幅を調べる手順をわかやすく解説

Google Chromeを使用して自分のブログの横幅を調べる手順は5ステップ。

一つずつわかりやすく解説していきます。

  1. Google Chromeで自分のブログを開く
  2. F12キーを押して、デベロッパーツールを開く
  3. 画面左端の矢印キーをクリック
  4. マウスを操作して記事コンテンツ部分が選択されたところでクリック
  5. 幅を確認する

 

step
1
Google Chromeで自分のブログを開く

ブログを開く

まずは、自分のブログ(横幅を調べたいサイト)をGoogle Chromeで開きます。

 

step
2
F12キーを押して、デベロッパーツールを開く

デベロッパーツール

キーボードのF12キーを押すと、デベロッパーツールが開きます。

 

step
3
画面左端の矢印キーをクリック

デベロッパーツール矢印をクリック

デベロッパーツール画面左上の矢印アイコンをクリック

 

step
4
マウスを操作して記事コンテンツ部分が選択されたところでクリック

記事コンテンツエリアを選択

マウスを画面上で動かすたびに選択部分に色が付きます。

上の画像のように「記事コンテンツエリア」が選択された時点でマウスを左クリックしてください。

 

step
5
幅を確認する

ブログ幅が表示

デベロッパーツール内に、選択した「記事コンテンツの幅」が表示されています。

730×7667 この大福日記の場合は、記事コンテンツエリアの幅が730pxだということがわかりました。

7667pxは縦の長さなので無視して大丈夫です。

挿入する画像はブログ幅に合わせよう

小豆
ブログに挿入する画像って、どれくらいの大きさがいいの?

こんな風に思ったことありませんか?

 

答えはズバリ、自分のブログ幅に合わせること。

挿入する画像は、ブログ幅に対して大きすぎても小さすぎてもダメなんです。

大きすぎる画像:無駄にファイルサイズが大きくなってしまい、サイトの読み込みスピードが落ちる

小さすぎる画像:見づらい画像になってしまう

 

ブログ幅より小さい画像

横幅200px

メモ

画像の横幅:200px

小豆
画像が小さくて見づらいなぁ。

 

ブログ幅より大きい画像

横幅1000pxの画像

メモ

画像の横幅:1000px

小豆
大きな画像を挿入しても、結局ブログ幅に収まるように自動的に縮小されるんだね。
そっ!だから大きい画像を入れてもファイルサイズの無駄になるだけなんだ。
大福

 

ブログ幅に合わせた画像

ブログ幅に合わせた画像

メモ

画像の横幅:730px

小豆
うん!しっくりくるね。

 

サイト全体の幅の調整の仕方

これまでは「記事コンテンツエリアの幅」について見てきました。

ブログの幅

使用しているワードプレステーマによっては、サイト全体の幅の調整も簡単にできます。

※サイト全体の幅を広くすると、連動して「記事コンテンツエリアの幅」も広がります。

 

たとえば僕が使っているワードプレス有料テーマ「AFFINGER5」。

サイト全体の幅設定

WordPressメニュー → AFFINGER5管理 → デザイン

PC閲覧時のサイト幅に任意の数値を入力して幅を自由に調整できます。

実際このブログもデフォルトの1060pxから1150pxにサイト幅を広げています。

 

小豆
他のテーマの場合はどうするの?

有料テーマの多くには、サイト幅の調整をできる設定が用意されていると思います。

🔎 使っているテーマ サイト幅 調整 などでググってみれば設定方法が見つかるはずです。

 

無料のテーマを使用している場合は、サイト幅を変更するためにはCSSを書き換える必要が出てくるはずです。

ただしCSSの書き換えは初心者には難易度が高く、失敗するとブログそのものが表示されなくなってしまう可能性があるのでおすすめしません。

 

  • 無料テーマから有料テーマへの変更を考えている
  • 有料テーマは具体的に何が良いのか知りたい

 

こんな人は、こちらの記事を参考にしてください。

レビュー
AFFINGERレビューTOP
【AFFINGER5レビュー】6つのココが気に入った!と2つの残念

続きを見る

 

まとめ:自分のブログ幅に合った画像を使おう

自分のブログの幅がわかれば、挿入する画像の適正なサイズがわかります。

適切な画像を使って、「見やすいブログ」を作りましょう。

 

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-How To

© 2020 大福日記