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

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

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

カラフルラインのカスタマイズなので、右のサイドバーにある「スキン切り替え」からカラフルラインを選択してください。

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

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

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

Cocoonのスキン「カラフルライン」のグローバルメニューの色

国旗の色に変更するCSS

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

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

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

Cocoonのスキンのグローバルメニューの色をカスタマイズ

正確にはブラジルの国旗には濃い青も使われているんですが、サッカーのユニホーム(カナリアカラー?)の印象が強いので、緑と黄色の組み合わせにしてみました。
よく見ると、ミックスグリーンのボーダーとほぼ同じだった(笑

 

実際にメニューの色を変更する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」(奇数番目)で、好みの色を指定してください。

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

カラフルラインのサイドバーの見出しには、このように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;
}
このクリップは、次のサイトで記載されているものをそのまま使わせてもらいました。
 

クリップの他に、黒板に見立てた見出しなど、ユニークでおしゃれなものがあるので、いろいろカスタマイズをしてみたい人は参考になるかと思います。

ちなみに、このサイトもCocoonを使っています。

本文の見出しを変える

見出しの色を変える

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

 

まずは、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、H5)の文字を中央に揃えるカスタマイズです。

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;
}
.toc-content {
  border: 2px solid green;
}

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

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

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

コメント

  1. カラフルライン愛用者 より:

    初めまして、ヒロアキさんが作成したCocoonのスキン「カラフルライン」がとてもお気に入りで使用させていただいています。

    一つ質問させてください
    Cocoon設定からモバイルメニュー設定を「ヘッダーモバイルボタン」に設定しているのですが

    ヘッダーモバイルボタンの背景(緑・赤・青)の部分を全部白にCSSで変えることは可能でしょうか?
    また、可能でしたらCSSのコードはどのように書けばよろしいでしょうか?

    CSSが分からない者で、すみません。

    • ヒロアキヒロアキ より:

      ヒロアキです。

      カラフルライン使ってもらい、ありがとうございます!

      さっそくですが、ヘッダーモバイルボタンの背景を白にしたいということなので、白くするCSSを作ってみました。

      次のCSSをを子テーマの方に追加すれば白になります。(動作確認済みです)

      ついでに、フッターモバイルボタンの背景色も白にするCSSをあわせて書いておきます。

      /* ヘッダーモバイルボタンの背景色を消す */
      .mobile-header-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+1),
      .mobile-header-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+2),
      .mobile-header-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+3) {
        background: none;
      }
      
      /* フッターモバイルボタンの背景色を消す */
      .mobile-footer-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+1),
      .mobile-footer-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+2),
      .mobile-footer-menu-buttons.mobile-menu-buttons>li:nth-of-type(3n+3) {
        background: none;
      }

      子テーマにCSSを追加する方法は次の記事を参考にしてください。
      「子テーマのCSSにコードを追加する手順」

      以上、よろしくお願いします!

  2. カラフルライン愛用者 より:

    早速、ありがとうございました。

    これからも応援しています。

  3. cocoon用のスキン、「カラフルライン」を使わせてもらっています。
    とても気に入っていますが、できたら見出しの色を変えたいです。
    サイドバーの見出し色変更のカスタマイズは記事になっていましたが、
    本文の見出し色変更がもしできれば、教えていただけたらありがたいです。
    また、この記事のように、サイドバーの見出しにクリップを付けるカスタマイズも、あれば教えてください。
    初心者であれもこれもとすみません。
    ご検討よろしくお願いいたします。

    • ヒロアキヒロアキ より:

      カラフルラインを使っていただき、ありがとうございます!

      さっそくですが、サイドバー見出しをクリップ付きに変更するCSSと、本文の見出しの色を変更するCSSをこの記事に追加したので、参考にしてください。

      よろしくお願いします。

      • ねこまにあ より:

        ヒロアキ様

        早速ありがとうございます!
        記事を基に無事変更できました。

        追加で申し訳ないのですが…
        本文の「目次」の背景カラー(今は紺っぽくなっているところ)を変えるCSSも教えていただけないでしょうか…
        お手数おかけします

        • ヒロアキヒロアキ より:

          目次の背景色と枠の色を変更するCSSを追加したので、参考にしてください。

          よろしくお願いします。

          • ありがとうございます!
            お手数をおかけしました。

            ささやかなお礼がてら、こちらの記事リンクを当ブログに貼らせてもらいました。
            とても参考になる記事をありがとうございます!

          • ヒロアキヒロアキ より:

            リンクありがとうございます。

            また何かあればご連絡ください!

タイトルとURLをコピーしました