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

INDEX

WordPressテーマ Cocoon
1. WordPressテーマ Cocoon サイドバーの見出し
2. サイドバーの見出しのカスタマイズ7回目
最後に

WordPressテーマ Cocoon

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

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト

WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

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

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

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

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

WordPressテーマ Cocoonでの6回目となる「サイドバーの見出し」のカスタマイズについてまとめてみました。今回のカスタマイズでは、これまでの斜めラインのスタイルを廃止し上下にグラデーションを設けました。

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

WordPressテーマ Cocoonでの5回目となる「サイドバーの見出し」のカスタマイズについてまとめてみました。今回のカスタマイズでは「サイドバーの見出し」をシンプルなスタイルに変更し下側のバーを点滅させてみました。

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

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

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

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

これら見出しのカスタマイズを行った以降にも、ちょこちょことカスタマイズを行っており、現在の「サイドバーの見出し」のスタイルは、次の様になっています。

そこで、現在の「サイドバーの見出し」のスタイルについてのカスタマイズを紹介していきます。

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

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

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

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を既存の「サイドバータイトルカスタマイズ」に上書きします。

/************************************
** ●サイドバータイトル（見出し）／スライドイン時タイトル（見出し）／Googleアドセンス広告タイトル(見出し)　カスタマイズ
************************************/
.footer-title,
.sidebar .ad-label,
#sidebar-menu-content h3,
#sidebar h3{
  position: relative;
  color: #fff; /*フォントカラー*/
  background:linear-gradient(to top, rgba(20,105,255,1), rgba(20,105,255,0.4))!important;
  font-size: 16px; /*フォントサイズ*/
  font-weight: 900; /*文字強調*/
  letter-spacing: 3px; /*文字間隔*/
  text-align: center; /*文字位置中央 center*/
  margin: 10px 0px 20px 0px;
  padding: 12px 3px 6px 3px;
  border-radius: 2px 60px/5px 16px 16px; /*角丸コーナー*/
  line-height: 82%;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー*/
}
.footer-title::after,
.sidebar .ad-label::after,
#sidebar-menu-content h3::after,
#sidebar h3::after {
  position: absolute;
  bottom: 0;
  left: 3.0em;
  content: '';
  height: 4px;
  width: -webkit-calc(100% - 6.0em);
  width: calc(100% - 6.0em);
  background-color: #fff;
  border-radius: 4px;
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .footer-title,
  .sidebar .ad-label::after,
  #sidebar-menu-content h3::after,
  #sidebar h3::after {
    left: 2.64em;
  }
}

続いて「スタイルシート(style.css)」を開き、下記のカスタマイズ内容が存在しなければ追記します。

.footer-title:after, /*フッタータイトル*/
.sidebar .ad-label::after, /*サイドバーGoogleアドセンスタイトル*/
#sidebar h3::after, /*サイドバータイトル*/
#sidebar-menu-content h3::after, /*サイドバータイトル スライドインボタン*/
.entry-card-title::after { /*エントリー記事カードのタイトル*/
  animation:blinking 1.2s ease-in infinite alternate!important; /*点滅間隔1.2秒設定*/
}
@keyframes blinking {
  0% {
    opacity: 0.1;
  }
  81% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

最後に

「サイドバーの見出し」のスタイルは大きく変わっています。

見出しについては色々と好みがあるので、よろしければご参照ください。

WordPressテーマ Cocoon

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

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

最後に

コメント