【Cocoon】スマートフォン表示のサイドバーの見出し

アイキャッチ画像 Cocoon
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPress blog site specialized in PC produce by masaa
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

今回は、WordPressテーマ Cocoonでの「スマートフォン表示(スライドインボタン設定時)のサイドバーの見出し」のカスタマイズについてまとめてみました。

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

以前、WordPressテーマ Cocoonのサイドバーに対して「サイドバーの見出しのカスタマイズ5回目」を行いました。

【Cocoon】サイドバーの見出しのカスタマイズ5回目
WordPressテーマ Cocoonでの5回目となる「サイドバーの見出し」のカスタマイズについてまとめてみました。今回のカスタマイズでは「サイドバーの見出し」をシンプルなスタイルに変更し下側のバーを点滅させてみました。

これはパソコンで見た時の表示でスマートフォンでは未対応でした。

現在の「スマートフォン表示(スライドインボタン設定時)のサイドバーの見出し」のスタイルは下記の通りとなっております。

【Cocoon】スマートフォン表示のサイドバーの見出し

今回は、WordPressテーマ Cocoonでの「スマートフォン表示(スライドインボタン設定時)のサイドバーの見出し」のカスタマイズについてまとめてみました。

スマートフォン表示(スライドインボタン設定時)のサイドバーの見出しのカスタマイズ

WordPressテーマ Cocoonでの「スマートフォン表示(スライドインボタン設定時)のサイドバーの見出し」のカスタマイズを行います。

カスタマイズ内容

「スマートフォン表示(スライドインボタン設定時)のサイドバーの見出し」のカスタマイズの内容は下記の通りです。

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

/************************************
** ●サイドバータイトル スライドインボタン設定時カスタマイズ
************************************/
#sidebar-menu-content 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; /*フォントサイズ*/
  font-weight: 900; /*文字強調*/
  letter-spacing: 6px; /*文字間隔*/
  text-align: center; /*文字位置中央 center*/
  margin: 10px 0px 20px 0px;
  padding: 16px 3px 12px 3px;
  border-top-right-radius: 14px; /*右上角丸コーナー*/
  border-top-left-radius: 14px; /*左上角丸コーナー*/
  border-bottom-right-radius: 2px; /*右下角丸コーナー*/
  border-bottom-left-radius: 2px; /*左下角丸コーナー*/
  line-height: 100%;
/*  border: 1px solid #ff75a7!important;*/
}
#sidebar-menu-content h3::after {
  position: absolute;
  bottom: 3px;
  left: 1.8em;
  content: '';
  height: 5px; /*8*/
  width: -webkit-calc(100% - 3.6em);
  width: calc(100% - 3.6em);
  background-color: #fe619a;
  border-radius: 4px;
}

下側のバーを点滅をする場合「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を追記します。

/************************************
** ■イメージ画像やアイコンを点滅させる点滅させるカスタマイズ
************************************/
#sidebar-menu-content 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】スマートフォン表示のサイドバーの見出し

今回のカスタマイズは、以前、WordPressテーマ Cocoonのサイドバーに対して行った「サイドバーの見出しのカスタマイズ5回目」と同じスタイルとしました。

最後に

以前「サイドバーの見出しのカスタマイズ5回目」を行った時に、「スマートフォン表示(スライドインボタン設定時)のサイドバーの見出し」もカスタマイズしておけば良かったのですが、スマートフォン表示をすっかり忘れてしまい今となってしまいました。

MASAa.netをご覧頂きありがとうございます!
下記のサポートボタンから当サイトMASAa.netの支援が行えます!

または、カスタマイズのひと休みにスマホゲームは如何でしょうか?
魔神の子
蒼空ファンタジー
リネージュ2M
商人放浪‪記
極夜大陸:メテオの彼方
パズル&サバイバ‪ル
ドラゴンとガールズ交響曲
魔剣伝説

ブレイドエクスロード
ロードモバイル
おすすめWordPressテーマ!
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ WING(AFFINGER5)
WordPressテーマ Diver

WordPress Cocoon
MASAa.net

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール