無料ブログテーマ「Cocoon」のデザインを考える際、初期設定のコンテンツ幅が気になりました。
「Cocoon」の初期設定を見てみるとコンテンツ幅は800pxとなっています。
「simplicity2」などは680pxしかありませんでしたので、ずいぶん大きくなりました。
時代の推移と共にブログのコンテンツ幅は大きくなる傾向があります。
スマホでサイトが見られることが多くなっているので、コンテンツ幅はあまり気にしなくていいというのが結論です。
しかし、こだわりを持って見ると、けっこう面白い話題なのかもしれません。
このページでは、私が使用している各ブログのコンテンツ幅を比べ、ブログのコンテンツ幅の決め方を考えてみます。
【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！
「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する
「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor
もくじ
デフォルトのコンテンツ幅を比較
私が使用しているブログテーマのコンテンツ幅を比較してみます。
ここでの「コンテンツ幅」はサイドバーを含まないメイン領域です。
| テーマ | コンテンツ幅 | 変更設定の有無 |
|---|---|---|
| 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テーマに、人気と高機能を誇る「 SWELL 」をオススメしています。
・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能 他、機能多数。
コンテンツ幅740pxとは
「JIN:R」と「Arkhe」のサイドバーを含めた幅サイト幅を比較して見ます。
サイドバーやサイト幅は差があります。
そこで、「740px」という幅が意味を持っていると推測できます。
私の考えでは、おそらく画面サイズに基づいていると思います。
スマホはフレキシブルに対応するのが当たり前なので、おそらくPCかタブレットの画面幅由来です。
そこで、「世界中のデスクトップ画面解像度の統計」「世界中のタブレット画面解像度の統計」を調べてみました。
世界中のデスクトップ画面解像度の統計（2022年6月～2023年6月）
| 順位 | 解像度 | シェア |
|---|---|---|
| 1 | 1920×1080 | 22.93% |
| 2 | 1366×768 | 15.28% |
| 3 | 1536×864 | 10.36% |
| 4 | 1440×900 | 6.8% |
| 5 | 1280×720 | 5.38% |
| 6 | 810×720 | 2.98% |
PCの場合横幅が問題なので「740px」はPC画面の解像度からの由来ではありません。
強いていえばシェア第2位の「1366×768（WXGA）」が関係があるかもしれないということです。
では、タブレットの解像度を見てみましょう。
世界中のタブレット画面解像度の統計（2022年6月〜2023年6月）
| 順位 | 解像度 | シェア |
|---|---|---|
| 1 | 768×1024 | 26.93% |
| 2 | 810×1080 | 9.3% |
| 3 | 800×1280 | 6.74% |
| 4 | 1280×800 | 6.69% |
| 5 | 820×1180 | 4.76% |
| 6 | 601×962 | 4.05% |
タブレットを見るとピンときます。
スマホ対応のレスポンシブデザインを考える際、ブレイクポイント（画面幅でデザインを切り替えるポイント）を設定します。
スマホとスマホ以外（タブレット）を切り替えるブレイクポイントとして採用することが多いのが「768px」です。
このブレイクポイントで余白を付けて表示出来るコンテンツ幅が「740px」というわけです。
推測ですが、間違いないでしょう。
各テーマのブレイクポイントを検証すれば確証が強まるかもしれませんが、ここでは省きます。
コンテンツ幅の考え方だけは、おさえてください。
【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！
「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する
「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor
コンテンツ幅728pxとは
「STORK19」のコンテンツ幅は「728px」です。
機能としては、変更することもできません。
この「728px」という幅はいったいどこから来るのでしょうか？
「728px」という幅でピンと来た方もいらっしゃるでしょう。
これは、「リーダーボード」というバナーの横幅です。
「リーダーボード」は「728×90pix」の大きさと定められています。
「STORK19」は「リーダーボード」 がきちんと入る幅で作られているのです。
ちなみにバナーはオンライン広告の業界団体IAB（Interactive Advertising Bureau）によって、国際標準が定められています。
IABガイドライン
IABガイドラインは以下です。
※「リーダーボード」 は、幅・高さ・アスペクト比が太字。
| アドユニット名 | 幅 / px | 高さ / px | アスペクト比 |
|---|---|---|---|
| レクタングルとポップアップ | |||
| ミディアムレクタングル | 300 | 250 | 6:5 |
スクエアポップアップ | 250 | 250 | 1:1 |
バーティカルレクタングル | 240 | 400 | 3:5 |
ラージレクタングル | 336 | 280 | 6:5 |
| レクタングル | 180 | 150 | 6:5 |
3:1 レクタングル | 300 | 100 | 3:1 |
ポップアンダー | 720 | 300 | 12:5 |
| バナーとボタン | |||
フルバナー | 468 | 60 | 78:10 |
ハーフバナー | 234 | 60 | 39:10 |
| マイクロバー | 88 | 31 | 88:31 |
ボタン1 | 120 | 90 | 4:3 |
| ボタン2 | 120 | 60 | 2:1 |
バーティカルバナー | 120 | 240 | 1:2 |
スクエアボタン | 125 | 125 | 1:1 |
| リーダーボード | 728 | 90 | 728:90 |
| スカイスクレイパー | |||
| ワイドスカイスクレイパー | 160 | 600 | 1:3.75 |
スカイスクレイパー | 120 | 600 | 1:5 |
| ハーフページ | 300 | 600 | 1:2 |
出典：「バナー」フリー百科事典 ウィキペディア日本語版（2023年7月30日取得）
また、「STORK19」や「Cocoon」はサイドバーが「ラージレクタングル」のサイズ「336pix」に設定されています。
「STORK19 」や「Cocoon」はアフィリエイトを強く意識した設計であることが、分かります。
まとめ
このページで見てきたように、ブログのコンテンツ幅は各ブログテーマの設計思想がよく表れています。
コンテンツ幅やサイト幅を変更出来る機能を搭載したテーマもありますが、変更する際には、バナーや閲覧されるブラウザーのことを考慮して変更しましょう。
時代が変われば設計思想も変化していき、コンテンツ幅やサイト幅も変わっていくでしょう。
長くブログを運営していく上では、「Arkhe」や「SWELL
」、「Cocoon」のように、コンテンツ幅が変更出来ると便利だと思います。
」
が安心です。初心者にも簡単インストールできます！
コメントを残す