WordPressCocoon

【Cocoon】検索ウィンドウと月選択ウィンドウをカスタマイズする

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

検索ウィンドウと月選択ウィンドウ

WordPressテーマ Cocoonの「検索ウィンドウ」と「月選択ウィンドウ」のカスタマイズについてまとめてみました。

なお、ウィンドウをフォーカスしている場合のカスタマイズとなります。

テーマCocoonの検索ウィンドウと月選択ウィンドウ(フォーカス時)

WordPressテーマ Cocoonで使われている「検索ウィンドウ」のフォーカス時は、次の様になっています。

【WordPress】検索ウィンドウと月選択ウィンドウをカスタマイズする

また、WordPressテーマ Cocoonで使われている「月選択ウィンドウ」は、次の様になっています。

【WordPress】検索ウィンドウと月選択ウィンドウをカスタマイズする

検索ウィンドウと月選択ウィンドウのカスタマイズ(フォーカス時)

今回のカスタマイズ内容は、「検索ウィンドウ」または「月選択ウィンドウ」をフォーカスしたときに、ウィンドウの枠線のカラーを変更すると言う単純なものです。

カスタマイズ内容

「人気記事ランキング」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ●検索ウィンドウと月選択ウィンドウの枠線カラー(フォーカス時)
************************************/
.search-edit:focus{ /*検索ウィンドウ(フォーカス時)*/
  outline: none;
  border-color: #fe619a; /*フォーカス時の枠カラー*/
}
#archives-dropdown-3:focus{ /*月選択ウィンドウ(フォーカス時)*/
  outline: none;
  border-color: #fe619a; /*フォーカス時の枠カラー*/
}

カスタマイズ後の検索ウィンドウと月選択ウィンドウ(フォーカス時)

今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「検索ウィンドウ」のフォーカス時は、次の様になりました。

【WordPress】検索ウィンドウと月選択ウィンドウをカスタマイズする

また、WordPressテーマ Cocoonで使われている「月選択ウィンドウ」は、次の様になりました。
(※Internet Explorer、Microsoft Edgeは非対象)

【WordPress】検索ウィンドウと月選択ウィンドウをカスタマイズする

最後に

今回、「検索ウィンドウ」と「月選択ウィンドウ」のフォーカス時の枠線のカラーを変えただけのカスタマイズですが、もっと突っ込んでカスタマイズを行うとウィンドウ自体のデザインを変更するのも良いと思います。

ただ自分の場合、この長方形のデザインよりも良いデザインが作れそうも無いので、デザインについてはデフォルトで使っていきます。

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

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

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



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ブラック・サージナイト
リネージュ2M
商人放浪‪記
ドラゴンとガールズ交響曲
エグゾスヒーローズ
魔剣伝説
ロードモバイル
パズにゃん

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

MASAa.net

コメント