久しぶりにこのサイトを開いたら、サイドバーの検索フォームが縦長にと言うか、横の方が長い長方形ではあるが、縦方向に無駄に長くなってしまった。複数行の入力ができるわけではなく一行しか入力できない。上下のスペースが無駄に広い。いつからこうなったのかは分からない。でも、醜い。
ちなみに、WordPressのテーマはCocoonで、スキンは「なし」である。スキンが「凸凹」の別のサイトは変化がない。
サイドバーの検索フォームが無駄に高くなった
未分類
未分類
未分類久しぶりにこのサイトを開いたら、サイドバーの検索フォームが縦長にと言うか、横の方が長い長方形ではあるが、縦方向に無駄に長くなってしまった。複数行の入力ができるわけではなく一行しか入力できない。上下のスペースが無駄に広い。いつからこうなったのかは分からない。でも、醜い。
ちなみに、WordPressのテーマはCocoonで、スキンは「なし」である。スキンが「凸凹」の別のサイトは変化がない。
コメント
「検索」ボタンのレイアウトの問題かもしれない。「検索」の文字が縦に並んで縦長になってしまうので、そのため、インプットフォームの高さも合わせなくてはいけなくて、上下に無駄なスペースが生じる。
次のようにすれば正常に戻る。
.wp-block-search__buttonのwidhtを60px→最低でも65px
:root :where(.wp-element-button, .wp-block-button__link)のpaddingを
calc(0.667em + 2px) calc(1.333em + 2px)→無効にする
「.wp-block-search__buttonのwidhtを60px→最低でも65px」は #Firefox の私の環境での話。
#Edge の私の環境の場合、50pxでも大丈夫。
これはフォントの種類やサイズの問題が影響してると思う。
おかしな表示になったのは、:root :where(.wp-element-button, .wp-block-button__link)のpaddingが原因で、 #Edge の私の環境の場合、これを無効にするだけで正常に戻る。
ウィジェットの「外観」→「サイドバー」で検索フォームは「ブロック」に<!-- wp:search /-->が記入されているものだったが、「ブロック」ではなく「検索」を選ぶことで「検索」ボタンがない検索フォームになって、縦に長くならなくなったので、変更する。
「最近の投稿」も同様に「ブロック」で次のように記載されていた。
<!-- wp:group --><div class="wp-block-group"><!-- wp:heading --><h2>最近の投稿</h2><!-- /wp:heading --><!-- wp:latest-posts /--></div><!-- /wp:group -->
これも削除して「最近の投稿」というウィジェットを配置することにした。