【Cocoon】検索窓をオシャレにカスタマイズ!

Cocoonカスタマイズ

このサイトのように角の丸い検索バーを実装するCSSカスタマイズを紹介します。

下記CSSをコピペしてください。

.search-box{
	margin: 1em;
}

.search-edit{
	height: 40px;
	border-radius: 40px;
}

.search-submit{
	line-height: 0;
	top: 0;
	bottom: 0;
}

.search-edit:focus{
	outline: none;
	border-color: pink; /* フォーカス時の枠色 */
}

角が取れたオシャレな検索窓に大変身します。

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント

  1. はじめまして 前田と申します。
    最近ブログ始めて、cocoon入れさせていただきました。
    パソコンど素人な私でもキレイなページできたのですが、
    パンくずリスト、及び投稿が表示されません。
    固定ページのみが表示さております。

    どうすればよろしいのでしょうか?
    いろいろ検索してみたのですが、どうしてもわかりません。

    アドバイスよろしくお願い致します。

    • コメントありがとうございます!
      状況がいまいちよくわからないのですが、投稿が表示されないというのはトップページでしょうか?
      その場合、WordPressの設定→表示設定から、「ホームページ」(=トップページ)を「最新の投稿」にしているかどうかご確認ください。
      パンくずリストはCocoon設定→投稿→パンくずリストの配置を「メインカラムトップ」にするとわかりやすいかとおもいます。
      解決しないようでしたら、恐れ入りますが当該URLを併せて再度コメント頂けますようお願いいたします。