この記事では、xeory extensionのトップページをカスタマイズするときの全体像から、管理画面だけでできる設定、少しだけCSSや子テーマを使った一歩進んだカスタマイズまでご紹介します。
結論から言うと、xeory extension トップページ カスタマイズは「テーマの仕様をざっくり理解して、管理画面＋最低限のCSSで整える」という二段構えで攻めると、コードが得意でなくてもかなり見栄えの良いサイトにできます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
xeory extension トップページのカスタマイズの前に知っておきたい基本
いきなり細かい設定を触る前に、xeory extensionというテーマ自体の考え方と、トップページがどう組み立てられているかを押さえておきましょう。ここを分かっているかどうかで、後の作業の迷い方がかなり変わります。
Xeory ExtensionとBaseの違いとトップページの考え方
xeoryには「Base」と「Extension」という2種類のテーマが用意されていて、それぞれトップページの役割が違います。感覚的には、こんな区別だとイメージしやすいです。
| 項目 | Xeory Extension | Xeory Base |
|---|---|---|
| 想定しているサイト | コーポレートサイト＋ブログ | ブログ・メディア寄り |
| トップページ | サービスや会社情報をまとめて見せるランディングページ的な構成 | 新着記事が並ぶブログ型の一覧 |
| 標準で含まれるエリア | メインビジュアル、サービス紹介、会社情報、最新記事、お問い合わせなど | 記事一覧が中心 |
| カスタマイズのイメージ | 「会社サイトの顔」を整える | 「読み物の入り口」を整える |
私の印象としては、xeory extensionはデモの状態でもそれなりに見えてくれる一方で、そのままだと「どこかで見たことあるサイト」になりがちです。だからこそ、トップページのカスタマイズで自社らしさを出していくのが大事になってきます。
トップページに標準で用意されているエリア
xeory extensionのトップページには、あらかじめいくつかのブロックが用意されています。テーマのバージョンや設定で多少違いはありますが、ざっくりこんなイメージです。
- ファーストビュー（メインビジュアル）
- サービス紹介（複数カラムでサービスを並べるエリア）
- 会社情報（テキストや画像で会社概要を紹介）
- 最新記事・ブログ一覧
- お問い合わせや資料請求への導線
初めて訪れた人に「何をしている会社なのか」「どんな実績があるのか」を伝えて、最後にお問い合わせしてもらう流れが、最初からある程度組み立てられているイメージです。つまり、xeory extensionのトップページをカスタマイズするときは、この流れを壊しすぎず、自分のビジネス向けにアレンジしていくのがポイントになります。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
できるカスタマイズ範囲と、むずかしい部分
最初に「どこまで簡単に変えられるのか」「どこからがちょっと難しいのか」を軽く頭に入れておくと、無理せず進められます。
- 管理画面だけでできること
- ロゴやサイトタイトル、キャッチコピーの変更
- メインビジュアルの画像やテキストの変更
- 色設定や一部のフォントサイズの調整
- トップページ各ブロックのテキストやボタンのリンク先の設定
- CSSを使うとできること
- メインビジュアルの高さ・余白・文字位置の調整
- スマホとPCでレイアウトや文字サイズを出し分ける
- 行間や余白のバランスを細かく整える
- PHP（front-page.phpなど）を触るとできること
- トップページのセクションの順番を入れ替える
- 不要なブロックを削除したり、独自のブロックを追加したりする
このあと詳しく書きますが、最初のゴールは「管理画面＋少しのCSS」くらいにしておくのがおすすめです。PHP編集は一気に難易度が上がるので、慣れてきてからで大丈夫です。
管理画面だけでできるxeory extensionトップページカスタマイズ
ここからは、WordPressの管理画面だけでできる範囲のカスタマイズをまとめていきます。コードに触らなくても、ここまでやるだけで「デモ感」はかなり薄くなります。
サイト全体の初期設定で変えられるポイント
まずは「外観」や「テーマ設定」の中にある、サイト全体の基本設定を整えます。地味ですが、トップページの印象にも直結する部分です。
| 項目 | 設定場所 | トップページへの影響 |
|---|---|---|
| サイトタイトル・キャッチコピー | 一般設定／カスタマイザー | ヘッダーやメインビジュアルに表示され、ブランドの印象を決める |
| ロゴ画像 | テーマ設定 | ヘッダー左上に表示され、信頼感や「会社らしさ」に直結する |
| キーカラー（アクセントカラー） | テーマ設定 | ボタンやリンクの色に使われ、サイト全体の雰囲気を左右する |
| SNS設定 | テーマ設定 | ヘッダーやフッターにアイコンが出て、企業の透明感や安心感を補強する |
| アクセス解析などのタグ | テーマ設定 | 見た目には関係ないが、後で改善するときのデータ取得に必須 |
ここで意識したいのは、「ブランドカラー」と「一番伝えたい一言」をちゃんと決めておくことです。xeory extensionでトップページをカスタマイズするときも、細かいテクニックより、この2つがはっきりしているかどうかで仕上がりが変わります。
ファーストビュー（メインビジュアル）の設定
次に、トップページの顔になるメインビジュアルを整えていきます。ここを変えるだけでも、サイト全体の雰囲気が別物になります。
- メインビジュアルの背景画像を差し替える
- 自社のサービスイメージが伝わる写真や、シンプルな背景画像を用意する
- 上に文字を乗せるので、模様が細かすぎないもののほうが読みやすい
- 見出しテキスト・サブコピーを考える
- 「何をしている会社か」「誰のどんな悩みを解決するのか」を一行で伝える
- サブコピーで、もう少し具体的なメリットや特徴を補足する
- ボタンのラベルとリンク先を決める
- 「お問い合わせ」「資料請求」「無料相談」など、次の一歩が分かる言葉にする
- リンク先はお問い合わせフォームやLPなど、ゴールに近いページを指定する
私がよくやるのは、名刺に書いている肩書きと、代表的な実績やベネフィットを組み合わせて、見出しとサブコピーを作る方法です。メインビジュアルのテキストをしっかり作り込むだけでも、トップページ全体の説得力が一段上がります。
トップページのテキストとCTAボタンのカスタマイズ
ファーストビュー以外にも、管理画面から編集できるテキストやボタンがいくつかあります。ここもデフォルトのままにせず、自分の言葉で書き換えておきましょう。
- サービス紹介エリア
- サービス名と説明文を、できるだけ具体的な表現にする
- 「誰向けか」「どんな悩みを解決できるか」を一言入れておくと伝わりやすい
- 会社情報エリア
- 会社のミッションや強みを簡潔にまとめる
- 代表メッセージや写真を載せられる場合は、信頼感アップにつながる
- お問い合わせエリア
- 「こんな方はぜひご相談ください」とターゲットを明示する
- 電話番号や対応時間など、問い合わせ前に不安になりそうな点を先に書いておく
こうしたテキストは、初期状態だとふわっとした表現が多いので、そのままだと他サイトと似た印象になりがちです。あなたのビジネスの言葉に置き換えるだけでも、xeory extensionのトップページカスタマイズの効果はかなり高まります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
CSSで一歩進んだトップページのカスタマイズをする方法
ここからは、スタイルシート（CSS）を少しだけ触って、トップページの見た目をもう一段整える方法を紹介します。難しいコードを書く必要はなく、「どの数字を変えると、画面のどこが変わるのか」が分かれば大丈夫です。
メインビジュアルの高さや余白を調整する考え方
デフォルトのままだと「メインビジュアルが画面いっぱいで、下の内容が全然見えない」「逆にインパクトが弱い」と感じることがあります。そんなときはCSSで高さや余白を調整します。
よく触るポイントを表にまとめると、こんなイメージです。
| 変えたいこと | 見るべきCSSの場所 | 注意したいポイント |
|---|---|---|
| メインビジュアルの縦の高さ | メインビジュアル用セレクタのheightやpadding | スマホ・タブレットでの見え方も必ず合わせて確認する |
| タイトルの位置（上下） | タイトル要素のmarginやpadding | 行間（line-height）を変えすぎると読みにくくなる |
| ボタンのサイズ | ボタン要素のpaddingとfont-size | 小さくしすぎるとタップしづらくなる |
| 背景画像の見え方 | background-sizeやbackground-position | 人物の顔やロゴが切れないように位置を微調整する |
一度にあれもこれも変えず、「1カ所変えて、ブラウザで確認」を繰り返すのがコツです。私は昔、まとめて数値をいじった結果、どこをどう変えたのか分からなくなってやり直しになったことが何度もあります。
スマホ表示を整えるときのポイント
xeory extensionはレスポンシブ対応ですが、そのままだと「スマホだと文字が大きすぎる」「余白が詰まりすぎて窮屈」と感じることもあります。そんなときは、スマホ向けだけCSSを追加していきます。
- スマホだけフォントサイズを少し小さくする
- 各セクション上下の余白を少し広げて、詰まった印象をなくす
- ボタン同士の間隔を広げて、誤タップを減らす
こうした調整は、メディアクエリという「画面幅が○○px以下のときだけ適用するCSS」の中で行います。慣れてくると、「スマホで見たときだけトップページの印象を変える」といった細かいチューニングもできるようになり、ユーザー体験がぐっと良くなります。
子テーマでfront-page.phpを編集するときの流れ
さらに踏み込んで、トップページのセクション順を入れ替えたり、特定のブロックを削除したりしたい場合は、PHPファイルの編集が必要になります。その際は、親テーマではなく子テーマ側で作業するのが鉄則です。
ざっくりした流れは次の通りです。
- 親テーマからfront-page.phpをコピーして、子テーマのフォルダに保存する
- 子テーマ側のfront-page.phpを開き、不要なセクションの出力部分を削除する
- 順番を変えたいセクションのブロックを、上下に入れ替える
- ブラウザでトップページを確認し、崩れやエラーがないかチェックする
PHPと聞くと難しく感じますが、実際やっていることは「決まった塊を上から下へ並べ替える」作業に近いです。ただ、1文字のミスで画面が真っ白になることもあるので、少しでも不安な場合は、xeory extensionのトップページカスタマイズの中でも、このレベルは無理せず、管理画面とCSSだけで整えるところまでにしておくのも十分アリだと思います。
デザイン事例から学ぶxeory extensionトップページの型
設定やコードの話ばかりだと、「そもそもどんなトップページが良いのか分からない」となりがちですよね。ここでは、xeory extensionでよく見かける構成パターンをいくつか紹介して、方向性を決めやすくしていきます。
よくある成功パターン3つ
実際に制作やリニューアルで使うことが多いトップページの構成を、ざっくり3パターンに分けてみました。
| パターン名 | 向いているサイト | 特徴 |
|---|---|---|
| シンプル企業サイト型 | BtoBサービス、士業、コンサルなど | メインビジュアル＋サービス概要＋事例＋お問い合わせの王道構成 |
| 実績推しポートフォリオ型 | 制作会社、デザイナー、フォトグラファーなど | メインビジュアルのすぐ下に実績ギャラリーを置き、信頼感を前面に出す |
| ブログ強化型 | オウンドメディア兼コーポレートサイト | サービス紹介のあとに、カテゴリ別の最新記事を大きめに見せる |
【稼げるキーワード教えます】
▼ ▼ ▼
xeory extensionでトップページをカスタマイズするときは、まずどのパターンに近づけたいのかを決めてから細かい配置を考えると、迷いにくくなります。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
やってしまいがちな失敗パターン
逆に、「これをやると一気に野暮ったく見える」というパターンもあります。私自身の失敗も含めて、先に知っておいてほしいポイントです。
- メインビジュアルの文字量が多すぎて、スマホで3行以上になっている
- サービス紹介が抽象的で、「結局何をしてくれる会社なのか分からない」
- 最新記事エリアだけ色や装飾を盛りすぎて、全体のトーンから浮いている
- お問い合わせボタンがフッター付近にしかなく、スクロールしてもなかなか辿り着けない
私も昔、「とにかく目立たせよう」と思って各セクションを別々の派手な色にした結果、どこを見ればいいか分からないトップページを作ってしまったことがあります。装飾はほどほどにして、「伝える順番」と「読みやすさ」を優先したほうが、xeory extensionの良さを活かしやすいです。
コンテンツの優先順位を決めるチェックリスト
デザインに入る前に、「トップページで何を一番伝えたいか」を整理しておくと、カスタマイズの方向性がぶれません。簡単なチェックリストを置いておきます。
- 一番読んでほしい人は誰か（属性や悩み）
- その人に、最初に知ってほしいことは何か
- 信頼してもらうために見せたい実績や数字はあるか
- 最後に取ってほしい行動（お問い合わせ、資料請求、来店予約など）は何か
この4つが決まると、「メインビジュアルに何を書くか」「サービス紹介をどの順番で並べるか」「どこにCTAボタンを置くか」が自然と決まってきます。xeory extensionのトップページカスタマイズも、まずはこの整理から始めるとスムーズです。
運用とトラブル防止のためのカスタマイズのコツ
見た目を整えるのと同じくらい大切なのが、「あとで困らないようにしておくこと」です。ここでは、運用とトラブル防止の視点で押さえておきたいポイントをまとめます。
更新に強いカスタマイズと弱いカスタマイズ
同じ「カスタマイズ」でも、壊れにくいものと、ちょっとしたことで崩れやすいものがあります。大まかに分類するとこんなイメージです。
| カスタマイズ内容 | 壊れやすさ | おすすめ度 |
|---|---|---|
| 管理画面からのテキスト変更 | 低い | ◎ 積極的にやってOK |
| CSSによる色・余白・フォント調整 | 中くらい | ○ 慣れてきたら少しずつ |
| 子テーマでのfront-page.php編集 | 中〜高め | △ 必要性が明確なら検討 |
| 親テーマのPHPファイルを直接編集 | 高い | × 基本的にNG |
長く運用していくことを考えると、「親テーマは直接いじらない」「難しいことをするときは子テーマ側で」が、xeory extensionに限らずWordPress全般での大事なルールです。
チーム運用で決めておきたいルール
社内で複数人がサイトを触る場合、ルールがないと「誰がどこを変えたのか分からない」という状態になりがちです。私がクライアントと一緒に決めているルールの例をいくつか挙げておきます。
- トップページの重要なテキストを変更したときは、誰がいつ何を変えたかを社内の共有メモに残す
- CSSを編集するときは、必ず子テーマ側の専用ファイルに追記する
- 大きめのxeory extensionトップページカスタマイズをするときは、本番前にテスト環境で試す
- 画像のサイズや比率はテンプレートを決めておき、それに合わせて作成する
こうしたルールがあるだけでも、「気づいたらデザインが崩れていた」「誰も直し方が分からない」というトラブルをかなり減らせます。
困ったときに見るべき情報源
カスタマイズを進めていると、「なぜか反映されない」「どこを直せばいいか分からない」という壁に必ずぶつかります。そのときのために、頼れる情報源をあらかじめいくつか押さえておくと安心です。
- xeory公式サイトのマニュアルやよくある質問
- WordPress全般のフォーラムやQ&Aサイト
- 「xeory extension トップ ページ カスタマイズ」などの検索結果（他の人の事例やコード）
- 自分用のメモ（うまくいった設定やコードをまとめたノートやドキュメント）
特に自分用メモは、本当に頼りになります。私も案件ごとに「このサイトのトップページで使ったCSS」などをまとめていて、次のサイト制作やリニューアルのときに「前にうまくいったパターン」をすぐ再利用できるようにしています。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
よくある質問：xeory extensionのトップページカスタマイズ
最後に、クライアントや読者の方からよくもらう質問を、Q&A形式でまとめておきます。
Q1. 固定ページをトップにしてxeory extensionを使えますか？
A. xeory extensionは、テーマの構造として専用のトップページテンプレートを使う前提になっていて、設定画面から固定ページやLPをそのままトップに指定することはできません。
どうしても固定ページをトップにしたい場合は、PHPファイルを編集するなど、ある程度踏み込んだカスタマイズが必要になります。このあたりは公式でも「自己責任で」と案内されているので、難しいと感じる場合は、テーマの得意な形に合わせて設計するほうが現実的です。
固定ページに書きたい内容を、トップページの各セクションに分解して配置するイメージで考えると、xeory extensionのトップページカスタマイズとうまく両立できます。
Q2. コードが苦手でもトップ ページ カスタマイズは可能ですか？
A. もちろん可能です。
管理画面だけでできる範囲でも、ロゴやメインビジュアル、サービス紹介や会社情報のテキスト、ボタンの文言などをしっかり作り込めば、「テンプレそのまま」感はかなり薄くなります。
CSSやPHPを使ったxeory extensionのトップページカスタマイズは、あくまで「さらに整えるための追加の一手」と考えてもらえれば大丈夫です。まずは設定画面とテキストの見直しだけで一度仕上げてみて、物足りなくなってきたら少しずつコードに挑戦していくと、挫折しにくいと思います。
Q3. メインビジュアルだけ別のデザインにしたいです
A. メインビジュアルだけを変えるのは、効果が大きくて取り組みやすいカスタマイズです。
背景画像を差し替え、見出しとサブコピーの文章を自社向けに整えるだけでも、サイトの印象はかなり変わります。デザイナーに依頼できる環境なら、「横長のヒーロー画像を1枚作ってほしい」とお願いしてみると良いと思います。
そのうえで必要に応じて、メインビジュアルの高さや文字位置をCSSで少しだけ調整すれば、オリジナル感のあるトップページに仕上げやすくなります。大掛かりなカスタマイズをしなくても、xeory extensionのトップページカスタマイズとしては十分な変化を感じられるはずです。
まとめ：xeory extension トップ ページ カスタマイズで自分だけのサイトを作ろう
この記事のポイントを整理します
- xeory extensionは、コーポレートサイト＋ブログ向けにトップページが設計されている
- 管理画面だけでも、ロゴやメインビジュアル、テキストを整えれば「テンプレ感」はかなり薄くなる
- CSSを少し触ると、高さや余白、スマホ表示などを細かくチューニングできる
- PHPでfront-page.phpを編集すると、セクションの順番入れ替えなど、さらに自由度が上がる
- ただし、親テーマを直接いじらず、子テーマで安全にカスタマイズするのが大前提
今日からできる最初の一歩としては、まず「テーマ設定を一通り見直し、メインビジュアルとサービス紹介、お問い合わせまわりのテキストを自分の言葉に書き換える」ことをおすすめします。
それだけでも、xeory extensionのトップページカスタマイズの効果をきっと実感できるはずです。その手応えが出てきたら、少しずつCSSや子テーマにも挑戦して、自分らしいトップページを育てていきましょう。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
