Cocoonのカラフルラインをカスタマイズしてみる

カラフルラインをカスマイズする記事です。

ただし、簡単にカスタマイズできる方法が中心になるので、ご了承ください。

 

グローバルメニューの色を変える

カラフルラインは、「赤」、「緑」、「黄」の順番での配色になっています。

国旗の色に変更するCSS

これを例えば、国旗の色に変えてみます。

イメージとしては、こんな感じになります。

上から、「イタリア」、「フランス」、「ブラジル」

 

実際にメニューの色を変更するCSSです。

◯イタリアの国旗

.navi-in>ul>li:nth-of-type(3n + 1) {
  border-bottom: ridge 3px #00ad1a;
}
.navi-in>ul>li:nth-of-type(3n + 2) {
  border-bottom: ridge 3px white;
}
.navi-in>ul>li:nth-of-type(3n + 3) {
  border-bottom: ridge 3px #ff0010;
}

 

◯フランスの国旗

.navi-in>ul>li:nth-of-type(3n + 1) {
  border-bottom: ridge 3px #003cf2;
}
.navi-in>ul>li:nth-of-type(3n + 2) {
  border-bottom: ridge 3px white;
}
.navi-in>ul>li:nth-of-type(3n + 3) {
  border-bottom: ridge 3px #ff020f;
}

 

◯ブラジルの国旗

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px #f7ca00;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px #009e1c;
}

 

◯日本の国旗（おまけ）

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px white;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px #d71345;
}

 

上記CSSを、子テーマのstyle.cssに追加すればOKです。

追加の方法がわからない人は、次の記事を参考に追加してください。

同系色でまとめる

赤、青、緑のそれぞれの系統でまとめる場合です。

◯赤系統2色

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px #e1a5cb;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px #a52175;
}

 

◯青系統2色

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px #aec1e3;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px #3261ab;
}

 

◯緑系統2色

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px #91dbb9;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px #009250;
}

自分好みのメニューの色にしたい場合は？

以下の「XXX」、「YYY」、「ZZZ」の部分に好きな色を指定すればいいです。

.navi-in>ul>li:nth-of-type(3n + 1) {
  border-bottom: ridge 3px XXX;
}
.navi-in>ul>li:nth-of-type(3n + 2) {
  border-bottom: ridge 3px YYY;
}
.navi-in>ul>li:nth-of-type(3n + 3) {
  border-bottom: ridge 3px ZZZ;
}

色にはカラーコードか、カラーネームを指定でき、カラーコードの場合は、#ff0000（赤）のように、16進コードで指定します。

カラーネームの場合、例えばgreenとか、色の名前を指定します。

色を探す場合は、次のサイトが参考になりますよ。

 

ここは、配色とかの参考になるかも。

 

ちなみに、僕がよく参考にしているサイト。

配色を2色にしたい場合は？

カラフルラインの配色は3色ですが、2色だけで配色したい場合は次のCSSを使ってください。（ブラジルのメニューや日本のメニューが2色です）

.navi-in>ul>li:nth-of-type(3n + 1),
.navi-in>ul>li:nth-of-type(3n + 2),
.navi-in>ul>li:nth-of-type(3n + 3){
  border:none;
}
.navi-in>ul>li:nth-of-type(even) {
  border-bottom: ridge 3px XXX;
}
.navi-in>ul>li:nth-of-type(odd) {
  border-bottom: ridge 3px YYY;
}

一旦3色の定義（3n ＋ n）を「border:none」で打ち消す必要があります。

その後の「even」（偶数番目）、「odd」（奇数番目）で、好みの色を指定してください。

グローバルメニューのマウスホバーアニメーションを変える

カラフルラインは、グローバルメニューにマウスを乗せた時（ホバー）に、青の背景色が上からパタパタ降りてくるアニメーションとなっています。

このアニメーションをカスタマイズする方法を3つ紹介します。

マウスホバー時の背景色と文字の色を変える

まずは、アニメーションはパタパタのままで、パタパタする時の背景色と文字の色を変更するカスタマイズ。

↓のカスタマイズでは、ホバー時の背景色を青→緑、文字の色を白→黄色に変更しています。

このカスタマイズのCSSは以下の通り。

