Cocoon サイドバーの見出しコピペでカスタマイズ

こんにちは、ワードプレスのテーマ「Cocoon」のカスタマイズにドドドハマり中のタロです。

この記事ではサイドバー（ウィジェット）の見出しをカスタマイズするCSSを紹介します！

CSSのコピペで一発で済むのでぜひ参考にしてみてください。

完成イメージがこちら

PCの場合はサイドバーに、モバイルの場合はフッター部分に表示がされていると思います。

どちらもウィジェットで設定する見出しのカスタマイズとなります。

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

カスタマイズ手順は以下の通り。

style.css にコードをコピペ

次のCSSを style.css にぺたり！と貼り付けます。

/* ウィジェット　見出し
-------------------------------------------------- */
.sidebar h3, #footer h3 {
  background-color: #f5f6f7;
  padding: 12px;
  margin: 16px 0;
  border-radius: 2px;
  background: 0 0;
  font-size: 20px;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
}

.sidebar h3:before, #footer h3:before {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  border-top: 3px solid #444d53;
  left: 0;
}

.sidebar h3:after, #footer h3:after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  border-top: 3px solid #444d53;
  right: 0;
}

以上で実装はおしまいです。

しっかりと反映がされているか確認してみてください。

読むな危険！Cocoon カスタマイズを一挙公開中

このブログでも実装しているCocoonカスタマイズを大公開！！

デザインには正解がないためやればやるほど沼にハマってしまいます。

ですので、Cocoon ユーザーは絶対に読まないでください。

【初心者でもできる！】Cocoonカスタマイズまとめ！コピペで簡単開発

たろ当ブログのカスタマイズを一挙大公開中！！このブログはわいひらさんという方が作られたCocoonというワードプレスのテーマを使ってサイトを作っています。もし同じCocoonを使っている方はこれから紹介する記事の通りにカスタマイズすることで...

tarovlog.com

2021.02.20