コンテンツにスキップ

ロゴ・ファビコン・サイト全体の見え方の編集方法

サイト全体に共通して表示される「見え方」の要素 — ロゴ画像、ファビコン(ブラウザタブの小さなアイコン)、SNSシェア時の OGP 画像、サイトタイトル — の編集方法をまとめています。


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

  1. ヘッダーロゴ(PC)
  2. ヘッダーロゴ(スマホ)
  3. フッターロゴ
  4. ファビコン(ブラウザタブの小さなアイコン)
  5. OGP画像(SNSシェア時に表示される画像)
  6. サイトタイトル・キャッチフレーズ(meta)

現状サイトでの見え方

PC ヘッダーのロゴ

PCヘッダーのロゴとグローバルメニュー

① ヘッダーロゴ / ② グローバルメニュー(→ グローバルメニュー

スマホヘッダーのロゴ

スマホヘッダーのロゴとハンバーガー

スマホ用のロゴは PC とは別画像を設定できます。

ファビコン・OGP画像

  • ファビコン: ブラウザのタブの左側に表示される小さな画像です(マニュアルにスクショは載っていませんが、ブラウザで rc-blooming.jp を開いた時のタブを見てください)
  • OGP画像: Facebook / X (Twitter) / Slack 等で URL を共有したときに表示されるサムネイル画像です

編集対象1: ヘッダーロゴ(PC)

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの 「ロゴの設定」タブ > 「ヘッダーロゴ設定」 セクション

操作手順

  1. 外観 > TCDテーマ を開きます
  2. 左サイドの 「ロゴの設定」タブ をクリック

ヘッダーロゴ設定(PC)

  1. 「ロゴ画像のタイプ」 で次のどちらかを選びます:
  2. テキストを使用する: サイトタイトル(「株式会社Blooming」)が文字で表示される(フォント色・サイズも設定可)
  3. 画像を使用する: 「ロゴの画像」欄でアップロード画像を使う(現状はこちら)
  4. 画像を変えたい場合は 「画像を選択」 ボタンからメディアライブラリを開いて画像を選びます
  5. ページ最下部の 「変更を保存」 ボタンを押します

注意点・コツ

  • 画像は 横長の透過 PNG が一般的です。現状利用中の画像と同程度のサイズ感(だいたい横 500〜800px、縦 100〜200px)が無難
  • レチナディスプレイ用のロゴ画像を使用する」にチェックを入れると、画像は 実寸の半分の幅で表示 されます
    例: 横 600px の画像をアップロード → 横 300px で表示。高解像度ディスプレイで綺麗に見せたい場合に使います
  • アスペクト比(縦横比)に合わせて自動でリサイズされます。極端な縦長や横長は避けてください

編集対象2: ヘッダーロゴ(スマホ)

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの 「ロゴの設定」タブ > 「ヘッダーロゴ設定(スマホ用)」 セクション

操作手順

  1. ロゴの設定タブを開きます(編集対象1と同じ)
  2. 画面を下にスクロールすると 「ヘッダーロゴ設定(スマホ用)」 セクションが出てきます

ヘッダーロゴ設定(スマホ用)

  1. PC 用と同様に「ロゴ画像のタイプ」「ロゴの画像」を設定します
  2. ページ最下部の 「変更を保存」 ボタンを押します

注意点・コツ

  • スマホでは表示エリアが狭いので、PC とは別の 小さめ・正方形寄りのロゴ画像 を用意するのが理想です
  • スマホ用を設定しない場合は PC 用ロゴがスマホでも縮小表示されます

編集対象3: フッターロゴ

フッターロゴはヘッダーロゴとは別の設定です。

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの 「フッター」タブ > 「会社情報設定」 セクション

詳しい操作は フッター > 編集対象1: フッターロゴ を参照してください。


編集対象4: ファビコン

ブラウザのタブの左側に表示される小さなアイコン画像です。検索結果やブックマークでも使われます。

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの 「基本設定」タブ > 「ファビコン設定」 セクション

操作手順

  1. 外観 > TCDテーマ を開きます
  2. 左サイドの 「基本設定」タブ をクリック(初期表示で開いているタブです)
  3. 上から 「色設定」 の次に 「ファビコン設定」 があります

ファビコン設定

  1. 「画像を選択」 ボタンからファビコン画像を選びます
  2. ページ最下部の 「変更を保存」 ボタンを押します

注意点・コツ

  • 推奨サイズ: 512×512px の正方形 PNG
    (管理画面の表記には「width:16px, height:16px」とありますが、これは古い基準です。現代のブラウザは高解像度ディスプレイ用に大きめの画像を縮小表示するので、512×512px 程度の正方形画像を用意してください)
  • ⚠️ ファビコン設定は 「外観 > TCDテーマ > ファビコン設定」「カスタマイザー > サイト基本情報 > サイトアイコン」 の2か所で設定できますが、本サイトでは TCDテーマ側に統一しています。両方に違う画像を設定すると競合する可能性があるので、編集する場合は TCDテーマ側だけを使ってください

編集対象5: OGP画像

OGP(Open Graph Protocol)画像は、Facebook / X (Twitter) / Slack / LINE などのSNSや、メールアプリで URL を共有したときに、リンクのプレビュー画像として表示される画像です。

編集場所

管理画面 > 外観 > TCDテーマ > 左サイドの 「基本設定」タブ > 「Facebook OGP設定」 セクション

操作手順

  1. 外観 > TCDテーマ > 基本設定タブを開きます
  2. 画面を下にスクロールして 「Facebook OGP設定」 セクションを探します

Facebook OGP設定 / Twitter Cards 設定

  1. 「OGPを使用する」 にチェックを入れます
  2. 「OGP用画像」「画像を選択」 から画像を選びます
  3. 「Twitter Cards設定」 は X (Twitter) で共有された時の見え方を制御します
  4. 「Twitter Cardsを使用する」 チェック
  5. 「Twitterアカウント名」 に @ なしの Twitter アカウント名を入力
  6. ページ最下部の 「変更を保存」 ボタンを押します

注意点・コツ

  • 推奨サイズ: 1200×630px(コードで明示されている TCD テーマの推奨値)
  • OGP画像は、個別の記事に アイキャッチ画像 が設定されている場合はそちらが優先されます。ここで設定する画像は アイキャッチがないページのフォールバックとして使われます
  • 「Twitter Cardsを使用するには Facebook OGP 設定が必要です」と書かれているとおり、Twitter Cards を使うなら 必ず Facebook OGP 設定も ON にしてください

編集対象6: サイトタイトル・キャッチフレーズ(meta)

「株式会社Blooming」「楽しく、自分を知って、健康に」というサイトのタイトルとキャッチフレーズです。ブラウザのタブ名・Google 検索結果のページタイトル・ログイン画面の表示等で使われます。

編集場所

管理画面 > 外観 > カスタマイズ(カスタマイザー) > 「サイト基本情報」

操作手順

  1. 管理画面 > 外観 > カスタマイズ を開きます
  2. 左サイドメニューから 「サイト基本情報」 をクリック

カスタマイザー > サイト基本情報

① サイトのタイトル / ② キャッチフレーズ / ③ サイトアイコン(このサイトでは使わない)

  1. 「サイトのタイトル」: 現状「株式会社Blooming」
  2. 「キャッチフレーズ」: 現状「楽しく、自分を知って、健康に」
  3. 画面上部の 「公開」 ボタンを押して保存します

注意点・コツ

  • ⚠️ サイトのタイトルは、フッターのコピーライト表示にも使われます。「Copyright © 株式会社Blooming All Rights Reserved.」の太字部分です。サイトタイトルを変えると、コピーライトも自動で連動して変わります(→ フッター > 編集対象5: コピーライト
  • 「サイトアイコン」欄でファビコンも設定できますが、本サイトでは TCD テーマ側の「ファビコン設定」 に統一しています(→ 編集対象4: ファビコン)。ここのサイトアイコンは設定しないでください
  • カスタマイザーは公開前にプレビューで確認できます。「公開」ボタンを押さずに別画面に移動すると、変更は破棄されます

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

ロゴを変更したのにサイトに出ない

  • TCDテーマ画面のページ最下部にある 「変更を保存」 ボタンを押しましたか?
  • ブラウザのキャッシュが残っている可能性があります。Ctrl + Shift + R(Mac は ⌘ + Shift + R)で強制リロードしてください

ファビコンが変わらない

  • ファビコンは ブラウザ側でキャッシュが特に強く 効きます。Ctrl + Shift + R で強制リロードしても、タブのアイコンだけ古いままになることが多いです
  • 一度ブラウザを完全に閉じてから開き直すと反映されることがあります
  • 別のブラウザで開いて、新規ブラウザでは新しいアイコンが見えるか確認してください

OGP画像が SNS で古いまま表示される

  • Facebook / X (Twitter) / LINE 等の SNS は、URL ごとに 独自のキャッシュ を持っています
  • Facebook は Sharing Debugger(要 Facebook ログイン)で URL を再スクレイピングできます
  • X (Twitter) は Card Validator で確認できます(仕様変更が多いので動かない時期もあります)
  • 各 SNS のキャッシュが更新されるまで、最大1〜2週間かかることもあります

サイトタイトルを変えたのにブラウザのタブ名が古いまま

  • カスタマイザーで 「公開」 ボタンを押しましたか?プレビュー表示だけでは反映されません
  • ブラウザのタブ名はキャッシュされやすいので、強制リロードしてください

関連