TCD テーマ「Be」のテーマオプション設定を徹底解説

ブログの始め方

TCD「Be」のテーマオプション設定を徹底解説

この記事は約 14 分で読めます。

ユウキです。

今回は WordPress テーマの中でも、デザイン性に定評のある TCD シリーズのブロガー用に特化した、「Be」のテーマオプション設定ついて解説していきます。

TCD「Be」はどんな WordPress テーマか?についてはこちらの記事を参考にどうぞ。

目次

基本設定

基本設定は、カラーやフォント、CSSなど、ブログの土台となる部分の設定項目です。

カラー設定

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

各項目がどの部分に該当するかは、画像を参考にしてください。

TCD「Be」のカラー設定

ブログのカラーイメージがまだ決まっていなければ、あなたが参考にしているブログを見ながら、以下のサイトでカラーコードを選んでみてください。

ファビコンの設定

ファビコンの設定ができます。

ブラウザのタブや、ブックマークのアイコンとして表示される部分で、画像の位置となります。

ファビコンの設定

ファビコンで使う画像を用意していない場合は、ICOOON MONO というサイトが便利ですので、好みのアイコンを選んでみてください。

フォントタイプ

見出し以外で適用するテキストのフォントを【メイリオ】、【游ゴシック】、【游明朝】の3つから選んで設定できます。

とくにこだわりがなければ、デフォルトで設定されているメイリオが見やすくておすすめです。

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

見出しで適用するフォントを上記と同じ3つから選んで設定できます。

こちらもこだわりがなければ、デフォルトで設定されているメイリオをおすすめします。

サイドバー表示設定

デフォルトでは、2カラムでサイドバーが左に配置されています。

チェックボックスにチェックを入れることで、サイドバーを右に配置できます。

固定ページやウィジェットの設定で、サイドバーを表示しない場合は1カラムのデザインになります。

ロード画面設定

ブラウザでページを開いた際、読み込みが完了するまでの間に表示するアイコンを設定します。

【アイコン画像】、【最大表示時間】、【メインカラー】、【背景色】の設定項目がありますが、デフォルト設定でも問題ありません。

ホバーエフェクト設定

投稿のサムネイル(=アイキャッチ)画像にカーソルを合わせた際のエフェクトを設定できます。

ホバーエフェクト設定

ホバーエフェクトのタイプ

デフォルトは【ズーム】で、【スライド】と【フェード】、【エフェクトなし】から選べます。

エフェクトは設定して動きを取り入れた方が、視覚効果で目にとまりやすくなるので、いずれかのエフェクトを設定してみてください。

ズーム設定

カーソルを合わせた際の【拡大率】、【透明度】、【背景色】を設定できます。

エフェクトを確認しながら、好みのものを選んでみてください。

SNSボタン設定

ヘッダーとフッターに表示する SNS のリンク設定と、表示・非表示の変更ができます。

関連した SNS のアカウントがあれば、必ず設定しておきましょう。

ヘッダーの SNS ボタン表示位置

フッターの SNS ボタン表示位置

FacebookのOGP設定

FacebookでURLを記載した際に、サムネイル画像やタイトルなどが表示できるようにする設定項目です。

設定するためにはFacebook開発者ツールで設定する必要があります。

FacebookのOGP設定に必要なfb:app IDの取得方法|TCD

SNS で投稿をシェアする際、目にとまりやすくなるので、必ず設定しておきましょう。

Twitter Cards設定

上記と同様に、TwitterでURLを記載した際に、サムネイル画像やタイトルなどが表示できるようにする設定項目です。

表示するためには、FacebookのOGP設定が必要です。

Twitter Cards(ツイッターカード)を設置する方法|TCD

こちらも Facebook の OGP 設定と同様に必ず設定しておきましょう。

ソーシャルボタンの表示設定

記事の上部と下部に表示するSNSボタンのデザイン選択と、表示・非表示の変更ができます。

