WordPressサイトのレイアウトカスタマイズ
ホームページ制作 京都 株式会社ファンフェアファンファーレでは、WordPressサイトのレイアウトカスタマイズなど、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPressテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。
このページでは、WordPressのカスタマイズサービスのうち、「WordPressサイトのレイアウトカスタマイズ」について掲載しております。WordPressサイトのレイアウトは、テーマに依存しており、「サイドバーありのレイアウトからサイドバーなしに変更したい」と思った場合でも、WordPressテーマ内の設定（カスタマイズ機能）では、レイアウトの変更・調整ができない場合があります。こうした場合、テーマ（テンプレート）をカスタマイズすることで異なるレイアウトを生成したり、現状のレイアウトを調整したりすることができます。
弊社では、WordPressテーマファイルの編集によるWordPressサイトのレイアウトカスタマイズをはじめ、お客さまのニーズに合わせたWordPressのカスタマイズを手がけております。レイアウトの調整や変更に対応しています。
「WordPressサイトの運営しているが、レイアウトを変更したい」
「WordPressのテーマの設定（カスタマイズ機能）では、うまくレイアウトの調整ができない」
「本文部分とサイドバー部分に2分割されたもの（2カラムレイアウト）を分割なしの全幅レイアウト（1カラムレイアウト）に変更して欲しい」
といったケースにおいて、WordPressテーマの編集によって、自由な形式でのレイアウトへとカスタマイズさせていただいております。
WordPressのカスタマイズのうち、「WordPressサイトのレイアウト」に関するカスタマイズについてご紹介します。
レイアウトカスタマイズ
WordPress（ワードプレス）を利用することにより、ホームページ（ウェブサイト）を構成する各ページである「コンテンツ作成」の手間は大幅に削減することができます。
コンテンツ制作などの容易性はありますが、WordPressサイトのレイアウトなどの設定は、WordPressテーマに依存しています。
WordPressサイトのレイアウトに関する大きな分類としては、サイドバーなしの全幅ページで構成される「ワンカラムレイアウト」や左右いずれかにサイドバーが存在する2カラムレイアウト、左右それぞれにサイドバーが存在する3カラムレイアウトなどがありますが、WordPressテーマによっては特殊なレイアウト構造をもつものもあります。
ホームページのレイアウトをカスタマイズする際には、WordPressテーマ内の設定によって行うか、もしくはテーマそのものをカスタマイズする必要があります。
WordPressサイト（ホームページ）のレイアウト
WordPressサイトの基本的なレイアウトは、上下にヘッダーエリア、フッターエリアを設置し、中央部のコンテンツエリアに関しては、1カラムレイアウト、2カラムレイアウト、3カラムレイアウトに分割されたサイトレイアウトとなります。
コンテンツエリアとは、一般的にそのページ独自の本文が記述された部分です。こうした本文部分が、本文のみの場合であれば1カラムレイアウト、その横にサイドバーが設置されていれば2カラムレイアウト、3カラムレイアウトといったように2分割、3分割されたレイアウトです。
1カラムレイアウト
1カラムレイアウトとは、本文部分のみの全幅表示レイアウトです。サイドバーはありません。
こうした全幅表示レイアウトを2つや3つに分割し、サイドバーを設置する修正にも対応しています。
2カラムレイアウト
2カラムレイアウトとは、本文部分と左右いずれか一つのサイドバーをもつ2分割されたレイアウトです。旧来からホームページでよく利用されています。
サイドバーを削除し、こうした2カラムレイアウトを分割なしの全幅表示レイアウトに変更する修正にも対応しています。
3カラムレイアウト
2カラムレイアウトとは、本文部分と一般的に左右それぞれ一つずつのサイドバーをもつ3分割されたレイアウトです。旧来からブログなどでよく利用されています。
サイドバーを削除し、こうした3カラムレイアウトを分割なしの全幅表示レイアウトに変更したり2分割のレイアウトに変更する修正にも対応しています。
特殊な構造のWordPressサイトレイアウトの場合は、別途お見積りさせていただいております。
WordPressテーマごとに制限されているレイアウト変更
WordPressサイトは、各投稿などのページの「コンテンツ部分」に関しては、投稿画面の「ビジュアルモード」感覚的に、そしてテキストモードで細かなHTMLマークアップを施すことができますが、サイト全体のレイアウトに関しては、テーマごとに制限があり、管理画面での操作では調整できない部分があります。
中には、投稿ページや固定ページに「テンプレート」が用意してあり、テンプレートを選択することでサイドバーの有無を変更できるタイプのものもあります。
こうした機能を持つWordPressテーマ以外は、原則としてテンプレートを追加するか、現在のテンプレートをカスタマイズしてレイアウト変更を行う必要があります。
レイアウトを構成する各部分の幅を調整
2カラムレイアウトのWordPressサイトを3カラムに変更するほどのカスタマイズではない場合でも、コンテンツ部分とサイトバーのバランスの調整といったような、WordPressサイトのレイアウトをカスタマイズするケースでも、WordPressテーマのCSSを編集して各部分の幅を調整していく必要があります。
こうしたコンテンツ部分とサイドバーの幅のバランス調整の際、設定を誤るとカラム落ちと呼ばれるレイアウト崩れが起こるケースがあります。
WordPressテーマによっては「テーマカスタマイズ」や
「ウィジェット機能」で操作が可能
WordPressテーマによっては「テーマカスタマイズ」の画面で、サイドバーのタイプや「パーツ」に関して、一部レイアウトを調整できるものがあります。
同様に、WordPressテーマによってはウィジェット機能で一部レイアウトの操作が可能な場合があります（ウィジェット機能は管理画面でのパーツ操作ができる機能です）。
テーマカスタマイズでは、テーマ作成者の実装したカスタマイズ範囲しか操作することはできないものの、場合によって十分に高い自由度を実装している場合もあります。
しかしながら、細かい部分のレイアウト設定やレイアウト調整に関しては、WordPressテーマのファイルをカスタマイズする必要が生じるケースがあります。
視線誘導の心理学と「F型」「Z型」パターンの科学的実装
Webマーケティングにおいて、ユーザーが画面をどのように見ているかを知ることは、レイアウト設計の第一歩です。アイトラッキング（視線計測）の研究により、テキスト主体のページでは「F型」、画像やビジュアル主体のページでは「Z型」に視線が動くことが証明されています。
私たちは、この法則をWordPressのテーマ構造に落とし込みます。例えば、ブログ記事やニュースリリース（テキスト主体）の場合、左上に重要な見出しを配置し、視線が右に流れた先に「結論」や「重要な画像」を置きます。そして、視線が左下に戻る位置に「次の見出し」を置く。このF型の動きに合わせて、適切なリズムでCTA（行動喚起バナー）を配置することで、ユーザーの無意識下に訴求します。
一方、トップページやランディングページ（ビジュアル主体）では、Z型の動きを意識します。左上のロゴから右上のヘッダーメニュー（お問い合わせボタン）、左下のキャッチコピー、そして右下のメインCTAへと、対角線上に視線を誘導するレイアウトを組みます。WordPressのテンプレートファイルにおいて、HTMLの記述順序とCSSによる配置を操作し、この心理的な動線を物理的なコードとして実装します。
CSS GridとFlexboxによる「流動的」かつ「堅牢」なグリッドシステム
技術的な側面、特にCSS（スタイルシート）の進化について触れます。かつて主流だった float プロパティによるレイアウト構築は、現在では推奨されません。トップエンジニアは、CSS Grid Layout（グリッドレイアウト）とFlexbox（フレックスボックス）を駆使して、柔軟かつ堅牢な画面構成を作ります。
特にCSS Gridは革命的です。画面を縦横の格子状（グリッド）に分割し、コンテンツをどのマス目に配置するかを座標で指定できます。これにより、「PCでは3カラム、タブレットでは変則2カラム、スマホでは1カラム」といった複雑なレスポンシブ対応を、HTML構造を汚すことなく、CSSだけで美しく実現できます。
また、gap プロパティを用いることで、要素間の余白を均一に保つことが容易になり、デザインの統一感（リズム）が生まれます。ソースコードの記述量が減るため、ファイルの軽量化にも繋がり、結果としてSEOの評価向上にも寄与します。
Core Web Vitalsの「CLS」をゼロにするレイアウト設計
Googleが掲げるWeb指標「Core Web Vitals」の中で、レイアウトに関わる最も重要な指標がCLS（Cumulative Layout Shift：累積レイアウトシフト）です。これは、ページ読み込み中にレイアウトがガクッとずれる現象を数値化したものです。
レイアウトがずれる原因の多くは、画像や広告、埋め込み動画のサイズが指定されていないことにあります。ブラウザは画像を読み込んで初めてその高さを知るため、読み込み完了後に下のコンテンツを押し下げてしまうのです。
私たちは、CSSの aspect-ratio プロパティを活用し、画像や動画が読み込まれる前から「その場所に必要なスペース」をあらかじめ確保する設計を行います。また、Webフォントの読み込みによる文字幅の変化でレイアウトが崩れないよう、フォントサイズや行間を厳密に計算します。岩のように動かない安定したレイアウトは、ユーザーに安心感を与え、Googleから高い評価を獲得します。
モバイルファーストインデックス時代の「親指ゾーン」設計
スマートフォンの普及により、レイアウト設計の基準は完全にモバイルへと移行しました。これを「モバイルファースト」と呼びますが、単にPCサイトをスマホ幅に縮めるだけでは不十分です。
私たちが意識するのは「親指ゾーン（Thumb Zone）」です。片手でスマホを持った際、親指が自然に届く範囲は画面の下半分に限られます。したがって、重要なナビゲーションやコンバージョンボタン（電話、予約、購入）は、画面上部ではなく下部に配置するレイアウトが理にかなっています。
WordPressのカスタマイズにおいては、PC表示ではヘッダーにあるメニューを、スマホ表示では画面下部に固定される「ボトムナビゲーション」に切り替える実装を行います。また、ハンバーガーメニューも右上ではなく、押しやすい右下に配置することもあります。指の可動域に合わせたUI設計が、ストレスのない操作感を生み出します。
カラム数の戦略的選択と「没入感」の演出
「サイドバーあり（2カラム）」と「サイドバーなし（1カラム）」、どちらが優れているかという議論がありますが、これは「目的」によって使い分けます。
ブログやメディアサイトのように、回遊性を高め、多くの記事を読ませたい場合は、サイドバーに人気記事やカテゴリー一覧を表示できる2カラムが有効です。ユーザーに「次に見るべきもの」を常に提示できるからです。
一方で、商品紹介ページやサービス申し込みページ（LP）では、1カラムを採用します。サイドバーという「逃げ道」を塞ぎ、中央のコンテンツだけに集中させることで、没入感を高めます。私たちは、WordPressの条件分岐タグ if ( is_single() ) や if ( is_page_template() ) を用いて、ページの種類やユーザーの目的に応じて、最適なカラム数を自動的に切り替えるシステムを構築します。
ホワイトスペース（余白）の魔術と情報の優先順位
プロのデザインと素人のデザインの決定的な違いは、「余白（マージン・パディング）」の使い方に現れます。情報は詰め込めば良いというものではありません。適切な余白があって初めて、情報のグループ分け（チャンキング）が認識され、優先順位が伝わります。
私たちは、8px または 10px を基準とした「ベースユニット」を設定し、すべての余白をその倍数で設計します。これにより、サイト全体に数学的な調和が生まれ、ユーザーは無意識のうちに「整っている」「信頼できる」と感じます。
また、重要なコンテンツの周りには意図的に広い余白（ネガティブスペース）を設けます。美術館で名画が広い壁に一枚だけ飾られているのと同じ効果で、余白が視線を中心のコンテンツに集める役割を果たします。CSSの clamp() 関数などを用いて、画面サイズに応じて余白自体も可変させる高度な調整を行います。
body_class フィルタフックによる動的レイアウト制御
WordPressには、<body> タグに自動的にクラス名を付与する body_class() という関数があります。トップエンジニアは、この関数をフック（拡張）して、レイアウト制御に利用します。
例えば、特定のカテゴリーの記事だけ背景色を変えたい、あるいは特定のタグが付いている記事だけコンテンツ幅を広げたいといった場合、条件分岐のプログラムを書いて独自のクラス名を <body> に追加します。
CSS側では .wide-layout .content { max-width: 1200px; } のように記述しておけば、管理画面での操作（カテゴリー選択やタグ付け）だけで、動的にレイアウトを変化させることができます。運用者がコードを触ることなく、ページごとに最適な見せ方を選択できる柔軟性を提供します。
ブロックエディタ（Gutenberg）とフルサイト編集（FSE）への対応
WordPressの標準エディタであるGutenberg（ブロックエディタ）は、記事本文だけでなく、サイト全体のレイアウトをブロックの組み合わせで作る「フルサイト編集（FSE）」へと進化しています。
私たちは、独自のブロックパターンや theme.json ファイルを設計し、クライアント様が管理画面から直感的にレイアウトを調整できる環境を整えます。「カラムブロック」や「グループブロック」にあらかじめ推奨されるスタイル（余白や配色）を定義しておくことで、誰が編集してもデザイン崩れが起きない、堅牢なガイドラインをシステムに組み込みます。
これにより、開発時はプロのコードで細部まで作り込みつつ、納品後はクライアント様の手で自由にランディングページのような複雑なレイアウトを作成・複製できるようになります。
ランディングページ（LP）特化型レイアウトの実装
Web広告の受け皿となるランディングページ（LP）は、通常のページとは全く異なるレイアウト思想で作られます。ヘッダーのナビゲーションを削除し、フッターのリンクも極力減らし、縦長の1ページで完結させる構成です。
既存のWordPressテーマの中に、このLP専用のレイアウトテンプレート（page-lp.php など）を追加します。ヘッダーやフッターを読み込む get_header() get_footer() 関数を、LP専用のもの（get_header(‘lp’)）に差し替え、ロゴとコンバージョンボタンだけのシンプルなヘッダーを表示させます。
これにより、WordPressという一つのドメインの中で、SEO用のブログメディアと、広告用のLPを同居させることが可能になります。データの管理が一元化され、事業の運用効率が飛躍的に向上します。
レスポンシブ画像と srcset 属性によるパフォーマンス最適化
レイアウトの中に配置される「画像」の扱いも重要です。PC用の高解像度画像をそのままスマホで読み込ませるのは、通信の無駄であり、表示速度を低下させます。
WordPressは標準で srcset 属性を出力し、デバイス幅に応じたサイズの画像をブラウザに選択させますが、レイアウトによっては標準設定では不十分な場合があります。例えば、PCでは3カラム（画像は小さい）だが、スマホでは1カラム（画像は大きい）になる場合、sizes 属性を適切に書き換える必要があります。
私たちは wp_calculate_image_sizes フィルタフックを使用して、レイアウトの変更に合わせて画像の読み込みサイズを最適化します。必要な画質を保ちつつ、データ転送量を最小限に抑える技術的な配慮です。
アクセシビリティ（a11y）とDOM順序の整合性
視覚的なレイアウト（見た目）と、HTMLの構造（DOM順序）は、必ずしも一致しないことがあります。CSS GridやFlexboxを使えば、HTML上は「下」にある要素を、見た目上は「上」に表示させることが可能です。
しかし、スクリーンリーダー（音声読み上げソフト）を利用するユーザーや、キーボード操作でタブ移動をするユーザーにとっては、この不一致が混乱を招きます。見た目は上にあるのに、タブキーを押すとフォーカスが下に飛んでしまう、といった現象です。
プロフェッショナルな実装では、視覚的な順序と論理的な順序（読み上げ順序）が乖離しないよう細心の注意を払います。やむを得ず順序を変える場合は、aria-label や tabindex などを適切に設定し、すべてのユーザーが等しく情報にアクセスできるユニバーサルなレイアウトを目指します。
コンテンツ幅（Content Width）と可読性の科学
文章を読む際の「一行の文字数」は、可読性に大きく影響します。一般的に、一行あたり35文字から40文字程度が最も読みやすいとされています。
画面幅がいっぱいに広がるリキッドレイアウトは迫力がありますが、文章エリアまで画面端まで広がってしまうと、視線の移動距離が長くなり、ユーザーは疲れてしまいます。
私たちは、画像や動画は画面幅いっぱいに広げつつ（フルブリード）、文章エリアだけは適切な幅（例えば700px〜800px）に制限する「コンテナクエリ」的なレイアウト設計を行います。読むストレスを極限まで減らすことが、精読率を高め、結果としてコンバージョンへの到達率を高めます。
スクロール連動型レイアウト（パララックス・アニメーション）
ユーザーのスクロール動作に合わせて背景が動くパララックス（視差効果）や、要素がふわっと浮き上がるアニメーションは、サイトに奥行きとリッチな印象を与えます。
しかし、過剰な演出は「酔い」を誘発したり、メインコンテンツの閲覧を妨げたりします。また、JavaScriptによる重い処理は、スマホのバッテリーを消耗させます。
ブラウザのGPU（グラフィック処理機能）を活用するCSSアニメーションや、軽量なライブラリ（Intersection Observer APIなど）を使用して、負荷の少ない演出を実装します。「動き」はあくまでコンテンツを引き立てるためのスパイスであり、主役ではありません。ブランドの世界観を表現しつつ、ユーザビリティを損なわないギリギリのラインを見極めることが重要です。
コンテンツ部分やサイドバー部分、フッターエリアなどの各パーツの調整
WordPressは、ページや投稿の作成には非常に便利で、コンテンツの配信には強みを持っていますが、WordPressサイトのレイアウト、各パーツの位置調整などは管理画面で操作できない場合があり、コンテンツ部分やサイドバー部分、ヘッダーエリア、フッターエリアなどの各パーツに対して、「この部分をちょっとだけ動かしたい」といった場合でも、本格的なサイトレイアウト調整やウィジェット機能の調整・追加には、WordPressテーマファイルの編集が必要になります。
- WordPressサイトの「トップページ」カスタマイズ
- WordPressサイトの「投稿ページ」・「固定ページ」カスタマイズ
- WordPressサイトの「カテゴリページ」・「タグページ」カスタマイズ
- WordPressサイトの「サイドバー」カスタマイズ
- WordPressサイトの「ヘッダー」・「フッター」カスタマイズ
レイアウトのカスタマイズは、ホームページという「店舗」の「内装設計」と「導線設計」そのものです。
商品がどこに置かれているか、通路の幅は適切か、照明は効果的か。これら全てが売上に直結するように、Webサイトのレイアウトも、1ピクセルの違いが事業成果を左右します。
テンプレート通りのレイアウトに満足していませんか？ あなたの事業の独自性や、ターゲット顧客の行動心理に合わせた、オーダーメイドのレイアウトが必要です。
もし、サイトの使い勝手が悪い、見てほしい情報が見られていない、スマホでの表示が崩れているといったお悩みがあれば、ぜひ株式会社ファンフェアファンファーレにご相談ください。人間工学とWeb技術を融合させた、勝てるレイアウトをご提案いたします。
WordPressサイトを構成する各パーツの配置やサイズ変更
このようなケースの際に、WordPressテーマのphpファイルやCSSファイルの編集などで、WordPressサイトを構成する各パーツの配置やサイズ変更など、サイトレイアウトに関する部分をカスタマイズをさせていただいております。
WordPressテーマの構造によって、WordPressサイトのレイアウトカスタマイズは、WordPress管理画面からのテーマ編集では行えない場合があります。
そうした場合は、FTP情報などをご連絡いただき、WordPressサイトを構成しているテーマファイルを調査して、カスタマイズを行わせていただいております。コンテンツ部分とサイドバー部分のバランスの調整など、軽微なレイアウト調整にも対応しております。
WordPressサイトのレイアウトはテーマに依存しており、レイアウトを変更したい場合でも、WordPressテーマ内のカスタマイズ機能では変更・調整ができない場合があります。テーマ（テンプレート）をカスタマイズして異なるレイアウトを生成したり現状のレイアウトを調整する必要があります。
WordPressサイトのレイアウト変更、調整にお困りの際は一度お問い合わせください。
