WordPressCocoon

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

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

WordPressテーマ Cocoon

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

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

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

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

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

【Cocoon】サイドバーの見出しのカスタマイズ5回目
WordPressテーマ Cocoonでの5回目となる「サイドバーの見出し」のカスタマイズについてまとめてみました。今回のカスタマイズでは「サイドバーの見出し」をシンプルなスタイルに変更し下側のバーを点滅させてみました。
【Cocoon】サイドバーの見出しのカスタマイズ3回目
WordPressテーマ Cocoonの「サイドバーの見出し」については以前にも「見出し1タイトル(h1タグ)」と同じデザインとするカスタマイズを行いました。今回「サイドバーの見出し」に対して独自のデザインを採用してみました。
【Cocoon】サイドバーの見出しの再々カスタマイズ
WordPressテーマ Cocoonの「サイドバーの見出し」については以前にもカスタマイズを行ってきました。今回「サイドバーの見出し」に対して、改めて「見出し1タイトル(h1タグ)」と同じデザインを採用してみました。

現在の「サイドバーの見出し」のスタイルは下記の通りとなっており、このスタイルに関するカスタマイズは記事として掲載していません。

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

日頃から「サイドバーの見出し」スタイルについては、色々と試行錯誤しています。

斜めのラインの見出しスタイルは、記事中の見出し(h1〜h6タグ)で採用しており、それとは違った「サイドバーの見出し」スタイルとするカスタマズを行ってみたいと思います。

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

WordPressテーマ Cocoonでの6回目となる「サイドバーの見出し」のカスタマイズを行います。

6回目となる「サイドバーの見出し」カスタマイズの内容は下記の通りです。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「●サイドバータイトル カスタマイズ」に上書きします。

/************************************
** ●サイドバータイトル(見出し)/スライドイン時タイトル(見出し)/Googleアドセンス広告タイトル(見出し) カスタマイズ
************************************/
.sidebar .ad-label,
#sidebar-menu-content h3,
#sidebar h3{
  position: relative;
/*  color: #333; /*フォントカラー*/
  color: #fff; /*フォントカラー*/
  background:linear-gradient(to top, #ffddee, #ff75a7, #ff75a7, #ffddee)!important;
/*  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; /*フォントサイズ*/
  font-weight: 900; /*文字強調*/
  letter-spacing: 6px; /*文字間隔*/
  text-align: center; /*文字位置中央 center*/
  margin: 10px 0px 20px 0px;
  padding: 15px 3px 11px 3px;
/*  border-top-right-radius: 40px; /*右上角丸コーナー*/
/*  border-top-left-radius: 40px; /*左上角丸コーナー*/
/*  border-bottom-right-radius: 10px; /*右下角丸コーナー*/
/*  border-bottom-left-radius: 10px; /*左下角丸コーナー*/
/*	border-radius: 16px 60px/5px 16px 16px;*/
  border-radius: 40px 0;
  line-height: 82%;
/*  border: 1px solid #ff75a7!important;*/
}
.sidebar .ad-label::after,
#sidebar-menu-content h3::after,
#sidebar h3::after {
  position: absolute;
  bottom: 4px;
  left: 3.6em;
  content: '';
  height: 4px; /*8*/
  width: -webkit-calc(100% - 8.0em);
  width: calc(100% - 8.0em);
/*  background-color: #ff75a7;*/
  background-color: #fff;
  border-radius: 4px;
}
@media screen and (max-width: 768px){
  .sidebar .ad-label::after,
  #sidebar-menu-content h3::after,
  #sidebar h3::after {
    left: 3.81em;
  }
}

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

/************************************
** ■イメージ画像やアイコンを点滅させる点滅させるカスタマイズ
************************************/
#sidebar h3::after { /*サイドバータイトル*/
  animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/
}
@keyframes blink{
  0% {
    opacity: 0.2;
  }
  81% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

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

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

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

今回のカスタマイズは、斜めラインのスタイルを廃止し、上下にグラデーションを設けました。

また、引き続き点滅するバーを採用しています。

その他にフォントカラーやサイズ調整など細かいカスタマイズも行っています

なお、「サイドバーの見出し」以外にも同様に「スライドインの見出し」「Googleアドセンス広告タイトル(見出し)」にも同様なスタイルとしています。

最後に

今回の「サイドバーの見出し」のカスタマイズによって、「サイドバーの見出し」専用のスタイルになりました。

当面はこの状態になりますが、引き続き何かアイディアが閃いたらその度に修正していきたいと思います。

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

コメント