WordPressテーマ Cocoon サイドバーの見出し
このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。
MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト
WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。
今回は、WordPressテーマ Cocoonでの「サイドバーの見出し」の3回目となるカスタマイズについてまとめてみました。
WordPressテーマ Cocoon サイドバーの見出し
「サイドバーの見出し」については、先日もカスタマイズを行いました。
【Cocoon】サイドバーの見出しの再々カスタマイズ
WordPressテーマ Cocoonの「サイドバーの見出し」については以前にもカスタマイズを行ってきました。今回「サイドバーの見出し」に対して、改めて「見出し1タイトル(h1タグ)」と同じデザインを採用してみました。
現在の「サイドバーの見出し」デザインは次の通りです。
前回の「サイドバーの見出し」のカスタマイズで「見出し1タイトル(h1タグ)」と同じデザインにしたのですが、今回「サイドバーの見出し」専用のデザインにしたいと思います。
サイドバーの見出しのカスタマイズ
WordPressテーマ Cocoonで「サイドバーの見出し」のカスタマイズを行います。
カスタマイズ内容
「サイドバーの見出し」のカスタマイズ内容は、下記の通りです。
「スタイルシート(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; /*文字位置中央 center*/ margin: 10px 0px 20px 0px; padding: 10px 10px 8px 10px; border-top: 3px solid #fe619a; /*上ラインの太さとカラー*/ border-bottom: 3px solid #fe619a; /*下ラインの太さとカラー*/ border-radius: 9px; /*角丸コーナー*/ 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; /*文字位置中央 center*/ margin: 10px 0px 20px 0px; padding: 10px 10px 8px 10px; border-top: 3px solid #fe619a; /*上ラインの太さとカラー*/ border-bottom: 3px solid #fe619a; /*下ラインの太さとカラー*/ border-radius: 9px; /*角丸コーナー*/ line-height: 100%; }
カスタマイズ後のサイドバーの見出し
今回のカスタマイズによって、「サイドバーの見出し」のデザインは次のようになりました。
背景は「見出し1タイトル(h1タグ)」と同じデザインとして、上下にラインを設けて角4箇所にアールを付けてみました。
最後に
もともと「サイドバーの見出し」のタイトル表示はセンタリング(中央寄せ)にしているため、上下対称、左右対称のデザインの方がしっくりと来ると同時に、サイドバー専用のデザインと言うことで、記事内の見出しと区別出来て良くなったと思います。
コメント