デザインは以下の5種類です。ブログとのバランスで選んでみてください。

ソーシャルボタンのデザイン

記事の表示位置はこちらを参考に。

ソーシャルボタンの表示設定

Google マップ設定

Google Cloud Platform にて、API キーを取得することで、ページに Google マップを埋め込むことができます。

個人ブログで Google マップを埋め込むケースは多くないと思いますが、利用する際は、TCD のサポートサイトを参考に、API キーの取得と設定をしてみてください。

API キーの取得方法はこちら

Google マップのデザインを変更したい場合はこちら

不要な場合は空欄で進めましょう。

カスタム CSS

テーマファイルを直接編集せずに、デザイン変更や追加ができます。

好みの見出しデザインに変更したり、囲み枠などを追加したい場合はこちらにコードを記載して、設定を保存してください。

カスタム CSS

デザインやコードについてよく分からない場合は、こちらの記事を参考にして好みのデザインを追加されたください。

デザインを追加した場合は、プラグインの【AddQuicktag】をインストールして設定するとビジュアルエディターにプルダウンメニューが表示されて、編集しやすくなり便利です。

プラグインの【AddQuicktag】のインストール

カスタムスクリプト

Google アナリティクスのスクリプトなどを設定保存できます。

All in One SEO Pack を利用する場合は不要ですので、空欄にしておきます。

All in One SEO Pack の設定はこちらを参考にしてみてください。

ロゴ設定

ヘッダーに表示するサイトロゴをテキスト、もしくは画像にて設定できます。

レティナディスプレイに対応することも可能です。(2倍の画像サイズを通常のディスプレイに表示することができる機能)

ヘッダーに表示するサイトロゴを設定

トップページ

ヘッダーと投稿一覧の間に表示する、サイトのファーストビュー(第一印象を決めるコンテンツ)を設定できます。

投稿のレイアウトも変更が可能です。

ヘッダーコンテンツの設定

はじめに【ヘッダーコンテンツを表示する】のチェックボックスがあるので、任意で選んでください。

チェックすると、画像のようにコンテンツが表示されます。

ヘッダーコンテンツの設定

表示するコンテンツは、以下の3つから選べます。

  • 画像スライダー
  • MP4動画
  • YouTube動画

選択すると、キャッチフレーズや説明文、ボタンの表示など詳細設定も可能です。

スッキリとした、シンプルな印象にしたい場合は、非表示にすると一般的なブログのデザインにできますよ。

ヘッダーコンテンツを非表示したイメージ

ブログコンテンツの設定

ヘッダーコンテンツの下の位置に、ブログ記事をカルーセル(スライド形式)で表示設定できます。

表示したい場合はチェックボックスにチェックして、以下の項目を設定します。

  • 投稿のタイプ:カテゴリー、おすすめ、ピックアップ、すべてから選択
  • 表示する記事の数:5~25ページの範囲で選択
  • 記事の表示順:日付の新旧、閲覧数、ランダムから選択
  • 表示設定:日付とカテゴリーの表示・非表示を選択
  • ネイティブ広告の設定:設定した広告の表示・非表示を選択
  • ネイティブ広告の表示位置:設定した数字の間隔で広告表示
  • カルーセルが切り替わる間隔:1秒単位で設定可能

ブログコンテンツ設定

トップページのレイアウト設定

3つのレイアウトから、パソコンとスマホをそれぞれ変更可能。

適用されるのはトップページで、アーカイブページはブログ設定で変更できます。

トップページのレイアウト設定

フリースペース

ブログコンテンツの下にテキストを表示できます。

テキストは装飾も可能です。

フリースペースの設定

タブコンテンツの設定

フリースペースと記事の間に配置するタブを設定できます。

設定したタブで、カテゴリーやおすすめ記事、任意の投稿を切り替えられるようになります。

タブコンテンツの設定

ブログ

ブログ設定では、記事に関連した詳細設定ができます。

ブログの設定

パンくずリストのトップに表示するテキストを編集できます。

