コンテンツにスキップ

会社概要ページ(profile)の編集方法

サイトの 会社概要ページhttps://www.rc-blooming.jp/company/profile/)の編集方法をまとめています。商号・住所・地図・お問い合わせフォームなどを含む、サイトで 情報密度がもっとも高い ページです。

このページは「カスタム投稿の記事」です: 「固定ページ」ではなく、左メニュー 「会社案内」 の中にある記事の1つです。記事 ID は 25。

ページヘッダー(「COMPANY / 会社案内」の見出し帯)や URL スラッグ、アーカイブカードの文言など、会社案内の 共通設定会社案内ページ(インデックス)の編集方法 を参照してください。


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

区分 編集対象
記事タイトル 管理画面上の記事タイトル(<title> にも反映)
アイキャッチ画像 ページ上部に大きく出る画像
本文(ページビルダー) 会社情報テーブル / 本社住所+地図 / 大阪支社住所+地図 / お問い合わせフォーム埋め込み
アーカイブカードの文言 /company/ 一覧に出る「会社概要 / PROFILE / 説明文」
Content header 設定 個別記事ページの追加見出し(現状は空欄運用
公開状態 公開 / 下書き / 公開日時

お問い合わせフォームの 項目・送信先メールアドレスなどフォーム本体の編集 は本ページの対象外です。フォーム本体は お問い合わせフォーム(contact-form.md) を参照してください。

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


現状サイトでの見え方

会社概要ページは縦に長いため、上から順に下記の要素が並んでいます:

/company/profile/ ページ全景

番号 内容 編集場所
「COMPANY / 会社案内」見出し帯(共通) company.md > 編集対象3
アイキャッチ画像 編集対象2
会社情報テーブル(商号・設立・本社住所・資本金・決算期・電話) 3-1 シンプルテーブル
「本社」見出し + 本社住所の地図 3-2 見出し / 3-3 文章(地図iframe)
「支社」見出し + 大阪支社住所 + 地図 同上
お問い合わせフォーム(CF7埋め込み) 3-4 文章(CF7ショートコード)

記事編集画面の開き方

  1. 左メニュー 「会社案内」 をクリックします
  2. 一覧から 「会社概要」 をクリックします

会社案内記事一覧画面

  1. 編集画面が開きます。画面全体は下記のような構成です:

会社概要 編集画面の全体俯瞰

番号 メタボックス 用途
タイトル 管理画面上の記事タイトル
Archive page settings /company/ アーカイブカードの文言
Content header settings 個別記事ページの追加見出し(現状空欄
ページビルダー 本文(会社情報テーブル / 地図 / お問い合わせ)
アイキャッチ画像 ページ上部の画像
公開 公開状態・公開日時

編集対象1: 記事タイトル

管理画面で記事を識別するためのタイトル + ブラウザのタブに表示されるページタイトル <title> にも反映されます。

編集場所

会社案内 > 会社概要 > 編集画面の 一番上のタイトル欄

操作手順

  1. タイトル欄に文字を入力します(現状「会社概要」)
  2. 画面右上の 「更新」 ボタンを押します

注意点・コツ

  • このタイトルは /company/ アーカイブの各カードの最下行 にも表示されます
  • タイトルを変更すると URL スラッグも変わる可能性 があります。URL を維持したい場合は、タイトル直下の 「パーマリンク」 から明示的にスラッグ(現状 profile)を設定してください

編集対象2: アイキャッチ画像

ページ上部の大きな画像です。

編集場所

会社案内 > 会社概要 > 編集画面 右側(または下部)の 「アイキャッチ画像」 メタボックス

操作手順

  1. 編集画面で 「アイキャッチ画像」 メタボックスを探します
  2. 「アイキャッチ画像を設定」 をクリック
  3. メディアライブラリから画像を選ぶか、新規アップロードします
  4. 画面右上の 「更新」 ボタンを押します

注意点・コツ

推奨アップロードサイズ: 830 × 440px(横×縦) (テーマ内部の size9 で 830×440 のサイズが指定されています)

  • 縦横比が違う画像は 中央でトリミング されます
  • アイキャッチ画像は /company/ アーカイブのカード画像 にも使われます

編集対象3: 本文(ページビルダー)

会社概要の本文は ページビルダー で組み立てています。ページビルダーの基本操作は別ファイルにまとめています:

ページビルダーの使い方(90-common/page-builder.md)

以下は、会社概要ページに特有の構造とコンテンツの編集方法だけ説明します。

現状の構成

会社概要ページは 4つのブロック で構成されています:

ブロック 中身のコンテンツ
ブロック1 シンプルテーブル(会社情報)+ 見出し「本社」+ 文章(本社の地図iframe)
ブロック2 文章(地図のレスポンシブCSS)
ブロック3 見出し「支社」+ 文章(住所テキスト)+ 文章(支社の地図iframe)
ブロック4 文章(お問い合わせフォームのショートコード [contact-form-7 id="241"]

すべてのブロックは 1カラム100%幅 です。


3-1. シンプルテーブル(会社情報テーブル)

会社情報の 2列テーブル(左ラベル / 右内容)です。商号・設立日・本社住所・資本金・決算期・電話番号などが入っています。

シンプルテーブルの編集モーダル

操作手順

  1. ページビルダー内で 「シンプルテーブル」 コンテンツの上部見出しをクリック
  2. 編集モーダルが開きます
  3. 各行を編集します:
  4. 左の項目名(例: 「商号」「設立日」)
  5. 右の内容(例: 「株式会社Blooming」「2009年4月1日」)
  6. 行を追加するには 「項目を追加」 ボタンを押します
  7. 行を削除するには各行の 「削除」 リンクを押します
  8. 行を並べ替えるには 行のドラッグハンドル を上下にドラッグします
  9. モーダル右下の 「完了」 ボタンを押します
  10. 画面右上の 「更新」 ボタンを押して記事を保存します

注意点・コツ

  • 項目を追加・削除すると、テーブルの行数が変わります
  • 内容部分には改行を入れられます(複数行の住所など)
  • 内容部分にリンクや太字などの装飾を入れたい場合は、シンプルテーブルではなく 「文章」コンテンツ を使うか、後述のとおりHTMLで書く方法もあります(ただし通常は不要)

3-2. 見出し(「本社」「支社」)

地図の上に表示される 「本社」「支社」 という見出しです。

見出しコンテンツの編集モーダル

操作手順

  1. ページビルダー内で 「見出し」 コンテンツの上部見出しをクリック
  2. 編集モーダルで 見出しテキスト装飾種類(線・色など)を編集
  3. 「完了」「更新」

注意点・コツ

  • 装飾種類を変えるとサイト全体のデザインバランスに影響することがあります。現状の見出しデザインを維持する場合は装飾種類を変更しない ことを推奨

3-3. 文章(リッチエディタ・本文と地図iframe)

会社概要ページの 「文章」コンテンツ は、リッチエディタ(WordPress 標準のエディタと同じツールバー)で編集します。HTML や iframe を直接書くこともでき、現状は 地図の埋め込み(Google Maps の iframe)にも使われています。

文章コンテンツの編集モーダル

通常の文章編集

  1. ページビルダー内で 「文章」 コンテンツの上部見出しをクリック
  2. 編集モーダルでリッチエディタが開きます
  3. 文字の入力・太字・斜体・リンクなどを通常のエディタと同じ操作で編集
  4. 「完了」「更新」

地図 iframe の差し替え(本社・支社の地図)

本社・支社の地図は、それぞれ 「文章」コンテンツの中に Google Maps の <iframe> を直接書き込む 方式で実装されています。地図を差し替える場合は HTML 編集が必要です。

操作手順
  1. 地図の「文章」コンテンツの上部見出しをクリックして編集モーダルを開きます
  2. リッチエディタの右上にある 「テキスト」 タブをクリックして HTML 表示に切り替えます(「ビジュアル」「テキスト」のタブ切替)
  3. <iframe src="https://www.google.com/maps/embed?pb=..." ...></iframe> のような HTML が見えます
  4. 新しい iframe コード を Google Maps から取得して、既存の <iframe>...</iframe> 全体を置き換えます
  5. Google Maps で地図を表示 → 「共有」→ 「地図を埋め込む」→ コードをコピー
  6. 「ビジュアル」タブに戻して見え方を確認
  7. 「完了」「更新」
注意点・コツ
  • iframe を編集するときは「テキスト」タブで作業 してください。ビジュアル編集で iframe を編集すると壊れることがあります
  • iframe の widthheight 属性は触らない ことを推奨。CSS で自動調整されています
  • Google Maps の埋め込みコードを取得するときは 「中サイズ」 か、必要に応じてカスタムサイズで取得してください

地図のレスポンシブCSS(ブロック2)について

ブロック2には @media only screen and (max-width: 767px) { .google-map-iframe { height: 60vw; }} という CSS 指定が文章コンテンツに直接書き込まれています。スマホで地図を縦に大きく見せるためのスタイルです。

  • このブロックは通常は触らないでください。意図せず削除するとスマホ表示の地図サイズが崩れます

3-4. お問い合わせフォームの埋め込み位置

会社概要ページの 最下部にあるお問い合わせフォーム は、Contact Form 7(CF7)というプラグインで作られたフォームを、「文章」コンテンツの中にショートコード [contact-form-7 id="241" title="コンタクトフォーム 1"] で埋め込んでいます

CF7 ショートコードが入っている文章コンテンツ

このページではフォーム本体は編集しません

  • フォームの項目(名前・メール・お問い合わせ内容など)の追加・変更
  • 送信先メールアドレス・件名・本文の変更
  • 送信完了メッセージの変更

これらは Contact Form 7 の管理画面で行います。フォーム項目の編集は contact-form.md 章2、通知メールの編集は 章3、自動返信メールの編集は 章4、送信完了メッセージの編集は 章5 を参照してください。

このページで触る場合の操作

ショートコードの 位置を変える(フォームを別の場所に移す)場合や、ショートコード自体を一時的に削除する 場合のみ、このページビルダー内で操作します。

注意点・コツ

  • ショートコード [contact-form-7 id="241" title="コンタクトフォーム 1"]id="241" 部分は変更しないでください。フォームの ID が変わるとフォームが表示されなくなります
  • フォームを一時的に非表示にしたい場合は、このブロックの 「ブロックを削除する」 ボタンで一旦削除し、再度表示したい時にショートコードを 「文章」コンテンツ で復元してください
  • 別記事にも同じフォームを埋め込みたい場合は、同じショートコードをコピーして使えます

編集対象4: アーカイブカードの文言

/company/ 一覧ページの「会社概要」カードに表示される 見出し / サブ / 説明文 です。

詳しくは company.md > 編集対象6: アーカイブカードの文言 を参照してください。簡潔に手順だけ:

  1. 会社概要 編集画面の 「Archive page settings」 メタボックスを探します

会社概要のArchive page settingsメタボックス

  1. 下記3項目を編集します
  2. Title: 現状「会社概要」
  3. Sub title: 現状「PROFILE」
  4. Description: 現状「ランニングクラブ運営から商品開発、調査・研究など包括的に事業を展開しています。」
  5. 「更新」 ボタンを押します

編集対象5: Content header 設定(現状空欄)

会社概要 編集画面の 「Content header settings」 メタボックスは、個別記事ページの 追加の見出し を設定する欄ですが、現状の会社概要ページでは空欄のまま運用 しています。

Content header settings メタボックス(現状空欄)

通常は触る必要がありません。詳しくは message.md > 編集対象5 と同じです。


編集対象6: 公開状態

会社案内 > 会社概要 > 編集画面 右側の 「公開」 メタボックスで設定します。

  • 会社概要を 下書きに戻すと、/company/profile/ が 404 になります。同時にトップページの 3点カードの「PROFILE」も 404 リンクになります
  • お問い合わせフォームの埋め込み位置でもある ので、下書きに戻すと サイト全体でお問い合わせフォームが表示されなくなる 影響もあります
  • 本番運用中は基本的に公開状態を維持してください

変更が反映されないとき

症状 確認ポイント
ページビルダーで編集モーダルを「完了」したのに公開サイトで変わらない 編集画面の 右上「更新」ボタン を押すまで本番には反映されません
地図 iframe を差し替えたら地図が表示されない iframe コードのコピー時に <iframe ...></iframe> 全体をコピー できているか確認してください。途中で途切れていると表示されません
「テキスト」タブで iframe を編集したら HTML が壊れた 編集前の状態に戻したい場合は、「更新」を押さずにブラウザの戻るボタンで戻ってください。一度「更新」した後はバックアップから復元する必要があります
お問い合わせフォームが表示されなくなった ショートコードの [contact-form-7 id="241" title="コンタクトフォーム 1"] 全体が文章コンテンツに残っているか確認してください
スマホで地図がうまく表示されない ブロック2 のレスポンシブCSS(@media only screen ...)が削除されていないか確認してください
アイキャッチ画像を差し替えたのに変わらない キャッシュの可能性があります。ブラウザを 強制リロード(Shift + 再読み込み) してください