f:id:metaru333kitigai777:20161229230510g:plain

 

今回は記事本文の横幅がいくつなのか、簡単に調べる方法をご紹介します。

WordPressやはてなブログ、Ameba(アメーバブログ)、FC2ブログなどの各ブログサービスや各ポータルサイトで記事本文の横幅を知りたい時にご使用ください。

 

ブログ等で、記事本文の横幅のサイズを知りたくなる時があります。

写真などの画像を記事本文に貼り付ける時に、横幅のサイズをそろえて張り付けたいと思う時がります。

横幅のサイズを揃えて画像を貼り付けた方が、ブログやサイトの見栄えが良くなるからです。

しかし、横幅を測り方は意外と知られていません。

 

また、人気ブログや大手サイトでは、閲覧者の見栄えを考慮して記事本文の横幅を決めています。

それら人気サイトや、大手のポータルサイトなどが、記事本文の幅をどのようなサイズでサイト運営しているか、確認することもできます。

色々とブログの横幅を確認し、今後のブログ運営、サイト構築のお役に立てればと思います。

 

今回の方法は、全てのサイトで共通して利用できます。

WordPressの人気テーマであるStinger(スティンガー)、Affinger(アフィンガー)、賢威等でも利用可能です。

 

スポンサ-リンク

目次

 

クロームブラウザのデベロッパーツール

横幅を確認するために ブラウザはchrome(クローム)を使用します。

 

インターネットエクスプローラーしか使っていない方は、chromeブラウザを使用するようにしてください。

 

クロームブラウザにはデベロッパーツールがあり、今回はデベロッパーツールを使って横幅を確認します。

デベロッパーツールでは、モニター画面に表示されているサイトのHTMLやCSSスタイルの構成などを確認できるようになっています。

デベロッパーツールの詳細な使用方法については、詳しいサイトが多数存在するのでそちらを参照してください。

因みに、デベロッパーツールを使用すると、パソコン画面上で。iphoneで表示させた場合の画面や、ipadやAndroid(アンドロイド)などのタブレットで表示させた場合の画面を確認することができます。

わざわざiphoneを購入しなくても、パソコンの画面上でiphoneなどに表示させた場合の確認ができる大変便利なツールです。

 

横幅の知りたいサイト、ブログを画面に表示

f:id:metaru333kitigai777:20161230000134g:plain

 

記事本文の横幅を知りたいサイトをchromeのブラウザで画面に表示させます。

表示させたら、上記写真のように、なるべく文字だらけの部分を表示させるようにします。

本文だらけの部分を表示させた方が感覚的に作業がしやすいからです。

 

コンテキストメニューの呼び出し

f:id:metaru333kitigai777:20161230001208g:plain

 

マウスを右クリックさせると、コンテキストメニューが表示されます。

マウスを右クリックする場所は、画面上のどこでも大丈夫です。

 

デベロッパーツールの呼び出し

f:id:metaru333kitigai777:20161230001433g:plain

 

上記写真のコンテキストメニューの「検証」(赤枠部)をクリックすると、下記写真の写真に示すデベロッパーツール(赤枠部)が画面に表示されます。

 

f:id:metaru333kitigai777:20161230000156g:plain

 

デベロッパーツールでの確認方法

f:id:metaru333kitigai777:20161230000148g:plain

デベロッパーツールは、赤枠の部分をマウスでなぞるだけです。

もう一度言います。基本的にはマウスでなぞるだけです。

クリックなどする必要はありません。

赤枠の部分には表示されたサイトのHTMLが表示されています。

赤枠部分をマウスでなぞると、なぞった部分の命令文がどこに対応しているか分かるよう、青枠部分に色がつきます。青色であったり、オレンジであったり、緑であった、色がついてきます。

 

スポンサ-リンク

記事本文に色が付く部分を探す。

f:id:metaru333kitigai777:20161230002908g:plain

デベロッパーツールをマウスでなぞっていくと、上記写真のように記事本文の部分が青色で覆われる部分があります。その時に赤枠で囲んだ部分に記事本文(青く囲われた部分)のサイズが表示されます。

画面では 760×14541.9 となっています。

従い、760ピクセルが記事本文の横幅となります。

 

記事本文が青で覆われない場合

f:id:metaru333kitigai777:20161230003819g:plain

 

デベロッパーツールの赤枠部分をマウスでなぞっても、記事本文が青で覆われない場合があります。

赤枠で表示されているのはHTMLの一部分なので、上記写真に示す青枠部分のスクロールバーをマウスで移動させて、赤枠に表示されているHTMLを別の行の命令文が表示されるようにします。

そして、再度、赤枠部分をマウスでなぞってください。

 

デベロッパーツールの終了。

f:id:metaru333kitigai777:20161230004408g:plain

最後は×印をクリックしてデベロッパーツールを終了させてください。

これで作業完了です。

 

以上、ブログやwebサイトの記事本文の横幅の調べ方。人気サイトやブログの横幅を測定しよう。でした。