とくにこだわりがなければ、デフォルトの【BLOG】で大丈夫です。

アーカイブページのレイアウト設定

トップページと同様に、3つのレイアウトから、パソコンとスマホをそれぞれ変更可能。

適用されるのはアーカイブ(カテゴリーなど)ページです。

アーカイブページヘッダーの設定

アーカイブ(カテゴリーなど)ページのヘッダーに画像を表示します。

画像部分のテキストなども編集可能です。

アーカイブページヘッダーの設定

アーカイブページのネイティブ広告設定

アーカイブページに広告を表示するかと、表示間隔を設定可能です。

記事詳細設定

ブログ記事のフォント、色、ページ送りのデザインを設定できます。

記事タイトルのフォントタイプ

【メイリオ】、【游ゴシック】、【游明朝】から選択できます。

とくにこだわりがなければ、メイリオで統一することをおすすめします。

記事タイトルのフォントサイズ

PC とスマホ表示でそれぞれフォントサイズを指定できます。

本文のフォントサイズとの対比を考慮して、20~22px で設定しましょう。

当ブログのタイトルは 22px で統一していますので、参考にしてみてください。

記事本文のフォントサイズ

こちらも PC とスマホ表示でそれぞれフォントサイズを指定できます。

Google の推奨フォントサイズを考慮して、16~18px で設定しましょう。

当ブログのタイトルは 16px で統一していますので、参考にしてみてください。

記事詳細ページ本文の文字色

フォントカラーを指定できます。

背景とのコントラスト比を考慮して、見づらくなければ基本的に自由に設定できます。

注意点は、読む際のノイズ(=ストレス)にならないことで、こだわりがなければデフォルト設定で問題ありません。

ページ分割の表示スタイル

ページ分割(=ページ送り、ページネーション)は、1、2、3…と表示するページャーと、「続きを読む」ボタンを表示する2つから選べます。

ページャー
続きを読む

ちなみに、投稿を個別に設定することも可能ですが、とくにこだわりがない場合は、テーマオプションで一括設定した方が後で変更もできて便利だと思います。

ページ送りを利用する場合は、All in One SEO Pack の設定で重複コンテンツとして扱われないように設定しましょう。

All in One SEO Pack でページ送りの設定

表示設定

画像のように以下の項目が設定できます。

複数の執筆者で運営することを想定した設計ですので、個人で運用する際は画像のように設定すれば大丈夫です。

ブログの表示設定

投稿者プロフィールの設定

ブログ記事の末尾に、WordPress のユーザーで設定した投稿者のプロフィールを表示できます。

投稿者プロフィールの表示位置

表示したい場合は、WordPress のユーザー設定プロフィールで、【投稿者プロフィールを表示する】にもチェックします。

投稿者プロフィールを表示する

関連記事設定

ブログ記事の下に関連記事を表示する設定で、フッターのブログコンテンツとは別になります。

関連記事設定

以下の項目が設定できます。

  • 関連記事一覧の見出しタイトル
  • 表示記事数
  • ネイティブ広告の設定
  • ネイティブ広告の表示位置

記事詳細の広告設定1

ブログ記事の末尾に表示する広告を左右2つ設定できます。

アドセンス広告や、各種ASPのアフィリエイトコード、独自コンテンツの設定も可能です。

記事詳細の広告設定2

ブログ記事の中に任意で表示する広告を左右2つ設定できます。

編集時に、指定のショートコードを記載することで表示されます。

スマートフォン専用の広告

スマホのみで表示される広告の設定で、HTMLコードを登録することで利用できます。

設定した広告は、【記事詳細の広告設定1】の代わりに記事の末尾にて表示されます。

ヘッダー

グローバルメニューに関連した設定になります。

ヘッダーの位置

パソコンのヘッダー表示方法を変更できます。

