コンテンツにスキップ

トップページの編集方法

サイトのトップページ(https://www.rc-blooming.jp/)に並んでいる要素の編集方法をまとめています。

トップページの仕組み: 「固定ページ」というメニューに「トップページ」という名前のページがありますが、運営者が編集するのはそこではありません。トップページに表示される内容は、外観 > TCDテーマ > 「トップページ」タブ のなかで決めています。


このページに含まれる編集対象

区分 編集対象
メインビジュアル 画面いっぱいの背景画像(5枚まで切替)と、その上に流れるキャッチコピー
ヘッダーコンテンツのタイプ 画像スライダー / 動画 / YouTube を切り替える(現状は画像スライダー)
ヘッダーコンテンツ下 「楽しく、自分を知って、健康に」のキャッチ・説明文・3点カード・「会社案内」ボタン
メインコンテンツの並び順 NEWS / SERVICE / バナー / WORKS / フリースペース1〜3 をドラッグで並び替え
NEWS(お知らせ)セクション タイトル・サブタイトル・説明文・表示件数・ボタン
SERVICE(事業概要)セクション タイトル・サブタイトル・説明文・3点カード・ボタン
バナー(現状非表示) バナーを最大6個まで掲載できるブロック
WORKS(実績紹介)セクション タイトル・サブタイトル・説明文・表示件数・ボタン
フリースペース1〜3(現状非表示) 自由なHTML・画像を入れられる3つの枠

共通要素(ヘッダーロゴ / グローバルメニュー / フッター)は 共通要素 の各ページを参照してください。


現状サイトでの見え方

トップページのメインビジュアル(画像スライダー)

① メインビジュアル(画像スライダー、最大5枚を順番に表示) / ② 表示中のキャッチコピー

トップページのヘッダーコンテンツ下キャッチと3点カード

① キャッチ「楽しく、自分を知って、健康に」+ 説明文 / ② MESSAGE カード / ③ PROFILE カード(④ 会社案内ボタンはカード直下にあります)

トップページのNEWSセクション

① NEWS タイトル+サブ / ② お知らせ一覧(最新4件) / ③ 「お知らせ一覧」ボタン

トップページのSERVICEセクション

① SERVICE タイトル+サブ+説明 / ② 3点カード(事業3つ) / ③ 「もっと見る」ボタン

トップページのWORKSセクション

① WORKS タイトル+サブ+説明 / ② 実績一覧(最新3件) / ③ 「実績紹介」ボタン


TCDテーマ画面の開き方(このページで何度も使います)

ほとんどの編集対象は、外観 > TCDテーマ という画面の中にあります。最初に1回開いて、そこから左サイドの 「トップページ」タブ をクリックします。

外観 > TCDテーマ画面の左サイドナビ、トップページタブをハイライト

操作手順:

  1. 左メニュー 「TCDテーマ」 をクリック
  2. 開いた画面の 左サイドの「トップページ」タブ をクリック ← 14個あるタブのうち4番目

タブを切り替えても保存は1か所: TCDテーマ画面のどのタブを開いていても、「設定を保存」ボタンを押すと 画面内のすべてのタブの設定がまとめて保存 されます。「ボタンが各セクションごとにあるけれど、押すとそこだけ保存される?」と心配する必要はありません。

ただし、編集途中で別画面(ダッシュボード等)に移動すると、保存していない値は消えます。


編集対象1: メインビジュアル(画像スライダー)

現状サイトでの見え方

メインビジュアルのスクショ を参照。現状は「画像スライダー」というタイプで、最大5枚の画像を順番に切り替え て表示しています(現状は3枚運用中、4・5枚目はサンプル文言のままなので公開には出ていません)。

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの「トップページ」タブ > 上から2番目のセクション「画像スライダー設定

操作手順

画像スライダー設定(スライド1〜5のサブボックスが折りたたまれて並んでいる)

① セクション見出し「画像スライダー設定」 / ② スライド1の編集用サブボックス(クリックで開閉)

  1. スライド1〜5それぞれのサブボックスをクリックして開きます
  2. 編集したいスライドの中で、画像・キャッチコピー・ボタン等を設定します

スライド1の中身、画像/アニメ/オーバーレイ/不透明度/キャッチ/ボタンの並び

スライド1の中の主なフィールド(番号は上から順):

  1. 画像(PCとタブレット用): スライドの背景になる画像
  2. 背景画像のアニメーションタイプ: ズームインなど
  3. 背景画像の色オーバーレイ: 画像の上に重ねる色(文字を読みやすくするため)
  4. オーバーレイの透明度: 0〜1.0
  5. キャッチコピー: スライドの中央に表示される文言(複数行可)
  6. ボタン: ラベル・URL・色(現状は表示されていません。テンプレ上はコメントアウトされており、運営者がボタン欄に文言を入れても公開サイトには出ません)

推奨アップロードサイズ: 1450 × 815px(横×縦) (管理画面の「画像」欄に「Recommended size. Width:1450px, Height:815px」と表記されています)

スマホ表示のスライダー

スライド1〜5 の PC用設定の下に、「スマホ用スライダー設定」 という別ブロックがあります。

スマホ用スライダー設定(コンテンツタイプのラジオ)

① 「スマホ用スライダー設定」見出し / ② スマホでの表示タイプを選ぶラジオ(PC設定と同じ画像を使う / ロゴ画像を出す / キャッチコピーだけ出す)

操作手順:

  1. コンテンツタイプ: スマホで何を出すかをラジオで選びます
  2. 「PC設定と同じ」: PC のスライドと同じ画像・キャッチを使います
  3. 「ロゴ表示」: スマホ画面の中央にロゴ画像を1枚出します
  4. 「キャッチフレーズ表示」: スマホ用に別のキャッチコピーを設定できます
  5. その下の スライド1〜5用 モバイル画像 はスマホ用に縦長の画像を別途設定できます

推奨アップロードサイズ(スマホ画像): 750 × 1334px 以上(縦長) (管理画面に「Recommend image size. Width:750px or more, Height:1334px or more」と表記されています)

切り替え時間

スライダーの一番下に 「画像スライダーアニメーション時間」 のドロップダウンがあります。

画像スライダーアニメーション時間のドロップダウン(現状7秒)

① 見出し / ② ドロップダウン(5〜10秒の間で1秒単位)

現状: 7秒 で1枚ずつ切り替わります。

注意点・コツ

  • 不要なスライドは、画像を空・キャッチコピーを空にしておくと公開サイトには出ません(テンプレートが画像のないスライドをスキップします)
  • 現状のスライド4・5 は「ここにスライダー4のキャッチフレーズ」というサンプル文言のままです。画像が設定されていないので公開サイトには出ていませんが、サンプル文言だけ消しておくと管理画面で見たときに分かりやすくなります
  • アスペクト比が違う画像をアップロードすると、テーマが自動で中央切り抜きします。人物の顔などが切れないよう、推奨サイズに近い縦横比でアップロードしてください

編集対象2: ヘッダーコンテンツのタイプを変える(画像スライダー / 動画 / YouTube)

メインビジュアルは、画像スライダー以外に 動画(MP4)YouTube を流すこともできます(現状は画像スライダー)。

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの「トップページ」タブ > 一番上のセクション「ヘッダーコンテンツ設定

操作手順

ヘッダーコンテンツ設定 + ヘッダーコンテンツのタイプ ラジオ

① セクション全体「ヘッダーコンテンツ設定」 / ② タイプを選ぶラジオ(画像スライダー / MP4動画 / YouTube)

  1. ラジオで切り替えたいタイプを選びます
  2. 「画像スライダー」を選ぶと、上で説明した「画像スライダー設定」のブロックが画面上に出ます
  3. 「MP4動画」「YouTube」を選ぶと、ラジオの下に 「動画設定」「YouTube設定」「代替画像」「PC用オーバーレイコンテンツ」「スマホ用オーバーレイコンテンツ」 が表示されます

動画設定 / YouTube設定 の概観(type2 を選ぶと出るブロック)

① 動画設定(MP4ファイルをアップロード) / ② YouTube設定(動画IDを入力)

注意点・コツ

  • 動画/YouTube を使うときは、スマホでは別のものを表示 するのが一般的です(モバイル回線で動画が重くなるため)。「スマホ用オーバーレイコンテンツ」でスマホ用の画像やキャッチを別途設定できます
  • 代替画像: タブレットとスマホでは動画の代わりに静止画が表示されます。推奨サイズ: 1450 × 815px(管理画面に「Recommended size: width:1450px, height:815px」と表記)
  • 現状(画像スライダー利用)のままで問題なければ、このセクションは触る必要はありません

編集対象3: ヘッダーコンテンツ下のキャッチ + 3点カード + 会社案内ボタン

メインビジュアルの直下にある「楽しく、自分を知って、健康に」のキャッチ + 説明文 + MESSAGE / PROFILE のカード + 「会社案内」ボタンがこの編集対象です。

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの「トップページ」タブ > 中ほどのセクション「ヘッダーコンテンツ下設定

操作手順 — 見出しと説明

ヘッダーコンテンツ下設定セクション全体

① セクション見出し「ヘッダーコンテンツ下設定」 / ② 「このコンテンツを表示」チェック / ③ キャッチコピー / ④ 説明文 / ⑤ 3点ボックス

  1. このコンテンツを表示: チェックを外すと、このセクション全体が公開サイトから消えます
  2. キャッチコピー: 大きく出る見出し(現状「楽しく、自分を知って、健康に」)
  3. 説明文: キャッチコピーの下の本文(複数行可)

操作手順 — 3点カード(MESSAGE / PROFILE / もう1つ)

「3点ボックス」見出しの下に アイテム1 / アイテム2 / アイテム3 のサブボックスが3つ並んでいます。

3点ボックスの中身(アイテム1 PHILOSOPHY の編集UI)

① アイテム1のサブボックス / ②〜⑦ タイトル / サブタイトル / 説明 / 画像 / オーバーレイ / 不透明度 / URL の各フィールド

各アイテムで設定できる項目:

  • タイトル: カード上部の大きな文字(例: MESSAGE)
  • サブタイトル: タイトル下の小さい文字(例: 代表挨拶)
  • 説明文: カードに重ねたときに出る説明
  • 画像: カードの背景画像
  • 背景画像の色オーバーレイ + 不透明度: 画像の上に重ねる色
  • リンクURL: カードをクリックしたときに飛ぶ先

推奨アップロード画像サイズ: 800 × 1085px (管理画面の「画像」欄に「Recommended image size. Width: 800px, Height: 1085px」と表記)

現状(重要)

  • アイテム1(PHILOSOPHY)は管理画面では設定されていますが、公開サイトでは表示されていません。リンク先 /company/philosophy/ も現状 存在しないページ で開くと「ページが見つかりませんでした」になります
  • アイテム2 = MESSAGE(/company/message/ 代表挨拶)、アイテム3 = PROFILE(/company/profile/ 会社概要)が現状公開されています
  • 3つ目のカードを公開サイトに出したい場合は、運営者にご相談ください(リンク先のページを別途用意する必要があります)

操作手順 — 「会社案内」ボタン

3点カードの下にある 「会社案内」ボタン はこのセクションの末尾「ボタン」フィールドで設定されています。

ボタン(ラベル / URL)の編集UI

① 「ボタン」見出し / ② ボタンラベル(現状「会社案内」) / ③ リンクURL(現状 /company/

操作手順:

  1. ボタンラベル: ボタンに表示する文言
  2. リンクURL: ボタンをクリックしたときに飛ぶ先

注意点・コツ

  • セクション全体を一時的に消したいときは、最上部の 「このコンテンツを表示」 チェックを外せば OK です
  • ボタンの色(文字色・背景色・ホバー時の色)も同じセクション内で設定できます

編集対象4: メインコンテンツの並び順を変える

メインビジュアル下のキャッチセクションのさらに下にある「NEWS」「SERVICE」「バナー」「WORKS」「フリースペース1〜3」の各ブロックは、ドラッグで並び順を入れ替えられます

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの「トップページ」タブ > 下の方のセクション「メインコンテンツ

操作手順

メインコンテンツ並び順、各サブボックスがドラッグで並び替え可能な状態

① セクション見出し「メインコンテンツ」 / ②〜⑥ ドラッグで並び替えられるサブボックス(現状の並び: News → Service → Banner → Works → フリースペース1〜3)

  1. 各サブボックスの見出し部分(タイトルの上にマウスを置く)をドラッグして、上下に動かします
  2. 順番が決まったら 「設定を保存」 ボタンを押します
  3. 公開サイトをリロードして並びが変わっているか確認します

各ブロックの「表示 / 非表示」

各サブボックスの上のほうに 「このコンテンツを表示」 チェックがあります。

  • チェックON: 公開サイトに表示
  • チェックOFF: 並び順に関係なく非表示

現状: - 表示中: NEWS / SERVICE / WORKS(+ メインビジュアル下キャッチ) - 非表示: バナー / フリースペース1〜3

注意点・コツ

  • 並び順を変えてから保存を忘れて別画面に移ると、並び順は元に戻ります
  • バナー・フリースペースを使いたい場合は、それぞれの「このコンテンツを表示」チェックを ON にしてから内容を設定します(次の各セクション参照)

編集対象5: NEWS(お知らせ)セクション

現状サイトでの見え方

NEWS セクションのスクショ を参照。「NEWS / お知らせ」の見出し + 最新お知らせのリスト + 「お知らせ一覧」ボタンが表示されています。

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの「トップページ」タブ > 「メインコンテンツ」セクション内の 「News」 サブボックス

操作手順

NEWSサブボックス、タイトル/サブ/説明/タブ設定/表示数/ボタンのフィールド

① 「News」サブボックス見出し / ② 「このコンテンツを表示」チェック / ③ タイトル / ④ サブタイトル / ⑤ 説明 / ⑥ タブ設定

主なフィールド:

  • タイトル: 大きく出る見出し(現状「NEWS」)
  • サブタイトル: タイトル下の小さい文字(現状「お知らせ」)
  • 説明: サブタイトルの下に出る本文(空でも OK)
  • タブ設定: お知らせのカテゴリーをタブ表示する機能(現状は使われていません → 後述)
  • 表示数: トップに出す最新お知らせの件数(現状 5件、ただし投稿が4件しかないので4件出ています)
  • ボタン: 「お知らせ一覧」へのリンクボタンの色設定(ラベルは固定)

NEWSタブの注意

  • タブ設定でカテゴリーを選ぶと、お知らせをカテゴリー別タブで切り替えられるようになります(最大4タブ)。現状はお知らせカテゴリーが1件もないので、タブ機能は使えません
  • タブを使うには、まず「お知らせ > お知らせカテゴリー」でカテゴリーを作成してから、ここで選びます(カテゴリーの作り方は お知らせ一覧 > お知らせカテゴリーの扱い を参照)
  • タブ機能を有効にすると、最初のタブに 「Latest info」 と表示されます。この文言はテーマ側に組み込まれていて変更できません

注意点・コツ

  • 表示数を増やすときは、お知らせ投稿の数も合わせて確認してください(投稿より多い数を指定しても、投稿数までしか出ません)
  • お知らせの投稿自体の編集方法は お知らせの個別記事編集/news/ ページ全体(見出し・表示件数・カテゴリー機能・タブ設定)の編集方法は お知らせ一覧ページの編集 を参照してください

編集対象6: SERVICE(事業概要)セクション

現状サイトでの見え方

SERVICE セクションのスクショ を参照。「SERVICE / 事業概要」の見出し + 3つの事業カード + 「もっと見る」ボタンが表示されています。

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの「トップページ」タブ > 「メインコンテンツ」セクション内の 「Service」 サブボックス

操作手順

SERVICEサブボックス、背景色/タイトル/サブ/説明/3点ボックスのフィールド

① 「Service」サブボックス見出し / ② 表示チェック / ③ 背景色 / ④ タイトル / ⑤ サブタイトル / ⑥ 説明文

主なフィールド:

  • 背景色: SERVICE セクション全体の背景色
  • タイトル / サブタイトル / 説明: NEWS と同じ構造
  • 3点ボックス(事業3つ): 各事業のタイトル・サブ・説明・画像・リンクURL を3つ分設定(NEWS の3点カードと同じUI)
  • ボタン: 「もっと見る」ボタンのラベル・URL・色

トップとSERVICEページの違い(重要)

  • トップページに出るのは3事業だけ です(3点カードなので3つまで)
  • 4事業すべてを一覧で見たい場合は、SERVICE 一覧ページ に行きます(「もっと見る」ボタンの遷移先)
  • SERVICE 一覧ページ(/service/)は別のページなので、編集方法は 事業案内ページの編集 を参照してください

注意点・コツ

  • 3事業のリンク先(index_service_box_url1〜3)は、現状 service#sales-development-of-sports-equipment のような /service/ 一覧ページの内部アンカー になっています。SERVICE 一覧ページの該当事業ブロックに飛ぶ仕組みです

編集対象7: バナー(現状非表示)

公開サイトの「1段に2個 × 最大3段 = 計6個のバナー」を表示できるブロックです。現状はチェックが外れていて公開サイトには出ていません

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの「トップページ」タブ > 「メインコンテンツ」セクション内の 「Banner」 サブボックス

操作手順 — セクション全体を表示する

Bannerサブボックス、バナー1〜6 の編集UI

① 「Banner」サブボックス見出し / ② 「このコンテンツを表示」チェック(現状OFF) / ③〜 バナー1〜6 のサブボックス

  1. 「このコンテンツを表示」 チェックを ON にします
  2. バナー1〜6 の各サブボックスをクリックして開き、内容を設定します
  3. 画像が設定されていないバナーは公開サイトに出ません。使いたい数だけ画像をアップロードします

操作手順 — バナー1個分の中身

バナー1の編集UI、タイトル/サブ/説明/画像/グラデーション/URL

① バナー1サブボックス見出し / ②〜⑥ タイトル / サブタイトル / 説明 / 背景画像 / グラデーション / リンクURL

主なフィールド:

  • タイトル: バナー上の大きな文字
  • サブタイトル: タイトル下の小さい文字
  • 説明: バナー下に出るテキスト
  • 背景画像: バナーの背景画像
  • グラデーションオーバーレイ: タイトルが読みやすくなるように画像にグラデーションを重ねる
  • リンクURL: バナーをクリックしたときの遷移先

推奨アップロード画像サイズ: 570 × 150px(横長) (管理画面の「背景画像」欄に「Recommended size: width:570px, height:150px」と表記)

注意点・コツ

  • バナーは6個まで設定できますが、画像のないバナーはスキップされる ので、実際に使う分だけ画像を入れれば OK です
  • 公開サイトに出たいだけのバナーは、サブボックス2〜6 をそのままにして、サブボックス1だけ画像を入れる、という運用もできます
  • 表示・非表示を切り替えるたびに「設定を保存」を忘れずに

編集対象8: WORKS(実績紹介)セクション

現状サイトでの見え方

WORKS セクションのスクショ を参照。「WORKS / 実績紹介」の見出し + 最新実績3件 + 「実績紹介」ボタンが表示されています。

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの「トップページ」タブ > 「メインコンテンツ」セクション内の 「Works」 サブボックス

操作手順

Worksサブボックス、タイトル/サブ/説明/表示数/ボタンのフィールド

① 「Works」サブボックス見出し / ② 表示チェック / ③ タイトル / ④ サブタイトル / ⑤ 説明 / ⑥ 表示数

主なフィールド:

  • タイトル / サブタイトル / 説明: NEWS / SERVICE と同じ構造
  • 表示数: トップに出す最新実績の件数(現状 3件
  • ボタン: 「実績紹介」ボタンの色設定

注意点・コツ

  • 実績投稿のアイキャッチ画像が未設定だと、テーマがデフォルトの代替画像(緑のロゴが入った画像)を出します。トップに出る実績は必ずアイキャッチ画像を設定してください
  • 実績の投稿自体(タイトル・本文・カテゴリー)の編集方法は、実績の個別記事編集 を参照してください

編集対象9: フリースペース1〜3(現状非表示)

自由に HTML や画像、テキスト を入れられる3つの枠です。現状はチェックが外れていて公開サイトには出ていません

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの「トップページ」タブ > 「メインコンテンツ」セクション内の 「フリースペース1」〜「フリースペース3」 サブボックス

操作手順

フリースペース1サブボックス、表示チェック + wp_editor(ビジュアル/テキスト切替)

① 「フリースペース1」サブボックス見出し / ② 「このコンテンツを表示」チェック(現状OFF) / ③ エディタ本体(ビジュアル/テキスト切替可)

  1. 「このコンテンツを表示」 チェックを ON にします
  2. エディタに本文を入力します(投稿・固定ページと同じ感覚で書けます)
  3. メディアを追加 ボタンで画像を入れられます
  4. 「設定を保存」を押します

並び順との関係

  • フリースペース1・2・3は、メインコンテンツの並び順の一部です(NEWS / SERVICE / Banner / WORKS と並べ替えられます)
  • 例: NEWS と SERVICE の間にフリースペース1を置く、なども可能

注意点・コツ

  • 3つあるので、用途別に使い分けられます(例: 季節のお知らせ / キャンペーンバナー / 採用情報など)
  • HTML タグも入れられますが、慣れていない場合はビジュアルエディタ(左上の「ビジュアル」タブ)で書く方が安全です
  • 画像のサイズ指定はメディア追加時の「サイズ」プルダウンで調整できます

共通要素は別ページ

トップページに表示されているものでも、サイトの全ページ共通で表示される要素 は別のマニュアルにあります:

  • ヘッダーロゴ / ファビコン / OGP画像 / サイトタイトル: ロゴ・ファビコン
  • グローバルメニュー(ヘッダーのメニュー、スマホのハンバーガーメニュー): グローバルメニュー
  • フッター(フッターロゴ・SNS・コピーライト等): フッター

変更が反映されないときは

TCDテーマ画面で「設定を保存」を押したのにサイトに反映されない

  • ブラウザのキャッシュが残っている可能性があります。Ctrl + Shift + R(Mac は ⌘ + Shift + R)で強制リロードしてください
  • 別のブラウザ(Chrome / Safari など)で開いてみると、キャッシュの問題か切り分けられます

スライドの画像をアップロードしたのに表示されない

  • スライドのサブボックスの中で、画像欄がちゃんと埋まっているか確認してください
  • 画像欄が空のスライドはスキップされます
  • 同じことが3点ボックス(MESSAGE/PROFILE等)と バナー にも当てはまります

並び順を変更したのに元に戻る

  • 並び順を変更した後、必ず 「設定を保存」 ボタンを押してください
  • 保存前に別画面(ダッシュボード等)に移動すると、並び順は元に戻ります

NEWS / WORKS に同じ画像(緑のロゴ)ばかり出る

  • それぞれの投稿に アイキャッチ画像 が設定されていない可能性があります
  • 各投稿の編集画面(お知らせ > 投稿一覧 > 該当投稿)で、アイキャッチ画像を設定してください
  • アイキャッチ未設定だと、テーマがデフォルトの代替画像を表示します

バナーやフリースペースを設定したのにサイトに出ない

  • メインコンテンツ内の該当ブロックで 「このコンテンツを表示」 チェックが ON になっているか確認してください
  • バナーは画像も必要です(画像なしのバナーはスキップされます)

関連