ナビゲーションにnewや注目を追加したい

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割くらいのテンプレートでは使えるかなぁ~?
どうかなぁ?
微妙かなぁ?って感じでした。

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422