ワードプレス・作り方

5.テーマオプションの設定

2026.03.01

目安時間 64分

Contents

1 5.テーマオプションの設定

5.テーマオプションの設定

TCDシリーズの特長であるテーマオプションの各設定項目についてはこちらをご覧ください。

テーマの表示設定や広告の設定などをコード編集を要さずに行うことが出来ます。
まず、ダッシュボード左メニュー【TCDテーマオプション】を開いてください。

5-01. テーマオプション：基本設定

色の設定

サイトのメインカラー、サブカラー、サブカラー2、記事本文内のリンク文字色を設定します。

すりガラス背景の設定

ヘッダーやトップページ上でタイトルの背景に表示されるすりガラス背景を設定します。

すりガラス背景の表示サンプル

ファビコンの設定

ブラウザのアドレスバーやタブで表示されるファビコン（サイトアイコン）を設定します。

推奨サイズは16px×16pxとなります。

フォントタイプ

Ver1.21のテーマアップデートでフォント機能が新しくなりました。
操作方法は以下の記事をご参照ください。
>> WordPressテーマTCDで搭載された美しいフォント

見出し以外のすべてのテキスト要素で使用するベースフォントを選択できます。

大見出しのフォントタイプ

大見出しにあたるテキスト要素で使用するベースフォントをフォントタイプで設定したフォントから選択します。

※主な適用箇所：ロゴテキスト表示時のサイトタイトル、トップページの見出し要素、詳細ページの記事タイトル

レイアウトの設定

サイドバーのあるページのサイドバーの表示位置をサイドバー・左、サイドバー右からお好みで設定します。

サムネイルのホバーエフェクト

サムネイル画像のホバーエフェクトのタイプを、「ズーム」「スライド」「フェード」の中から1つ選択可能です。
ホバーエフェクトのタイプを選択し、タイプ別のオプション設定を行ってください。
（※ホバーエフェクトのタイプを選択を変更することで各オプション項目が表示されます。）

ズーム：指定した拡大率で、サムネイル画像が拡大します。
スライド：サムネイル画像が「右」「左」の指定した位置に横に移動します。
また、指定した透明度の数値で画像が透過します。
フェード：指定した透過率で画像が透過します。
透過した際に、設定した「背景色」が透けて見える状態になります。

ソーシャルボタンの設定

記事詳細ページの記事上下に表示するソーシャルボタン（シェアボタン）の表示設定を行います。

設定サンプル

赤枠部分で記事上ソーシャルボタン、青枠部分で記事下ソーシャルボタンの設定を行います。

①ボタンタイプの選択

表示するボタンタイプを1～5の中から選択します。

Facebookいいねボタンは「ボタンタイプ5（公式ボタン）」を選択時のみ表示されます。
「ボタンタイプ5（公式ボタン）」を選択時、RSSボタンは表示されません。
PinterestのPin itボタンの仕様上、同一ページ内で「ボタンタイプ5（公式ボタン）」と「ボタンタイプ1～4」を混同することによりデザインが崩れて表示される場合がございます。そのため、Pin itボタンは、記事上か記事下のいずれか一方（1ページにつき1つ）に表示させる設定を推奨いたします。

②ボタンタイプの選択

表示するボタンを個別に設定できます。表示するボタンにチェックを入れてください。

③Xボタンの設定

次に、上図③の箇所でXボタンの設定を行います。
Xボタンを表示する場合には、Xアカウント名（@なし）を設定してください。
最後に、設定を保存して完了です。

Facebook OGPの設定

Facebook OGPを利用する場合はチェックを入れ、fb:app IDを入力し設定を保存します。
fb:app IDの取得方法については下記ページをご参照ください。
FacebookのOGP設定に必要なfb:app IDの取得方法
また、「OGP用画像」に画像を登録する事でアイキャッチのない投稿記事やアーカイブページなどでOGP画像として利用されます。

X Cardsの設定

X Cardsを利用する場合はチェックを入れ、Xアカウント名（＠無し）を入力し設定を保存します。
詳しくは下記ページをご参照下さい。
Twitter Cards（ツイッターカード）を設置する方法

当テーマのX CardsはFacebook OGPの設定がなしの場合には表示されない仕様となっております。ご利用の際は必ずFacebook OGPの設定を行って下さい。

絵文字の設定

記事本文に絵文字を使いたい場合にチェックをいれてください。
※チェックが外された場合、絵文字関連のjavascript等を読み込まないため、ページの表示速度が改善されます。

クイックタグの設定

各投稿や固定ページでクイックタグ機能を使用する場合はチェックを入れてください。
参照：クイックタグ機能について

サムネイル用オリジナル代替画像

アイキャッチ画像が表示されていない投稿に使用される代替画像（Noimage画像）を任意の画像にカスタマイズできます。代替画像1～5に設定した画像はそれぞれ下記の箇所で使用されます。

代替画像1･･･正方形のサムネイル画像全般
代替画像2･･･カスタム投稿「ブログ」、「キャンペーン」記事一覧
代替画像3･･･カスタム投稿「サービス」、「クリニック」、「スタッフ」記事一覧

ロード画面の設定

ページ遷移時に表示されるロード画面（白背景に読込中を示すアイコンを表示）を設定します。
ロード画面を表示させる場合、「ロード画面を表示する」項目にチェックを入れてください。

①ロードアイコンタイプの選択

アイコンタイプを4種類(サークル、スクエア、ドット、ロゴとキャッチフレーズ)から選択してください。

②色の設定