追尾させた方が、ユーザーの利便性が向上すると思いますので、おすすめです。

  • 通常の表示位置:上部に固定されて、スクロールすると画面表示から消える。
  • ページ上部に固定表示:ヘッダーがスクロールに合わせて追尾する。

ヘッダーの位置(モバイル用)

内容は上記と同様で、スマホ表示の方法を変更できます。

ヘッダーの色

ヘッダー(グローバルメニュー)のカラーを設定できます。

  • 背景色の設定:任意のカラーコードを設定
  • 固定ヘッダーの背景色透過率:追尾する際のヘッダー透過率を調整
  • 文字色の設定:SNSアイコンやメニュー、虫眼鏡アイコンの色を設定

ヘッダー検索設定

ヘッダーに検索フォーム(=虫眼鏡アイコン)を設定できます。

表示位置はこの位置で、ユーザーの利便性を向上させるために、表示しておきましょう。

ヘッダーキャッチフレーズの設定

ヘッダーのロゴ下にテキストを表示できます。

フォントカラーとサイズも変更可能です。

グローバルメニュー表示設定

グローバルメニューにカーソルを合わせた際の表示デザインを設定できます。

グローバルメニュー表示設定

グローバルメニューの色設定

ドロップダウンメニュー、メガメニューA、メガメニューBの文字色や背景色が設定できます。

ドロワー設定

ブラウザの横幅が狭い場合、グローバルメニューをバーガーボタンで表示します。

ドロワー設定では、バーガーボタンで表示される文字や背景色、広告の設定ができます。

ドロワー設定

フッター

ブログ記事末尾から下部分の設定項目になります。

ブログコンテンツ設定

フッター部分でブログ記事のカルーセル(スライド)を表示します。

  • トップページで表示する:トップページで表示するか選択
  • 下層ページで表示する:アーカイブや記事で表示するか選択

フッターのブログコンテンツ設定

投稿のタイプ

  • カテゴリー:カテゴリーの中から選択
  • おすすめ記事:投稿編集で設定した記事を表示
  • おすすめ記事2:上記と同じ
  • ピックアップ記事:上記と同じ
  • すべての記事:すべての投稿から表示順の設定に沿って表示

表示する記事の数

カルーセル表示する記事の数を設定。

記事の表示数

カルーセル表示するブログ記事の表示順をプルダウンメニューから選択できます。

  • 日付(新しい順)
  • 日付(古い順)
  • 閲覧数(多い順)
  • ランダム

表示設定

以下の項目を表示するか設定できます。

  • 日付を表示する
  • カテゴリーを表示する

ネイティブ広告の設定

ネイティブ広告設定で登録した広告を、カルーセル表示に含めるか選択できます。

ネイティブ広告の表示位置

設定した数字の間隔で、カルーセルに広告が表示されます。

カルーセルが切り替わる間隔

設定した間隔でカルーセルがスライドされます。

フッターウィジェットの設定

背景色のカラーコードを選択できます。

コピーライト設定

ページ最下層に表示するコピーライトを編集できます。

フォントの色

コピーライトのフォントを変更できます。

背景色

コピーライト表示エリアの背景色を変更できます。

著作権表示

表示したい任意のテキストを編集できます。

スマホ用固定フッターバー設定

スマホ表示のみに適用されるフッターバーの設定ができます。

フッターバーの表示方法

以下の選択項目から選べます。

  • フェードイン
  • スライドイン
  • 非表示

フッターバー外観設定

フッターバーを表示する場合、以下の設定ができます。

  • 背景色
  • 枠線の色
  • フォントの色
  • 背景色の透明度

フッターバー内容設定

  • リンク先を新しいタブで表示( target=”_blank” の設定)
  • ボタンのタイプ:デフォルト(任意のURL)、シェア(SNS)、電話番号から選択
  • ボタンのラベル:任意のボタン名を設定
  • リンク先のURL:任意のリンクURLを設定
  • ボタンのアイコン:6種類のアイコンから選択

404ページ設定

URL が有効ではない(コンテンツのない)ページだった場合にユーザーへ返す、404(Not found)ページの設定ができます。

