(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約4分で読めます。

【広告】

※ 本ページには【広告】が含まれています

WordPressテーマ Cocoon

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

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト
WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

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

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

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

【Cocoon】サイドバーの見出しをカスタマイズする
WordPressテーマ Cocoonの【サイドバーの見出し】を、自分のサイトカラーに合わせてカスタマイズ(スライドボタン設定時含む)してみました。と言う事で、【サイドバーの見出し】のカスタマイズについて書いたエントリー記事です。

今回、再び「サイドバーの見出し」のカスタマイズを行ってみました。

現在の「サイドバーの見出し」デザインは下記の通りです。

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

「サイドバーの見出し」デザインを、前回の「見出し1タイトル(h1タグ)」~「見出し4(h4タグ)」で採用した共通のデザインにしたいと思います。

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

WordPressテーマ Cocoonで「サイドバーの見出し」を「見出し1タイトル(h1タグ)」と同じデザインとしたカスタマイズを行います。

カスタマイズ内容

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

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を既存の「サイドバーの見出し」の設定(#sidebar H3, #sidebar-menu-content h3)と入れ替えます。

/************************************
** ●サイドバータイトル カスタマイズ
************************************/
#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: 8px; /*文字間隔*/
  text-align: center; /*文字位置中央*/
  margin: 10px 0px 20px 0px;
  padding: 10px 10px 8px 10px;
  border-left: 8px solid #fe619a; /*左ラインの太さとカラー*/
  border-bottom: 1px solid #fe619a; /*アンダーラインの太さとカラー*/
  border-radius: 3px; /*角丸コーナー*/
  line-height: 100%;
}

/************************************
** ●サイドバータイトル スライドインボタン設定時カスタマイズ
************************************/
#sidebar-menu-content h3{
  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: 8px; /*文字間隔*/
  text-align: center; /*文字位置中央*/
  margin: 10px 0px 20px 0px;
  padding: 10px 10px 8px 10px;
  border-left: 6px solid #fe619a; /*左ラインの太さとカラー*/
  border-bottom: 1px solid #fe619a; /*アンダーラインの太さとカラー*/
  border-radius: 3px; /*角丸コーナー*/
  line-height: 100%;
}

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

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

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

サイトカラーのピンクは採用しつつ左に縦線を入れたデザインで、前回の「見出し1タイトル(h1タグ)」と同じデザインとなりました。

また、右上の折り目デザインは無くしています。

最後に

「サイドバーの見出し」に対してデザインを付けたことで、サイト全体が明るくなりました。

前回の「見出し1タイトル(h1タグ)」~「見出し4(h4タグ)」を含め、今回の「サイドバーの見出し」は自分的にかなり満足できる仕上がりとなりました。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 記事内には【広告】が含まれています
MASAa.net

コメント

【広告】