WordPress/Cocoonでウィジットタイトルにクリップを貼る

2025.12.16

クリップを貼るとデザインが立体的になる

Cocoonはデザインがシンプルでフラットです。
クリップをアクセントに使うと一気に立体的になります。
カスタムCSSは以下からどうぞ。
クリップは画像使わないでCSS要素のみで実装しています。

/* サイドバーのウィジェットタイトル */
.widget-sidebar-title {
position: relative;
padding-right: 44px; /* クリップ分の余白 */
}
/* 斜めの赤クリップ */
.widget-sidebar-title::after {
content: “”;
position: absolute;
right: 20px;
top: -10px;
width: 16px;
height: 48px;
border: 4px solid #d45a6a; /* 赤 */
border-radius: 20px;
transform: rotate(-12deg);
box-shadow: 1px 2px 0 rgba(0,0,0,0.15);
pointer-events: none;
}
/* スマホでは非表示（推奨） */
@media (max-width: 768px) {
.widget-sidebar-title::after {
display: none;
}
}
TwitterFacebookLinkedInHatenaPocketCopy Link