404ページ設定

ヘッダー画像

テキスト表示部分の画像を設定できます。

オーバーレイの色

設定した画像に重ねるオーバーレイ(カラー)を設定できます。

オーバーレイの透明度

上記で設定した画像の透明度を設定できます。

キャッチフレーズ

見出し部分のテキストを編集できます。

説明文

上記キャッチフレーズのすぐ下に表示するテキストを編集できます。

キャッチフレーズのフォントサイズ(PC・スマホ)

キャッチフレーズのテキストサイズをPCとスマホで別に編集できます。

説明文のフォントサイズ(PC・スマホ)

説明文のテキストサイズをPCとスマホで別に編集できます。

フォントの色

表示するテキストのフォントカラーを選択できます。

ドロップシャドウ設定

表示するテキストに影を設定できます。

ネイティブ広告の設定

サイト内で表示する任意の広告を6種類設定できます。

設定した広告はテーマオプションの機能で記事の末尾や、記事内に配置が可能です。

広告タイトル

記事表示のタイトル部分に表示するテキストです。

キャッチフレーズを設定できます。

広告ラベル

記事表示の日付部分に表示するテキストで、推奨設定は【PR】や【広告】となります。

スポンサー名

記事表示のカテゴリー部分に表示するテキストで、スポンサー名などを設定できます。

広告説明文

記事表示の本文抜粋部分に表示するテキストを設定できます。

広告画像

任意の広告画像を設定できます。

リンク先URL

任意の広告URL(アフィリエイトリンク)を設定できます。

クイックタグ

TCD「Be」に同梱されているクイックタグをエディタに表示設定できます。

利用する場合、以下の【ボタン】、【アンダーライン】、【吹き出し】の詳細設定ができます。

クイックタグ設定

チェックボックスにチェックすることで、エディタにクイックタグのプルダウンメニューが表示されます。

ボタンクイックタグの設定

ボタン1~3の設定が編集できます。

ボタンのタイプ

3つのタイプから選択できます。

  • フラットボタン
  • 角丸ボタン
  • ラウンドボタン

ボタンサイズ

大、中、小の3つのサイズから選択できます。

カラー設定

以下の設定が可能です。

  • フォントの色
  • 背景色
  • カーソルを合わせた時の文字色
  • カーソルを合わせた時の背景色

アンダーラインクイックタグ設定

アンダーラインのカラーを設定できます。

エディタのテキスト編集でカラーコードを変更することもできます。

吹き出しクイックタグの設定

左右で各2つ、吹き出しに使うベース設定ができます。

エディタの編集でユーザー画像とユーザー名については変更可能です。

吹き出しクイックタグの設定

ユーザー設定

任意のユーザー画像を設定します。

フリーのイラスト画像を使いたい場合は、以下のサイトを参考にしてみてください。

ユーザー名

任意のユーザー名を設定できます。

フォントの色

吹き出し内のフォントカラーを設定できます。

背景色

吹き出しの背景色を設定できます。

枠線の色

吹き出しの枠線を設定できます。

保護ページの設定

投稿や固定ページでパスワード保護の設定をした際のデザインを変更できます。

TCD の公式サポートページに関連コンテンツがあるので参考にしてみてください。

WordPressで会員限定向けコンテンツが配信できる「パスワード付き保護ページ」が作れるテーマ|TCD

パスワード欄とボタンの配置設定

パスワード入力欄とボタンの配置位置を【左寄せ】か【中央寄せ】から選択できます。

パスワード欄の設定

パスワード入力欄左に表示するテキストを設定できます。

会員登録への誘導コンテンツ

【ボタン設定】と【会員登録への誘導文】は最大5つ設定内容を保存できます。

投稿と固定ページにて、ここで設定したものから選ぶことができます。

ボタン設定

表示すると、パスワード入力欄の上部にボタンが表示されます。

メルマガ登録や、公式 LINE 登録のリンクを設定できます。

