WordPressCocoon

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

アイキャッチ画像 Cocoon
この記事は約4分で読めます。
スポンサーリンク

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

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

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

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

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

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

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

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

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

前回の「サイドバーの見出し」のカスタマイズで「見出し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%;
}

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

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

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

背景は「見出し1タイトル(h1タグ)」と同じデザインとして、上下にラインを設けて角4箇所にアールを付けてみました。

最後に

もともと「サイドバーの見出し」のタイトル表示はセンタリング(中央寄せ)にしているため、上下対称、左右対称のデザインの方がしっくりと来ると同時に、サイドバー専用のデザインと言うことで、記事内の見出しと区別出来て良くなったと思います。

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

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ARKA-蒼穹の門
三国志外伝:戦姫覚醒
Cave Shooter
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
クッキーランキングダム
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
戦国布武
我が天下

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント