cocoonというテーマでのカスタマイズがメインですので、px指定などはテーマによって調整してください。
Contents
オーガンジーリボンのようなグローバルナビ
.navi {
background-color: rgba( 255, 230, 238, 0.7 );
background-image: radial-gradient(#fff8fa 15%, transparent 0), radial-gradient(#fff8fa 15%, transparent 0);
border-top: 2px solid #F4B4D0;
border-bottom: 2px solid #F4B4D0;
background-position: 0 0, 7px 7px;
background-size: 15px 15px;
padding: .5em 0;
}アメコミのコマっぽい見出し1
h2{
margin-top: 1em;
margin-bottom: 1em;
border: 4px solid #000;
position: relative;
padding: 0.8em 30px;
line-height: 1.5em;
background-size: 14px 14px;
background-color: #e9fcff;
background-image: radial-gradient(#b4eaf8 35%, transparent 35%), radial-gradient(#b4eaf8 35%, transparent 35%);
background-position: 0 0, 7px 7px;
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.56);
}
@media screen and (min-width:835px) {
h2{
margin-left: -40px;
margin-right: -40px;
}
}
@media screen and (max-width:834px) {
h2{
border-left: none;
border-right: none;
margin-left: -16px;
margin-right: -16px;
}
}PCやタブレットなど大きい画面では、左右のマージンを大きくマイナスして、メインカラムから意図的にはみ出させることで目立たせています。
そのままだとモバイル表示で横スクロールが発生してしまうので、画面が小さくなるとテーマが設定している余白分だけマイナスして、画面幅いっぱいになるよう調整しています。
アメコミのコマっぽい見出し2
h3 {
color: #fff;
padding: 0.5em 1.5em;
position: relative;
text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
z-index: 0;
border: 2px solid #000;
}
h3:before{
background: repeating-linear-gradient(135deg, #fec72e, #fec72e 5px, #fff8a4 0, #fff8a4 10px);
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -2;
}
h3:after{
background: linear-gradient(180deg, rgba(255, 248, 164, 1), rgba(255, 248, 164, 0.1));
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
アメコミのコマっぽい見出し3
h3 {
font-size: 16px;
border-radius: 0;
color: #000;
position: relative;
text-shadow: -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px 1px 1px #fff;
z-index: 0;
border: 2px solid #000;
}
h3:before{
background: repeating-linear-gradient(0deg, #e9fcff, #e9fcff 2px, #0081c2 0px, #0081c2 3px);
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -2;
}
h3:after{
background: linear-gradient(145deg, rgba(233, 252, 255, 1), rgba(233, 252, 255, 1), rgba(233, 252, 255, 0.5), rgba(233, 252, 255, 0.2));
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}マンガのスピード線（平行線）っぽいデザインです。
:beforeで背景のベース色とスピード線の色を設定し、:afterでベース色の透明度が変化するグラデーションを重ねてあげることで、スピード線が徐々に消えるように見せています。
text-shadowで文字に白い縁取りを付けることで可読性を高めてはいますが、スピード線の色とベース色とでコントラストが強すぎると読みにくくなります。
人気記事ランキング等順位表示のフラッグ風デザイン
.widget-entry-cards.ranking-visible .card-thumb::before {
left: 5px;
top: -8px;
opacity: 1;
background-color: transparent;
}
.widget-entry-cards.ranking-visible .card-thumb:after {
content: '';
position: absolute;
left: 5px;
top: -5px;
width: 0;
height: 20px;
line-height: 20px;
border-left: 13px solid #aaa;
border-right: 13px solid #aaa;
border-bottom: 5px solid transparent;
}cocoonでは.card-thumb::beforeでランキングの順位が表示されています。
フラッグ風デザインにする場合は元のデザインが邪魔なので、background-color: transparent;で無効にし、テキストの位置をleftとtopで調整しています。
フラッグは.card-thumb:afterにborderで描画します。
heightがテキストを重ねる部分の高さです。
border-leftとborder-rightの太さがフラッグの幅になります。
border-bottomが三角形の切り欠きになります。
この方法だとフラッグの背景の色を指定する必要がないので、写真やグラデの上に重ねても違和感が生じません。
またランキングの数字とフラッグを別の要素に対して指定しているので、ランキングの数字が大きくなってもフラッグの形が変化しません。（ただし数字ははみ出ます）
しましまがかわいい目次(TOC)
.toc {
background: repeating-linear-gradient(90deg, #feedbb, #feedbb 10px, #fef1cc 0, #fef1cc 20px);
background-color: #feedbb;
padding: 0;
border: none;
color: #c87f07;
font-weight: bold;
font-size: 14px;
line-height: 1.5;
margin-top: 3em;
margin-bottom: 1em;
border-radius: 10px;
}
.toc .toc-title::before{
font-family: FontAwesome;
content: '\f0f6';
margin-right: .5em;
}
.toc div {
margin:0 10px;
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
margin-top: 0.4em;
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
border-bottom: 2px solid #fff;
font-weight: bold;
color: #c87f07;
}
.toc ul li a, .toc ol li a {
display: block;
border-bottom: 2px dotted #fff;
margin-left: -20px;
padding-left: 20px;
color: #c87f07;
}覚書
サンプル画像も説明も不足してる状態なので、思い出したときにこの記事は更新します。