Cocoonがテーマなんで、そこで、どう設定すればいいか、わかりやすく教えて？
ということで、詳しく分かりやすく設定を説明します。
１．Cocoon設定画面を開く
WordPress管理画面の左メニューから「Cocoon設定」をクリックします。Cocoonテーマ専用の設定画面が開きます。
２．「アクセス解析・認証」または「その他」タブでCSSを探す代わりに「headタグ設定」の中の「CSS」タブを開く
Cocoon設定内に並んでいるタブから「CSS」タブを選びます(スマホ表示の場合はタブが縦に並んでいることもあります)。ここに独自CSSを記入する欄があります。
３．CSS欄にスタイルを貼り付ける
「CSS」タブ内の入力欄に、以下のコードを貼り付けます。
.attention-bubble {
position: absolute;
top: -18px;
right: 40px;
background: #d94f4f;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 8px 16px;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
animation: bounce 1.6s infinite ease-in-out;
}
.attention-bubble::after {
content: “”;
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-width: 8px 8px 0 8px;
border-style: solid;
border-color: #d94f4f transparent transparent transparent;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
貼り付けたら画面下の「変更をまとめて保存」ボタンを押します。
４．ヘッダーにHTMLを表示する場所を決める
Cocoonには「ヘッダーウィジェット」というヘッダー内にウィジェットを表示できる機能があります。「外観」→「ウィジェット」から「ヘッダーウィジェット」欄を探してください。
５．「カスタムHTML」ウィジェットを追加する
「ヘッダーウィジェット」欄に「カスタムHTML」ウィジェットを追加し、中身に以下を貼り付けます。
<div class=”attention-bubble”>注目</div>
保存すると、ヘッダー部分に吹き出しバッジが表示されます。
６．表示位置を確認・微調整する
ヘッダーウィジェットの表示位置はテーマ側で決まっているため、思った場所と違う場合は、手順3で貼り付けたCSSの `top` や `right` の数値を調整して位置を微調整します(例: right: 40px; を right: 100px; に変えると左寄りになります)。
コメント