【Cocoon】ウィジェット/コメント/関連記事の見出しのカスタマイズ

INDEX

WordPressテーマ Cocoon
1. WordPressテーマ Cocoon ウィジェットの見出し
2. ウィジェットの見出し・コメントの見出し・関連記事の見出しのカスタマイズ
最後に

WordPressテーマ Cocoon

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

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

先日「見出し（h1〜h6タグ）」のカスタマイズについて掲載したので、今回は、WordPressテーマ Cocoonの「ウィジェットの見出し」「コメントの見出し」「関連記事の見出し」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon ウィジェットの見出し

WordPressテーマ Cocoonの「ウィジェットの見出し」「コメントの見出し」「関連記事の見出し」のカスタマイズについては、過去にも行ってきました。

【Cocoon】ウィジェットの見出しのカスタマイズ

WordPressテーマ Cocoonでの「ウィジェットの見出し」のカスタマイズについてまとめてみました。今回のカスタマイズでは記事中やサイドバーの見出しとは違ったスタイルとし、且つサイトスタイルに沿ったスタイルを採用しました。

【Cocoon】関連記事とコメントの見出しのカスタマイズ

WordPressテーマ Cocoonの「関連記事とコメントの見出し」のカスタマイズについてまとめてみました。今回のカスタマイズでは「関連記事とコメントの見出し」に対して以前カスタマイズを行った「見出し(h2)」と同じデザインとしてみました。

これら見出しのカスタマイズを行った以降にも記事として掲載していないのですが、ちょこちょことカスタマイズを行っており、現在の「ウィジェットの見出し」「コメントの見出し」「関連記事の見出し」のスタイルは共通で、次の様になっています。

そこで、現在の「ウィジェットの見出し」「コメントの見出し」「関連記事の見出し」のスタイルのカスタマイズについて紹介していきます。

ウィジェットの見出し・コメントの見出し・関連記事の見出しのカスタマイズ

WordPressテーマ Cocoonでの「ウィジェットの見出し」「コメントの見出し」「関連記事の見出し」のカスタマイズを行います。

「ウィジェットの見出し」「コメントの見出し」「関連記事の見出し」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を既存の「ウィジェットの見出しのカスタマイズ」に上書きします。

/************************************
** ■コメントの見出し・関連記事の見出し・ウィジェットの見出し(タイトル)のカスタマイズ
************************************/
.comment-title, /*コメントの見出し*/
.related-entry-heading, /*関連記事の見出し*/
#main .main-widget-label { /*ウィジェットの見出し*/
  margin-top: 30px; /*上マージン*/
  margin-bottom: 11px; /*下マージン*/
  border-radius: 2px; /*角丸コーナー*/
  color: #fff; /*フォントカラー*/
  font-size: 18px; /*フォントサイズ*/
  font-weight: 700; /*フォント太さ*/
  position: relative;
  background:linear-gradient(160deg, rgba(20,105,255,1), rgba(20,105,255,0.8), rgba(20,105,255,0.5)); /*タイトル背景カラー*/
  padding-top: 8px; /*上内側余白設定*/
  padding-bottom: 6px; /*下内側余白設定*/
  padding-left: 24px; /*左内側余白設定*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー*/
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .comment-title, /*コメントの見出し*/
  .related-entry-heading, /*関連記事の見出し*/
  #main .main-widget-label { /*ウィジェットの見出し*/
    padding-top: 5px; /*上内側余白設定*/
    padding-bottom: 5px; /*下内側余白設定*/
    font-size: 16px; /*フォントサイズ*/
  }
}
.comment-title::after, /*コメントの見出し*/
.related-entry-heading::after, /*関連記事の見出し*/
#main .main-widget-label::after { /*ウィジェットの見出し*/
  content: "";
  position: absolute;
  top: 48%;
  left: 0;
  width: 14px;
  height: 8px;
  margin-top: -3px;
  background: #fff;
}
.comment-title::before, /*コメントの見出し 周囲内ライン設定*/
.related-entry-heading::before, /*関連記事の見出し 周囲内ライン設定*/
#main .main-widget-label::before { /*ウィジェットの見出し 周囲内ライン設定*/
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 2px; /*角丸コーナー*/
}

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

.related-entry-heading::after, /*関連記事見出し*/
.comment-title::after, /*コメント見出し*/
#archive-title::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;
  }
}

最後に

「ウィジェットの見出し」「コメントの見出し」「関連記事の見出し」のスタイルは大きく変わっています。

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