# [メタ情報]
# 識別子: cocoonのヘッダー部コンテンツ上部のカスタマイズ_head-insertphp
# システム名:cocoonのヘッダー部コンテンツ上部のカスタマイズ
# 技術種別: Misc
# 機能名: Misc
# 使用言語: php
# 状態: 実行用
# [/メタ情報]
要約：
提示されたコードは、WordPressのCocoonテーマのヘッダー部分とコンテンツ上部をカスタマイズするPHPおよびHTMLです。
`head-insert.php`は、以下の機能を実装します。
1. **Push7プッシュ通知の導入:** Push7 SDKを読み込み、プッシュ通知機能をウェブサイトに追加します。
2. **曜日別ヘッダー画像の動的表示:** JavaScriptにより、現在時刻（日本時間）の曜日に応じてヘッダー（`.header`）の背景画像を自動で切り替えます。画像は外部URLから取得され、キャッシュ対策も施されています。
3. **Google翻訳機能の表示調整:** Google翻訳によるテキストハイライトや`body`へのスタイル干渉を防ぐCSSが設定されています。また、コンテンツ上部のウィジェットエリアの余白を強制的に削除し、レイアウトの崩れを防止します。
4. **Google翻訳バーのレイアウト制御:** Cocoonのメニューが開いている際に翻訳バーを非表示にする、言語一覧がロゴに重ならないよう常に下方向に開かせる、翻訳バーとサイドバーの重なり順（`z-index`）を適切に調整するなどの詳細なCSSルールが記述されています。
『Cocoon コンテンツ上部のカスタムHTML』では、サイトのコンテンツ上部にGoogle翻訳ウィジェットと、NotebookLMへのリンク付き画像を横並びに配置します。
cocoon-child-master/tmp-user/head-insert.php
```
内）にタグを挿入するテンプレート。
?>
```
カスタマイズ->追加CSS
```
/* --- サイドバー・字幕設定（既存） --- */
.sidebar { font-size: 0.9em; }
video::cue { background-color: rgba(0, 0, 0, 0.5); color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
.tagline { font-weight: bold; font-size: 12pt; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8); }
/* --- コンテンツ上部の横並び設定 --- */
.content-top-wrapper {
display: flex; /* 横並びにする */
justify-content: space-between; /* 左右の端に配置 */
align-items: center; /* 上下の中心を揃える */
padding: 10px 0; /* 上下に少し隙間を空ける */
border-bottom: 1px solid #eee; /* 区切り線（お好みで削除可） */
}
/* 念のため、中の要素が崩れないように調整 */
.content-top-item {
display: flex;
align-items: center;
}
/* 自前オーバーレイ字幕のサイズ調整 */
#subtitleOverlay .overlay-cue {
font-size: clamp(14px, 2.5vw, 24px) !important;
line-height: 1.2 !important;
}
/* 字幕の背景（バンド）の透明度や余白を調整する場合 */
#subtitleOverlay .band {
background: rgba(0, 0, 0, 0.4) !important; /* 少し透かす */
padding: 4px 8px !important;
}
/* 検証ツールで判明した「行全体」の赤い下線を消去 */
span.imk-line.active-hl {
border-bottom: none !important;
}
/* ==========================================
メニューバーの回り込み・重なり順の修正
========================================== */
/* 1. ヘッダーとメニューのエリアを最前面（一番手前）にする */
#header-container,
#navi,
.navi-in,
.sub-menu {
position: relative !important;
z-index: 9999 !important;
}
/* 2. 下側のコンテンツ（サイドバー含む）エリア全体を後ろに下げる */
#content,
#content-in,
.main,
#sidebar,
.sidebar {
position: relative !important;
z-index: 1 !important;
}
```
Cocoon コンテンツ上部のカスタムHTML
26.7.15
```
```