会員登録への誘導文

ボタンの上部にテキストを表示します。

ビジュアルエディタが利用できるので、文字装飾も簡単に編集可能です。

高速化の設定

サイトの表示速度を速めるための内部構造を最適化する設定です。

絵文字の設定

ブログ記事で絵文字を使わない場合はチェックを外します。

絵文字の表示に必要な javascript コードなどを読み込まなくなるため、ページの表示速度を改善できます。

とくにこだわりがなければチェックを外すことをおすすめします。

Lazyloadの設定

画像の遅延読み込み設定をします。

画像の遅延読み込みは、Google も推奨しているため、プラグインなどで設定していなければチェックしておきましょう。

最適化の設定

その他、ページの表示速度に関連する最適化設定ができます。

JavaScript コードの最適化

JavaScript コードの余白や改行を取り除く設定です。

CSS コードの最適化

CSS コードの余白や改行を取り除く設定です。

また、テーマファイルにある共通 CSS のキャッシュファイルを作成して、読み込み速度を改善してくれます。

ただし、カスタム CSS や、外部の CSS には適用されません。

HTML コードの最適化

HTML コードの余白や改行を取り除く設定です。

<p>&nbsp;</p> ←こういったHTML コードがページを表示する際に自動削除されます。

CSSで余白の調整をしない場合は、チェックボックスのチェックを外しておきましょう。

テーマオプション管理

TCD テーマオプションのファイル管理機能です。

エクスポート

TCD テーマオプションの設定ファイルを出力(バックアップ)できます。

インポート

TCD テーマオプションの設定ファイル(.json)をインポートします。

リセット

TCD テーマオプションの設定を初期化します。

まとめ

TCD「Be」はテーマオプション機能で多彩なカスタマイズが可能なので、複雑な CSS や PHP ファイルの編集や、必要以上にプラグインの追加をしなくてもデザイン変更ができます。

これからブログを始めようと思っている方や、2つ目以降の新規ブログを開設するために WordPress テーマを探している方にはおすすめできるテンプレートです。

テーマオプション以外のカスタマイズは、こちらの記事を参考にどうぞ。

この記事のタイトルとURLをコピーする

関連記事

  1. WordPress の囲み枠デザイン 30 選|TCD「Be」と「MAG」はコピペで OK

    ブログの始め方

    WordPress の囲み枠デザイン 30 選|TCD「Be」と「MAG」はコピペで OK

    ユウキです。今回は、TCD テーマ「Be」と「MAG」の囲み枠装飾…

  2. WordPress に絶対に入れておきたいプラグイン 17 選

    ブログの始め方

    WordPress に絶対に入れておきたいプラグイン 17 選

    ユウキです。今回は、WordPress のポテンシャルを高めてくれ…

  3. エックスサーバーの契約手順|キャッシュバックの受け取り方も併せて解説

    ブログの始め方

    エックスサーバーの契約手順|キャッシュバックの受け取り方も併せて解説

    ユウキです。今回はエックスサーバーの契約手順をドメイン設定から W…

  4. All in One SEO Pack の設定方法と初期のSEO対策

    ブログの始め方

    All in One SEO Pack の設定方法と初期の SEO 対策

    ユウキです。今回はブログ開設初期に誤りがちな All in One…

  5. WordPress テーマの選び方で失敗しないポイント

    ブログの始め方

    WordPress テーマの選び方で失敗しないポイント

    ユウキです。前回の記事など参考に、レンタルサーバーの契約と設定を完…

  6. TCD テーマ「Be」をレビュー|参考サイトと評判まとめ

    ブログの始め方

    WordPress テーマ「Be(TCD076)」をレビュー

    ユウキです。今回は WordPress テーマの中でも、デザイン性…

管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。(しょぼ笑)

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
  3. Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin
惹きつけるブログはデザインから生まれる
WordPress テーマ Be(TCD076)のレビュー
目次
PAGE TOP