WordPressCocoon

【Cocoon】ウィジェットの見出しのカスタマイズ

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

WordPressテーマ Cocoon

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

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

今回は、WordPressテーマ Cocoonでの「ウィジェットの見出し」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon ウィジェットの見出し

現在のWordPressテーマ Cocoonでの「ウィジェットの見出し」のスタイルは、次の様になっています。

【Cocoon】ウィジェットの見出しのカスタマイズ

このように「ウィジェットの見出し」については、これまでカスタマイズを行っておらず特にスタイルが設定されていません。

今回、「ウィジェットの見出し」を他の見出しと同様のスタイルとするカスタマイズを行います。

ウィジェットの見出しのカスタマイズ

WordPressテーマ Cocoonでの「ウィジェットの見出し」のカスタマイズを行います。

カスタマイズ内容

「ウィジェットの見出し」のカスタマイズの内容は下記の通りです。

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■ウィジェットの見出しのカスタマイズ
************************************/
#main .main-widget-label {
  margin-top: 20px; /*上マージン*/
  margin-bottom: 11px; /*下マージン*/
  border-radius: 6px; /*角丸コーナー*/
  color: #fff; /*フォントカラー*/
  font-size: 16px; /*フォントサイズ*/
  font-weight: 700; /*フォント太さ*/
  position: relative;
  background:linear-gradient(160deg, #fe619a, #fe619a, #ffddee); /*タイトル背景カラー*/
  padding-top: 11px; /*上内側余白設定*/
  padding-bottom: 8px; /*下内側余白設定*/
  padding-left: 24px; /*左内側余白設定*/
}
#main .main-widget-label::after {
  position: absolute;
  top: 0.4em;
  left: 0.6em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 0.8em);
  height: calc(100% - 0.8em);
  background-color: #fff;
  border-radius: 6px;
}
.recommended.cf.rcs-large-thumb-on { /*ウィジェット[C]おすすめカード*/
  margin-top:0; /*上マージンクリア*/
}
#main .main-widget-label::after { /*ウィジェット カスタムHTMLタイトル*/
  animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/
}
@keyframes blink {
  0% {
    opacity: 0.2;
  }
  81% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

カスタマイズ後のウィジェットの見出し

今回のカスタマイズによって、「ウィジェットの見出し」のスタイルは次の様になりました。

【Cocoon】ウィジェットの見出しのカスタマイズ

記事中やサイドバーの見出しとは違ったスタイルを採用し、差別化してみました。

最後に

WordPressテーマをカスタマイズしていくと、いくつもの見出しが有り全て同じスタイルと言う訳にも行かないので、サイトスタイル全体の事を考えて決めて行く必要があり結構大変だったりします。

今回ウィジェットの見出しをカスタマイズして、ほぼ見出しのスタイルが固定化されました。

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

コメント