#navi .navi-in a::after {
  background-color: green;
}

#navi .navi-in a:hover {
  color: yellow !important;
}

このCSSでは、背景色に緑（green）、文字の色に黄色（yellow）を指定していますが、もちろん、好きな色を指定することができます。

Cocoon設定のグローバルメニューの背景色を変えたことで、ホバー時のアニメーションがはっきりしなくなった場合は、このCSSで背景色や文字の色を変えてみるのもいいかもしれません。

マウスホバー時のパタパタをやめる

カラフルラインのパタパタは結構派手なアニメーションなので、これがうるさく感じたりするかもしれません。

ここでは、パタパタするアニメーションをやめて、普通に背景色が青で文字の色が白になるアニメーションに変えてみます。（通常のホバーアニメーション）

ちなみに、このCSSを追加すると、↓こんな感じのアニメーションになります。

このアニメーションに変更するCSSは以下の通り。

#navi .navi-in a:hover {
  color: white !important;
  background-color: rgba(50, 97, 171, 0.8);
}
#navi .navi-in a::after {
  content: none;
}

このCSSでは、背景色に青（rgba(50, 97, 171, 0.8)）、文字の色には白（white）を指定していますが、こちらも好きな色を指定することができます。

メニューを角丸に変える

最後は、メニューの角を丸くするカスタマイズ。

↓こんな感じでかなり印象が変わります。

この角丸のCSSは以下の通り。

.navi-in > ul li {
  border-radius: 40px;
}
#navi .navi-in a::after {
  border-radius: 40px;
  background-color: rgba(50, 97, 171, 0.8);
}
#navi .navi-in a:hover {
  color: #fff !important;
}
.navi-in > ul .sub-menu {
  background-color: rgba(255, 255, 255, 0);
}
.navi-in > ul .sub-menu li {
  background-color: #fff;
}

ホバーした時の背景色と文字の色を変更したい場合は、「.navi-in > ul .sub-menu」と、「#navi .navi-in a:hover」の色の部分を変えてください。

また、角の丸みは40pxを変更すれば変わります。

カードがめくれて「Read More」が表示されるようにする

カラフルラインの特徴の１つに、エントリーカードや関連カードにマウスを乗せると、右下から「Read Me」がニュッと表示されるアニメーションがあります。

このアニメーションを、右下がめくれて「Read Me」が表示されるようにカスタマイズしてみます。

このカスタマイズでは、↓のようなアニメーションになります。

このアニメーションに変更するCSSは以下の通り。

.entry-card-wrap.a-wrap:before,
.related-entry-card-wrap.a-wrap:before {
  opacity: 0;
}

