ブログのコンテンツ幅を考える

無料ブログテーマ「Cocoon」のデザインを考える際、初期設定のコンテンツ幅が気になりました。

「Cocoon」の初期設定を見てみるとコンテンツ幅は800pxとなっています。

「simplicity2」などは680pxしかありませんでしたので、ずいぶん大きくなりました。

時代の推移と共にブログのコンテンツ幅は大きくなる傾向があります。

スマホでサイトが見られることが多くなっているので、コンテンツ幅はあまり気にしなくていいというのが結論です。

しかし、こだわりを持って見ると、けっこう面白い話題なのかもしれません。

このページでは、私が使用している各ブログのコンテンツ幅を比べ、ブログのコンテンツ幅の決め方を考えてみます。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

デフォルトのコンテンツ幅を比較

私が使用しているブログテーマのコンテンツ幅を比較してみます。

ここでの「コンテンツ幅」はサイドバーを含まないメイン領域です。

テーマ	コンテンツ幅	変更設定の有無
SANGO	712px	なし
JIN:R	740px	740pxと680pxの選択
STORK19	728px	なし
Arkhe	740px	あり
SWELL	812px	あり
Cocoon	800px	あり

以上のようにまちまちです。

「JIN:R」と「Arkhe」が740pxなのは偶然ではないと思います。

「Twenty Seventeen」も1カラムだと740pxになります。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定（絵文字読み込み・コード最適化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

コンテンツ幅740pxとは

「JIN:R」と「Arkhe」のサイドバーを含めた幅サイト幅を比較して見ます。

テーマ	サイドバー幅	サイト幅
JIN:R	320px	1200px
Arkhe	312px	1100px

サイドバーやサイト幅は差があります。

そこで、「740px」という幅が意味を持っていると推測できます。

私の考えでは、おそらく画面サイズに基づいていると思います。

スマホはフレキシブルに対応するのが当たり前なので、おそらくPCかタブレットの画面幅由来です。

そこで、「世界中のデスクトップ画面解像度の統計」「世界中のタブレット画面解像度の統計」を調べてみました。

世界中のデスクトップ画面解像度の統計（2022年6月～2023年6月）

出典：デスクトップ画面解像度：statcounter調べ

PCの場合横幅が問題なので「740px」はPC画面の解像度からの由来ではありません。

強いていえばシェア第2位の「1366×768（WXGA）」が関係があるかもしれないということです。

では、タブレットの解像度を見てみましょう。

世界中のタブレット画面解像度の統計（2022年6月〜2023年6月）

出典：タブレット画面解像度：statcounter調べ

タブレットを見るとピンときます。

スマホ対応のレスポンシブデザインを考える際、ブレイクポイント（画面幅でデザインを切り替えるポイント）を設定します。

スマホとスマホ以外（タブレット）を切り替えるブレイクポイントとして採用することが多いのが「768px」です。

このブレイクポイントで余白を付けて表示出来るコンテンツ幅が「740px」というわけです。

推測ですが、間違いないでしょう。

各テーマのブレイクポイントを検証すれば確証が強まるかもしれませんが、ここでは省きます。

コンテンツ幅の考え方だけは、おさえてください。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

コンテンツ幅728pxとは

「STORK19」のコンテンツ幅は「728px」です。

機能としては、変更することもできません。

この「728px」という幅はいったいどこから来るのでしょうか？

「728px」という幅でピンと来た方もいらっしゃるでしょう。

これは、「リーダーボード」というバナーの横幅です。

「リーダーボード」は「728×90pix」の大きさと定められています。

「STORK19」は「リーダーボード」 がきちんと入る幅で作られているのです。

ちなみにバナーはオンライン広告の業界団体IAB（Interactive Advertising Bureau）によって、国際標準が定められています。

IABガイドライン

IABガイドラインは以下です。

※「リーダーボード」 は、幅・高さ・アスペクト比が太字。

出典：「バナー」フリー百科事典　ウィキペディア日本語版（2023年7月30日取得）

また、「STORK19」や「Cocoon」はサイドバーが「ラージレクタングル」のサイズ「336pix」に設定されています。

「STORK19 」や「Cocoon」はアフィリエイトを強く意識した設計であることが、分かります。

まとめ

このページで見てきたように、ブログのコンテンツ幅は各ブログテーマの設計思想がよく表れています。

コンテンツ幅やサイト幅を変更出来る機能を搭載したテーマもありますが、変更する際には、バナーや閲覧されるブラウザーのことを考慮して変更しましょう。

時代が変われば設計思想も変化していき、コンテンツ幅やサイト幅も変わっていくでしょう。

長くブログを運営していく上では、「Arkhe」や「SWELL」、「Cocoon」のように、コンテンツ幅が変更出来ると便利だと思います。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション