5.CSSコードサンプル
■サンプルコードをご使用いただく際の注意点
テーマのカスタマイズ画面から使用できるカスタムCSS機能では500文字の文字数制限があるため、長いCSSは挿入することができません。そのため以下のコードサンプルを使用いただく場合は、Shopifyのコード編集からCSSアセットの作成、アセットの呼び出しを行なっていただく必要がございます。
①記事一覧を開いた際に、未読へ赤いバッジをつける
■コードサンプル
.monjia_notify-notification-midoku::after { content:'';
position:absolute;
top:-3px;
right:-3px; background: #cc0000; width:20px; height:20px; border-radius:100%;
}
②記事一覧に、未読/既読のラベルをつける
■コードサンプル
.monjia_notify-notification-content { background:#fff!important; padding-right:4em!important;
}
.monjia_notify-notification-kidoku .monjia_notify-notification-content { background:#ddd!important;
color:#888!important;
}
.monjia_notify-notification-kidoku a, .monjia_notify-notification-kidoku a:visited {
color:#888!important; }
.monjia_notify-notification-midoku::after { content:'未読';
position:absolute;
top:10px;
right:10px; padding:.35em 1em; font-size:12px; color:#fff; background: #000;
}
.monjia_notify-notification-kidoku::after { content:'既読';
position:absolute;
top:10px;
right:10px; background: #eee; padding:.35em 1em; font-size:12px; color:#aaa;
}
③未読に⻘の丸マークを付ける(iOSのメールアプリ風)
■コードサンプル
.monjia_notify-notification-midoku::after { content:'';
position:absolute;
top:35px;
left:20px; background: #0079fc; width:15px; height:15px; border-radius:100%;
}
.monjia_notify-notification-content { padding-left:3em!important;
box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.1); }