コンテンツへスキップ
TubePress — 無料・セルフホスト & 積極的メンテナンス
外観とテーマ

外観とブランディング

ロゴ、ファビコン、カラー、ダークモード、背景、そしてカードや視聴ページの細かな調整について解説します。

/admin/appearanceAppearance 画面は、ノーコードのコントロールルームです。ここで行う変更はすべて、ファイルを一切変更することなくアクティブテーマのスタイルを変えます。ロゴ、色、ダークモード、レイアウト、動画カードや視聴ページの細部設定まで対応しています。変更は設定として保存され、レンダリング時にテーマが読み込みます。自由に試して、いつでも元に戻せます。

画面は上部のサブタブに分かれています。このページでは各グループについて説明します。マークアップ自体を変更したい場合は、それはテーマの役割です。以下の値は $_ プレフィックス付き変数としてテンプレートコードに公開されており、テーマ API リファレンスに完全に記載されています。

ブランディング

Appearance → Branding を開いてサイトのアイデンティティを設定します。ライトテーマとダークテーマ用に別々のロゴをアップロードできます。両方を空のままにするとサイト名がプレーンテキストで表示され、ライトロゴのみを指定した場合はダークロゴがその反転版にフォールバックします。ファビコン(正方形、最低 32×32px)はブラウザのタブに表示されます。

すべてのブランディングファイルは /uploads/branding/ に保存されます。サイトの背景画像もサポートされており、表示モードとして covercontain、または repeat を指定できます。テーマはこれらを $_siteBackground$_siteBackgroundMode として読み込みます。デスクトップ(デフォルト 36px)とモバイル(デフォルト 28px)のロゴの高さをライブプレビューで調整することもできます。

透明な PNG または SVG を使用してください。 透明な背景のロゴは、ライトとダーク両方のヘッダーに綺麗に表示されます。各ファイルは 5 MB 以内に収めてください。

色とダークモード

Appearance → Colors では、カラーピッカーと任意の不透明度を使用して、ライトテーマとダークテーマの 2 つのパレットを設定します。各オーバーライドは CSS カスタムプロパティにコンパイルされ、$_colorOverrides <style> ブロックとして注入されます。これにより、少数の値がテーマ全体にカスケードされます。各パレットは同じ 8 つの役割を公開します:

Primary
ボタン、リンク、アクティブ状態のアクセントカラー。デフォルトでは両方のテーマで共有されます。
Background
ページの背景。
Surface
サイドバー、セクション背景、入力フォーム。
Card
動画カード、コメント、コンテンツブロック。
Dark BG
フッター、オーバーレイ、プレースホルダー。
Text / Muted Text
本文テキストと、控えめなメタ情報、リンク、プレースホルダーテキスト。
Border
区切り線とカードの外枠。

同じ画面でダークモードの設定も行えます。マスターの User toggle は、訪問者のヘッダーにライト/ダーク切り替えスイッチを表示するかどうかを決定します。DefaultLight または Dark を設定すると、訪問者が最初に目にするモードになります。ユーザートグルをオフにすると、サイトは常に選択したデフォルトを使用し、未使用のパレットはグレーアウトされます。

レイアウト

Appearance → Layout はグリッドのサイズを制御します。主要オプションは 1 行あたりの動画数 で、45、または 6(デフォルト 5)を選択でき、テンプレートに $_videosPerRow として公開されます。タブ付きセクションでは、動画、カテゴリー、ポルノスター、チャンネルのページあたり表示数とデフォルトの並び順も設定できます。Site Dimensions ブロックでは全体の最大幅(デフォルト 1800px)とページのパディングを設定します。

トレンド並び順には CTR プラグインが必要です。 Trending のデフォルト並び順オプションは、クリックスルーランキングを有効にするまでロックされたままです。CTR ranking を参照してください。

動画カードオプション

Appearance → Video Cards では、各コントロールを変更するたびに更新されるスティッキーなライブプレビューで、リスティング内のすべてのサムネイルを細かく調整できます。

オプション変数説明
再生時間バッジを表示$_cardShowDurationサムネイルの右下に表示される再生時間ピル。
タイトルを表示$_cardShowTitleサムネイル下の動画タイトル。
タイトル行数$_cardTitleLinesタイトルを 1 または 2 行に制限します。
メタ 左 / 右$_cardMetaLeft / $_cardMetaRight各サイドに表示するものを選択: viewslikestime(経過時間)または none
グリッドギャップ$_cardGridGapカード間のスペース、0–30px。
ボーダー半径$_cardBorderRadius角の丸み、0–24px。
ホバーズーム$_cardThumbnailHoverホバー時にサムネイルをズームします。

これらのオプションは下記の視聴ページ設定に従います。視聴ページで再生時間またはメタ値を非表示にした場合、一貫性を保つために対応するカードオプションが自動的に無効化されます。

視聴ページオプション

Watch Page サブタブは、プレイヤー周辺に表示される内容を決定します。各項目は独立したトグルです。データのないセクションは設定に関係なく自動的に非表示になります。

  • 動画情報再生回数再生時間公開日いいね / 嫌いお気に入りボタン。
  • 動画詳細出演者チャンネルカテゴリータグ
  • コメント — サイト全体でコメントスレッドのオン/オフを切り替えます($_commentsEnabled)。comments を参照してください。

同じ画面でプレイヤー(デフォルト品質、再生速度、ダウンロードボタン、ループ、ダブルクリックでフルスクリーン)と、サイドバーの関連動画の表示数も設定できます。これらはテーマ API$_watchShow* 変数にマッピングされます。

ナビゲーションと検索

Menu サブタブでヘッダーナビゲーションを構築します。検索バーのオン/オフを切り替え($_menuSearch)、組み込みの宛先または独自のカスタムリンクからメニューを組み立てます。各アイテム($_menuItems)には labelurlenabled フラグ、特定のページタイプにのみリンクを表示するオプションの templates リストが含まれます。複数の言語を公開すると、言語スイッチャーが自動的に表示されます。

メニューとフッターに使用する静的ページについては、pages & menus を参照してください。

次のステップ

まだお困りですか?

ダッシュボードからチケットを送信してください。サポートチームがお手伝いします。

ライブデモを試す → TubePress をダウンロード →