2種類の方法を説明します。
実際には、色々な方法があるのですが、その中のひとつの方法です。
<style type="text/css">
.cc-nav-level-0 > li:nth-child(3) > a:after{ /*ナビゲーションの3番目に入れます*/
content:"注目!";
font-family:"sans-selif"; /*フォント指定 */
padding:0;
margin:0;
white-space:nowrap; /* 改行させない */
display:inline;
text-shadow:1px 1px 0px #FFF,1px -1px 0px #FFF,-1px 1px 0px #FFF,-1px -1px 0px #FFF; /* 白のアウトラインを挿入 */
color:#f00; /* 文字色指定 */
font-size:60%; /* フォントサイズ(まんま。。。) */
font-weight:bold; /* ノーマルでも良いけど一応太字指定 */
position:absolute; /* これが今回の肝特殊な指定方法 */
transform:rotate(-15deg) translate(5px,-10px); /* 傾きと位置指定 */
}
.cc-nav-level-0 > li:nth-child(4) > a:after{ /* ナビゲーションの4番目に入れます */
content:"NEW";
font-family:"sans-selif";
padding:0;
margin:0;
white-space:nowrap; /* 改行させない */
border-radius:100%; /* 丸っぽくする */
display:inline;
background:#f00; /* 背景色指定 赤 */
color:#fff; /* 白文字 */
font-size:70%;
position:absolute;
transform:rotate(-15deg) translate(5px,-10px);
}
</style>
すべてのテンプレートで使用可能という訳ではありません。
一通り確認しましたが、9割くらいのテンプレートでは使えるかなぁ~?
どうかなぁ?
微妙かなぁ?って感じでした。
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
コメントをお書きください