折り畳み機能を有効にした状態でフッターにアーカイブを置くと特定条件下で余白ができる

PR 2016/2/28

このトピックには9件の返信、2人の参加者があり、最後にわいひらにより9年前に更新されました。

9件の返信スレッドを表示中

投稿者

投稿
- 2016年2月28日 11:18 AM #36966
  あるてま
  ゲスト
  いつも使わせていだただいております。
  
  タイトルの通り、折り畳み機能を有効にした状態でフッターにアーカイブを置くと特定条件下で余白ができてしまいます。
  アーカイブと他のウィジェット（自分の場合はカテゴリ、ブックマーク）をそれぞれフッター右、左に配置しております。
  その時に2015年を表示するようにした場合
  
  となりますが、2016年を表示するようにした場合
  
  となってしまい、余白が生まれてしまいます。
  開発者ツールで確認したところ、リストの一部がフッターに入りきらなった結果、余白が生まれているということがわかりました。
  
  バージョンは2.1.0を使用していますが、2.0.9でもおそらくこの現象があるものと思われます。
  
  お手数ですがよろしくお願いします。
  Attachments:
  xoDsO05.jpg
- 2016年2月28日 1:29 PM #36971
  
  わいひら
  キーマスター
  
  特定条件というのを詳しく書いてもらって良いでしょうか？
  アーカイブをフッターに置きましたが、不具合が再現できないようです。
  よかったら、実際に不具合が出ているページのURLを掲載していただけないでしょうか。
- 2016年2月28日 3:13 PM #36975
  
  あるてま
  ゲスト
  
  色々試していた所、CSSの「.widget_archive ul.years .hide」の「visibility: hidden」を「display: none」に変更すれば問題なく対処できることがわかりました。
  visibilityの仕様上、領域がそのまま確保されるため、liタグがフッターを超えてしまう状況になるようです。
  個人的にはこっちでも問題ないですが、他のユーザーから見たらクリック時の動作が味気なくなりますのであんまりいい気じゃないかもしれませんね…
  試してみてもごく限定的な状況でしか発生しないので、この部分の修正は優先しなくてもいいと思ってます。
  
  念のためリンク置いておきます
  http://tri9la.wp.xdomain.jp/#footer
  おそらくですが、カテゴリーとブックマークの数よりもアーカイブの数が多いから発生するのだと思います。
- 2016年2月28日 9:38 PM #36979
  
  Hidekichi
  ゲスト
  
  確かサンプルでは、visibility: hiddenの時にheight:0が入ってたと思いますが、これは言われてる領域の高さを無くすためのものです。display:noneにすると、fadeがうまくかからない可能性があるので敢えてvisibility: hiddenでheight:0にしてあります。
  
  上記のように高さが0になるのが正しい挙動です。
  
  質問の3枚目の画像を見ると.widget_archive ul.years .hideの中のliを調べている最中の画像かと思います。li自体は画像のようにそこにあるわけですが親要素の高さがなくかつ非表示になっているため他に影響を与えないと思うんです。
  もしliが何かしらに影響を与えているようであればそれも高さを無くしちゃえば良いのではと思いますが、例えば現在の公式りフッターで左の固定ページの部分を中身のulごとデベロッパーツールで消して、アーカイブの高さを色々と試してみてもコピーライトとの間隔は変わらないと思うので、影響はないかと思うんです。
  
  質問の「余白が生まれる」がどの部分なのかがわかればサックリ対応できると思うんですが、それがどこかがわからないので現状は問題ないように思います。
- 2016年2月28日 10:41 PM #36982
  
  通りすがり
  ゲスト
  
  横から失礼します。
  
  「余白」とはこれを示しているのだと思います
  
  .widget_archive ul.years .hide の height: 0; を削除すると「余白」は消えました。
- 2016年2月28日 10:51 PM #36984
  
  通りすがり
  ゲスト
  
  .widget_archive ul.years .hide の height: 0; は残したまま、 overflow: hidden; を追記すれば余白が生じない上に無駄なフッター領域が作られないといういい感じに動作しました。参考までに。
  
  閉じた状態
  
  開いた状態
- 2016年2月28日 11:15 PM #36985
  
  Hidekichi
  ゲスト
  
  余白ってフッター下の白い部分ですか。なるほど確かに。
  オリジナルのサンプルが3列横並びレスポンシプなのでフッター突き抜けるとか気が付かなかった部分でした(笑)
  overflow:hiddenは一番よい解決策ですね。
  
  一応オリジナルの方も修正しておきました。
  オリジナル: a href=”http://codepen.io/Hidekichi/pen/jWmOJN” target=”_blank”>Simplicity フッターアーカイブのデザイン案 | codepen
  
  Simplicity フッターアーカイブとカテゴリーのデザイン案 | codepen
  
  いくつかフォークしているのでどれがどれかあんまり自分でもわかってませんが、このフォーラムに投稿した分と記事にしてもらったオリジナルのサンプルは上記のリンクだろうと思います。
- 2016年2月28日 11:17 PM #36986
  
  Hidekichi
  ゲスト
  
  おや？最初のリンクが外れた。
  
  Simplicity フッターアーカイブのデザイン案 | codepen
  
  です。
- 2016年2月29日 1:05 PM #37006
  
  あるてま
  ゲスト
  
  overflow:hiddenで試したら問題なくいけました。
  特に不具合もなさそうなのでCSSに追加します。
  みなさん、ありがとうございます。
- 2016年2月29日 6:05 PM #37029
  わいひら
  キーマスター
  みなさんありがとうございます。
  style.cssの.widget_archive ul.years .hideについては以下のように修正しておこうと思います。
```
.widget_archive ul.years .hide {
  margin: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
```
投稿者

投稿