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

Simplicityの特徴 フォーラム 不具合報告 折り畳み機能を有効にした状態でフッターにアーカイブを置くと特定条件下で余白ができる

  • このトピックには9件の返信、2人の参加者があり、最後にアバター画像わいひらにより8年前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #36966 返信
      あるてま
      ゲスト

      いつも使わせていだただいております。

      タイトルの通り、折り畳み機能を有効にした状態でフッターにアーカイブを置くと特定条件下で余白ができてしまいます。
      アーカイブと他のウィジェット(自分の場合はカテゴリ、ブックマーク)をそれぞれフッター右、左に配置しております。
      その時に2015年を表示するようにした場合

      となりますが、2016年を表示するようにした場合

      となってしまい、余白が生まれてしまいます。
      開発者ツールで確認したところ、リストの一部がフッターに入りきらなった結果、余白が生まれているということがわかりました。

      バージョンは2.1.0を使用していますが、2.0.9でもおそらくこの現象があるものと思われます。

      お手数ですがよろしくお願いします。

      Attachments:
    • #36971 返信
      アバター画像わいひら
      キーマスター

      特定条件というのを詳しく書いてもらって良いでしょうか?
      アーカイブをフッターに置きましたが、不具合が再現できないようです。
      よかったら、実際に不具合が出ているページのURLを掲載していただけないでしょうか。

    • #36975 返信
      あるてま
      ゲスト

      色々試していた所、CSSの「.widget_archive ul.years .hide」の「visibility: hidden」を「display: none」に変更すれば問題なく対処できることがわかりました。
      visibilityの仕様上、領域がそのまま確保されるため、liタグがフッターを超えてしまう状況になるようです。
      個人的にはこっちでも問題ないですが、他のユーザーから見たらクリック時の動作が味気なくなりますのであんまりいい気じゃないかもしれませんね…
      試してみてもごく限定的な状況でしか発生しないので、この部分の修正は優先しなくてもいいと思ってます。

      念のためリンク置いておきます
      http://tri9la.wp.xdomain.jp/#footer
      おそらくですが、カテゴリーとブックマークの数よりもアーカイブの数が多いから発生するのだと思います。

    • #36979 返信
      Hidekichi
      ゲスト

      確かサンプルでは、visibility: hiddenの時にheight:0が入ってたと思いますが、これは言われてる領域の高さを無くすためのものです。display:noneにすると、fadeがうまくかからない可能性があるので敢えてvisibility: hiddenでheight:0にしてあります。


      上記のように高さが0になるのが正しい挙動です。

      質問の3枚目の画像を見ると.widget_archive ul.years .hideの中のliを調べている最中の画像かと思います。li自体は画像のようにそこにあるわけですが親要素の高さがなくかつ非表示になっているため他に影響を与えないと思うんです。
      もしliが何かしらに影響を与えているようであればそれも高さを無くしちゃえば良いのではと思いますが、例えば現在の公式りフッターで左の固定ページの部分を中身のulごとデベロッパーツールで消して、アーカイブの高さを色々と試してみてもコピーライトとの間隔は変わらないと思うので、影響はないかと思うんです。

      質問の「余白が生まれる」がどの部分なのかがわかればサックリ対応できると思うんですが、それがどこかがわからないので現状は問題ないように思います。

    • #36982 返信
      通りすがり
      ゲスト

      横から失礼します。

      「余白」とはこれを示しているのだと思います
      余白

      .widget_archive ul.years .hideheight: 0; を削除すると「余白」は消えました。
      余白が消えた

    • #36984 返信
      通りすがり
      ゲスト

      .widget_archive ul.years .hideheight: 0; は残したまま、 overflow: hidden; を追記すれば余白が生じない上に無駄なフッター領域が作られないといういい感じに動作しました。参考までに。

      閉じた状態
      閉じた状態

      開いた状態
      開いた状態

    • #36985 返信
      Hidekichi
      ゲスト

      余白ってフッター下の白い部分ですか。なるほど確かに。
      オリジナルのサンプルが3列横並びレスポンシプなのでフッター突き抜けるとか気が付かなかった部分でした(笑)
      overflow:hiddenは一番よい解決策ですね。

      一応オリジナルの方も修正しておきました。
      オリジナル: a href=”http://codepen.io/Hidekichi/pen/jWmOJN” target=”_blank”>Simplicity フッターアーカイブのデザイン案 | codepen

      Simplicity フッターアーカイブとカテゴリーのデザイン案 | codepen

      いくつかフォークしているのでどれがどれかあんまり自分でもわかってませんが、このフォーラムに投稿した分と記事にしてもらったオリジナルのサンプルは上記のリンクだろうと思います。

    • #36986 返信
      Hidekichi
      ゲスト

      おや?最初のリンクが外れた。

      Simplicity フッターアーカイブのデザイン案 | codepen

      です。

    • #37006 返信
      あるてま
      ゲスト

      overflow:hiddenで試したら問題なくいけました。
      特に不具合もなさそうなのでCSSに追加します。
      みなさん、ありがとうございます。

    • #37029 返信
      アバター画像わいひら
      キーマスター

      みなさんありがとうございます。
      style.cssの.widget_archive ul.years .hideについては以下のように修正しておこうと思います。

      .widget_archive ul.years .hide {
        margin: 0;
        height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
      }
9件の返信スレッドを表示中
返信先: 折り畳み機能を有効にした状態でフッターにアーカイブを置くと特定条件下で余白ができるで#36982に返信
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)