Twitterはこちら仕事依頼はこちら

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

Cocoonカスタマイズ 通知エリアを2つにする方法
スポンサーリンク

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

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

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

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

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

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

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

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

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

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

編集するファイル
  • style.css
  • main-before.php
スポンサーリンク

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

手順は以下の通りです。

手順
  • STEP1
    CSSコピペ
    style.cssにコードをコピペします。
  • STEP2
    HTMLコピペ
    main-before.phpにコードをコピペします。

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

STEP1:CSSをコピペする

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

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加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-usermain-before.phpを開きます。

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

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

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

これで終了です!

導入済みのブログ、サイト紹介させてください

「この記事を見て導入したよ!」という方でSNSやブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます!

ご連絡お待ちしております!

Cocoonカスタマイズ他にもあります

WordPressの無料テーマCocoon利用者向けのカスタマイズ記事もアップしてますので、よかったらご覧ください。

参考 Cocoonカスタマイズまとめ!おしゃれなものや機能性をあげるものなど!

【30通り以上!】Cocoonカスタマイズ!コピペで簡単!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

テーマ問わずブログで使えるカスタマイズはこちら!

他にもカスタマイズをやってますので良かったらご覧ください!

参考 ブログカスタマイズまとめ

コピペでできるブログカスタマイズまとめ【HTML&CSS】
ブロガー、アフィリエイターに役立つブログやサイトのカスタマイズをまとめていきます。HTML、CSSがわからなくてもコピペ可!WordPress(Cocoon、JIN、SANGO、Affingerなど)、はてなブログなど一部機能を除けば誰でも利用可能です。

コメント

  1. Cocoonでカスタマイズしたのですが表示されません。
    どうすればよいでしょうか?

    • >さっちんさん

      コメントありがとうございます。
      何らかの原因で隠れてしまってる可能性があります。

      問い合わせからで大丈夫ですので対象URLをおしえていただいてもいいでしょうか?

ページトップへ