【Cocoon】サイドバーの見出しのカスタマイズ5回目

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | 製品レビューとPCやWordPressに関する情報発信サイト

masaa.net

今回は、WordPressテーマ Cocoonでの5回目となる「サイドバーの見出し」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon サイドバーの見出し

以前にもWordPressテーマ Cocoonの「サイドバーの見出し」についてはカスタマイズを行ってきました。

【Cocoon】サイドバーの見出しのカスタマイズ3回目

WordPressテーマ Cocoonの「サイドバーの見出し」については以前にも「見出し１タイトル（h1タグ）」と同じデザインとするカスタマイズを行いました。今回「サイドバーの見出し」に対して独自のデザインを採用してみました。

masaa.net

2020.02.02

【Cocoon】サイドバーの見出しの再々カスタマイズ

WordPressテーマ Cocoonの「サイドバーの見出し」については以前にもカスタマイズを行ってきました。今回「サイドバーの見出し」に対して、改めて「見出し１タイトル（h1タグ）」と同じデザインを採用してみました。

masaa.net

2019.12.15

現在の「サイドバーの見出し」のスタイルは下記の通りとなっており、このスタイルのカスタマイズはエントリー記事として掲載していません。

「サイドバーの見出し」のスタイルについては、色々と試行錯誤している状況です。

特に問題の無い自分的にはキリッ！とした「サイドバーの見出し」なのですが、少し飽きてしまったのともう少し主張した存在感のあるスタイルにするカスタマズを行ってみたいと思います。

サイドバーの見出しのカスタマイズ5回目

WordPressテーマ Cocoonでの5回目となる「サイドバーの見出し」のカスタマイズを行います。

カスタマイズ内容

5回目の「サイドバーの見出し」カスタマイズの内容は下記の通りです。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「サイドバータイトル カスタマイズ」に上書きします。

/************************************
** ●サイドバータイトル カスタマイズ
************************************/
#sidebar h3{
  position: relative;
  color: #333; /*フォントカラー*/
  background: -webkit-repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
  background: repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
  font-size: 16px; /*フォントサイズ*/
  letter-spacing: 6px; /*文字間隔*/
  text-align: center; /*文字位置中央 center*/
  margin: 10px 0px 20px 0px;
/*  padding: 14px 0px 14px 10px;*/
  padding: 16px 3px 12px 3px;
/*  border-right: 5px solid #fe619a; /*右ラインの太さとカラー*/
/*  border-left: 5px solid #fe619a; /*左ラインの太さとカラー*/
/*  border-radius: 60px / 12px; /*角丸コーナー*/
  border-radius: 2px; /*角丸コーナー*/
/*  border-top: 1px double #ff75a7; /*枠線*/
  line-height: 100%;
}
#sidebar h3::after {
  position: absolute;
  bottom: 0em;
  left: 1.8em;
  content: '';
  height: 8px; /*6*/
  width: -webkit-calc(100% - 3.6em);
  width: calc(100% - 3.6em);
  background-color: #fe619a;
  border-radius: 4px;
}

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を追記します。

/************************************
** ■イメージ画像やアイコンを点滅させる点滅させるカスタマイズ
************************************/
#sidebar h3::after { /*サイドバータイトル*/
  animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/
}
@keyframes blink{
  0% {
    opacity: 0.2;
  }
  81% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

カスタマイズ後のサイドバーの見出し

今回のカスタマイズによって、「サイドバーの見出し」のスタイルは次の様になりました。

シンプルなスタイルになりましたが、下側のバーを点滅するスタイルにしました。

最後に

「サイドバーの見出し」の一部を点滅させることによって、サイドバーの注目度が上がればと思います。