【Cocoon】通知エリアを二つ表示させる

ヘッダーの下に表示される通知エリア、みなさん使ってますかー？

ファーストビューに入るので注目させたいときに超便利です。

通知エリアはCocoonではCocoon設定から設定可能です。

色も変えられたりと、とても簡単で便利な機能です。

そんな通知エリアのカスタマイズ記事になります。

ふと、こんなことを考えました…。

「クリックされやすい通知エリア…二つにすれば最強じゃん！」と。

ということで二つにします。

サンプルは既にお気づきかと思いますが当ブログです。矢印にアニメーションをつけてますが邪魔な人はもちろん消せます。

ただし、Cocoonの通知エリア機能は使いません。

Cocoon通知エリアカスタマイズ手順

手順は以下の通りです。

5分もあれば作れちゃいます！

STEP1：CSSをコピペする

下記コードをコピペしてください。

/*********************************
* Cocoon 通知エリア2つ
*********************************/
.twice-notice{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.twice-notice a{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position:relative;
    flex-basis:50%;
    text-align:center;
    color:#fff; /* 文字色 */
    font-size: 0.9em; /* 文字サイズ */
    line-height: 1.4;
    font-weight: bold;
    padding: 1em 2em;
    letter-spacing: 1px;
    text-decoration:none;
}
.twice-notice a:first-child{
    background:#fbc55e; /* 左背景色 */
    border-right:1px solid #fff; /* 中央線 */
}
.twice-notice a:last-child{
    background:#fbc55e; /* 右背景色 */
}
.twice-notice a:hover{
    opacity:0.8;
}
.twice-notice a:after{
    position:absolute;
    top:50%;
    right:1em;
    transform: translateY(-50%);
    font-family:"FontAwesome";
    content:"\f054"; /* 矢印アイコン */
    animation:infinite move-arrow 1.5s; /* 矢印アニメーション */
}
@keyframes move-arrow {
    0%{margin:0 5px 0 -5px;opacity:.3;} /* 矢印アニメーション設定 */
}
/* スマホ */
@media screen and (max-width: 480px){
    .twice-notice a{
        font-size:0.7em; /* 文字サイズ */
    }
    .twice-notice a:after{
        transform: translateY(-50%);
    }
}

STEP2：main-before.phpを編集

外観→テーマエディター→tmp-user→main-before.phpを開きます。

下記コードをコピペしてください。

<div class="twice-notice">
<a href="左リンクURL">左テキスト</a>
<a href="右リンクURL">右テキスト</a>
</div>

リンクURL、テキストを入れればOK。

これで終了です！