アイコンのメインカラー、サブカラーとロード画面の背景色を設定可能です。

③最大表示時間の設定

ロード画面の最大表示時間を設定します。3秒～10秒の間で1秒刻みで設定可能です。

④ロゴの設定

ロードアイコンタイプ「ロゴとキャッチフレーズ」で表示させるロゴ画像をアップロードしてください。

⑤キャッチフレーズの設定

ロードアイコンタイプ「ロゴとキャッチフレーズ」でロゴ画像下部に表示させるキャッチフレーズを入力し、フォントタイプ、文字サイズ（PC、スマホ）、文字色を選択してください。

Googleマップの設定

投稿や固定ページでページビルダーコンテンツ「Googleマップ」を使用した際のピンマーカーの表示スタイルを設定します。
マーカータイプを「デフォルトマーカーを使う」or「カスタムマーカーを使う」から選択できます。

ここで行った設定は、
・カスタム投稿タイプ「クリニック」投稿編集画面＞設定項目「所在地の住所」
・ページビルダー＞【Googleマップ】
の2箇所に反映されます。
※ページビルダー＞【Googleマップ】では「マーカータイプ」で「テーマオプションの設定を使用する」を選択してください。
※ページビルダー＞【Googleマップ】のみ、ここで行った設定とは別にページビルダー側の設定項目「マーカータイプ」にて地図ごとに個別にマーカータイプの設定を行うことができます。

【事前準備】APIキーを取得する

APIキーの取得方法については、下記より手順をご参照ください。
参照：Google Mapsの表示にはAPI登録が必須になりました

デフォルトマーカーを使う

Google Mapsのデフォルトピンマーカーを表示します。

APIキーを入力し「デフォルトマーカーを使う」を選択し、保存します。

カスタムマーカーを使う

吹き出しスタイルのカスタムピンマーカーを表示します。

APIキーを入力し「カスタムマーカーを使う」を選択し、カスタムマーカータイプの選択（テキストor画像）、カスタムマーカーに表示する内容（テキストor画像）、カスタムマーカー（吹き出し）の背景色を設定します。

カスタムマーカーは80px x 80pxの固定サイズとなっています。マーカータイプで「画像」を選択した場合のロゴ画像等の推奨画像サイズは60px x 20pxとなっており、それ以上のサイズだと吹き出しからはみ出して表示されます。

カスタムCSS

こちらに任意のCSSを記入することでテーマのデザインをカスタマイズすることができます。
記入されたCSSは、HTML上の～タグ内（テーマで利用しているCSSファイルよりも後）に読み込まれます。

使用方法については下記ページをご参照下さい。
「カスタムCSS」の使用方法

このように、テーマファイルに手を加えることなく、デザインをカスタマイズしたい特定の要素のみにCSSを適用させることができます。また、テーマファイルを直接編集した場合とは違い、テーマ更新を行ってもここで設定したCSSはそのまま継承されます。ぜひ有効にご活用ください。

CSSに関する知識が前提となります。CSSの追加により生じた不具合に関してはサポート対象外となります。あらかじめご了承ください。サイトのデザインやレイアウトが崩れた場合は追加したCSSを削除してください。

元々のテーマで利用しているCSSに上書きする仕様のため、追加するCSS定義によってはうまく反映されない場合があります。

デザインを変更したい要素のid名やclass名の特定にはFirefoxアドオン「Firebug」やChromeデベロッパーツールが便利です。
下記で使用方法をご紹介しています。
サイトのカスタマイズが劇的に捗るFirefoxアドオン「Firebug」
サイト検証・カスタマイズに便利なChromeデベロッパーツールの基本的な使い方

5-02. テーマオプション：ロゴの設定

ロゴの設定方法は下記をご参照ください。

参照：4-01. ロゴの設定

5-03. テーマオプション：トップページ

トップページに表示されるコンテンツの表示設定を行います。

トップページの設定方法は下記をご参照ください。

参照：3.トップページの表示仕様と設定箇所

5-04. テーマオプション：ブログ

ブログアーカイブページ、ブログ記事詳細ページの各設定を行います。

基本設定

設定サンプル

コンテンツの名前

パンくずリンク、ページタブに表示する名前を任意の文言に変更できます。（変更した場合、ダッシュボードでの投稿タイプ名にも反映されます）

色の設定

カテゴリーアイコンの文字色と背景色を設定します。また、マウスオーバー時の文字色と背景色も設定します。（アーカイブページ、記事詳細ページ共通）

アーカイブページの設定

ブログアーカイブページの設定を行います。

ブログアーカイブページの表示サンプル

デモサイト – ブログアーカイブページ

①ヘッダーの設定

設定サンプル

アーカイブページのヘッダーの表示設定を行います。キャッチフレーズと説明文（文字サイズ / 文字色）、記事一覧のタイトルの文字サイズと文字色、背景画像（PC・スマホ）、オーバーレイ（画像の上に重ねる色）」を設定してください。

背景画像（スマホ用）が未設定の場合、PC用画像を使用します。

②アーカイブページの設定

設定サンプル

アーカイブページの記事一覧の文字サイズ（PC、スマホ）、文字色、日付ならびにカテゴリーの表示の有無を設定します。

詳細ページの設定

ブログ記事詳細ページの設定を行います。

ブログ記事詳細ページの表示サンプル

デモサイト – ブログ記事詳細ページ

設定サンプル

①文字サイズの設定

記事タイトル/記事本文のフォントサイズ（PC・スマホ）を設定します。