.entry-card-wrap.a-wrap:after,
.related-entry-card-wrap.a-wrap:after {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  right: 0;
  bottom: 0;
  background: white;
  background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.entry-card-wrap.a-wrap:hover:after,
.related-entry-card-wrap.a-wrap:hover:after {
  width: 90px;
  height: 90px;
  z-index: 2;
}

.entry-card-wrap.a-wrap:nth-of-type(3n+1):before,
.related-entry-card-wrap.a-wrap:nth-of-type(3n+1):before {
  color: #a52175;
}

.entry-card-wrap.a-wrap:nth-of-type(3n+2):before,
.related-entry-card-wrap.a-wrap:nth-of-type(3n+2):before {
  color: #009250;
}

.entry-card-wrap.a-wrap:nth-of-type(3n+3):before,
.related-entry-card-wrap.a-wrap:nth-of-type(3n+3):before{
  color: #0086ab;
}

.entry-card-wrap.a-wrap:nth-of-type(3n+1):before,
.entry-card-wrap.a-wrap:nth-of-type(3n+2):before,
.entry-card-wrap.a-wrap:nth-of-type(3n+3):before,
.related-entry-card-wrap.a-wrap:nth-of-type(3n+1):before,
.related-entry-card-wrap.a-wrap:nth-of-type(3n+2):before,
.related-entry-card-wrap.a-wrap:nth-of-type(3n+3):before{
  transition: all .3s;
  z-index: 3;
  font-weight: bold;
  background:none;
}

.entry-card-wrap.a-wrap:hover::before,
.related-entry-card-wrap.a-wrap:hover:before {
  right: -210px;
  bottom: -210px;
  opacity: 1;
}

 

サイドバーの見出しの色を変える

カラフルラインのサイドバーの見出しには、このように2色を使っています。

 

この2色を変更したい場合は、次のCSSを使います。

.sidebar h3 {
  background-image: repeating-linear-gradient(90deg,
    #F00 0%,#F00 50%,#00F 50%,#00F 100%);
  color:white;
}

ここでは例として、左側の色に#F00（赤）、右側に#00F（青）、文字の色にwhiteを指定しています。

このCSSを追加すると、このようになります。

#F00、#00F、whiteのところに自分の好きな色を指定すればOKです。

ちなみに、#F00や#00Fはカラーコード（16進コードで色を表現）といい、whiteはカラーネーム（色の名前）といいます。

見出しサンプル

こんな色の組み合わせもあります。

.sidebar h3 {
  background-image: repeating-linear-gradient(90deg,
    #64C99B 0%,#64C99B 50%,#DF81A2 50%,#DF81A2 100%);
  color: white;
}

 

.sidebar h3 {
  background-image: repeating-linear-gradient(90deg,#1E98B9 0%,
    #1E98B9 50%,#F0BA32 50%,#F0BA32 100%);
  color: white;
}

 

.sidebar h3 {
  background-image: repeating-linear-gradient(90deg,#F0BA32 0%,
    #F0BA32 50%,#A53F88 50%,#A53F88 100%);
  color: white;
}

 

上記サンプルは、次のサイトで選んでみました。

サイドバーの見出しを変える

続いては、サイドバーの見出しそのものを変えてみます。

次の見出しは、投稿本文の見出し（H4）をそのまま使ってみました。

次のCSSを追加すればOKです。

.sidebar h3 {
  background:none;
  position: relative;
  padding: 11px 0px 4px 28px;
  border: 0;
  border-bottom: 1px solid rgba(0, 134, 171, 0.6);
  background: none;
  border-radius: 0px;
}
.sidebar h3::before {
  position: absolute;
  content: '';
  top: 10px;
  left: 5px;
  width: 8px;
  height: 17px;
  background:none;
  background-color: #4c79c3;
  transform: skew(15deg);
  border:none;
}
.sidebar h3::after {
  position: absolute;
  content: '';
  top: 27px;
  left: 5px;
  width: 8px;
  height: 17px;
  background-color: #2fa770;
  transform: skew(-15deg);
  border-radius: 0px;
}

 

続いては、ちょっとかわいいクリップをつけた見出し。

CSSは次の通りで、クリップの色を変えたい場合は#c3516bを好きな色に変更してください。

また、背景色は#c4ebd9となっているので、ここも好きな色に変更することができます。

.sidebar h3 {
  background: none;
  padding: 12px 35px 12px 15px;
  background-color: #c4ebd9;
  color: #088cc0;
  margin-top: 26px;
}
.sidebar h3::before {
  position: absolute;
  content: '';
  top: -15px;
  right: 10px;
  height: 55px;
  width: 15px;
  border: 3px solid #c3516b;
  border-radius: 12px;
  box-shadow: 1px 1px 2px #999;
  transform: rotate(10deg);
  z-index: 1;
}
.sidebar h3::after {
  background-color: #c4ebd9;
  border: solid 5px #c4ebd9;
  border-radius: 0px;
  top: 0px;
  width: 10px;
  right: 20px;
  z-index: 2;
  height: 0px;
  left: unset;
}

左側が縦2色の見出しです。

次のCSSを追加すればOKです。

.sidebar h3 {
  background: none;
  padding: 0.1em 0 0.1em 0.75em;
  margin: 20px 0 20px 0px;
}
.sidebar h3::after {
  top: unset;
  left: 0px;
  bottom: 0;
  width: 5px;
  height: 100%;
  background-image: repeating-linear-gradient(
    180deg, 
    #3261AB 0%, 
    #3261AB 50%, 
    #088cc0 50%, 
    #088cc0 100%);
  border-radius: 0px;
}

本文の見出しを変える

見出しの色を変える

続いては、本文の見出し（H2、H3、H4、H５）の色を変えるカスタマイズです。

 

まずは、H2の色です。

上の見出しの色は次のCSSで変更されています。

左半分の色がgreen、右半分がred、左上の○の上側がblue、下側がyellowなので、この色を好きな色に変更してください。

.article h2 {
  background-image: repeating-linear-gradient(
    90deg, 
    green 0%, 
    green 50%, 
    red 50%, 
    red 100%);
 color: white;
}
.article h2::before {
  background: blue;
}
.article h2::after {
  background: yellow;
}

※○の色を変更しない場合は、「.article h2」の指定だけすればいいです。
（「.article h2::before」、「.article h2::after」は不要）
続いてはH3の色。

上の見出しの色は次のCSSで変更されています。

ボーダー（囲み線）がblue、左の縦長四角がgreen、右の縦長四角がredなので、この色を好きな色に変更してください。

.article h3 {
  border: 2px solid blue;
}
.article h3::before {
  background-color: green;
}
.article h3::after {
  background-color: red;
}

 

H4の色です。

上の見出しの色は次のCSSで変更されています。

ボーダー（下線）がgreen、上の斜め四角がred、下の斜め四角がblueなので、この色を好きな色に変更してください。

.article h4 {
  border-bottom: 1px solid green;
}
.article h4::before {
  background-color: red;
}
.article h4::after {
  background-color: blue;
}

 

H5の色です。

上の見出しの色は次のCSSで変更されています。

○の上側がred、○の下側がblueなので、この色を好きな色に変更してください。

.article h5::after {
  background-image: linear-gradient(
    135deg, 
    red 0%,
    red 50%,
    blue 50%,
    blue 100%,
    transparent 0);
}

 

H6の色です。

上の見出しの色は次のCSSで変更されています。

下線はredなので、この色を好きな色に変更してください。

.article h6 {
  border-bottom: 1px solid red;
}

中央揃えにする

続いては、見出し（H2、H3、H4、H５）の文字を中央に揃えるカスタマイズです。

H2～H6まですべて中央に揃えるCSSです。

.article h2 {
  padding: 0.8em 1.8em .8em 1.8em;
  text-align: center;
}
.article h2::before {
  left: .5em;
  width: 18px;
  height: 18px;
  background: white;
  box-shadow: -1px -1px 8px #dadada inset;
}
.article h2::after {
  top: 0.3em;
  width: 18px;
  height: 18px;
  background: white;
  right: 0.5em;
  left: unset;
}
.article h3 {
  text-align: center;
}
.article h4 {
  padding: 8px 28px 8px 28px;
  text-align: center;
}
.article h4::before {
  top: 4px;
  width: 12px;
  height: 18px;
  transform: none;
}
.article h4::after {
  top: calc(100% - 22px);
  width: 12px;
  height: 18px;
  right: 5px;
  transform: none;
  left: unset;
}
.article h5 {
  padding: 9px 26px 9px 26px;
  text-align: center;
}
.article h5::before {
  position: absolute;
  content: '';
  right: .1em;
  width: 15px;
  height: 15px;
  background-image: linear-gradient(135deg, #4c79c3 0%, #4c79c3 50%, #2fa770 50%, #2fa770 100%, transparent 0);
  border-radius: 100%;
  top: calc(50% - 7px);
}
.article h5::after {
  top: calc(50% - 7px);
}
.article h6 {
  text-align: center;
}

目次の色を変える

目次の色を変えるカスタマイズです。

「目次」の背景色を変更したい場合は、「.toc-title」のgreenの色を変更し、その下の枠まで色を変えたい場合は「.toc-content」のgreenを好きな色に変更します。

.toc-title {
  background-color: green;
}
.article .toc .toc-content {
  border: 2px solid green;
}

フッターの背景色を変える

カラフルラインのフッター（3色）はちょと派手なので、シンプルな単色にしたい人もいるでしょう。

その場合は、面倒なCSSの変更ではなく、Cocoon設定の「フッター」から好きな背景色、文字の色を指定すればOKです。

プロフィールウィジェットをカスタマイズする

カラフルラインのプロフィールウィジェットを、↓こんな感じでカスタマイズすることができます。

他にもいくつかのパターンがあるので、詳細は、次の記事を参考にしてください！