SNSをクリックすると縦線が出ます。

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも SNSをクリックすると縦線が出ます。

  • このトピックには12件の返信、2人の参加者があり、最後にももうらにより10年前に更新されました。
12件の返信スレッドを表示中
  • 投稿者
    投稿
    • #45345
      ももうら
      ゲスト

      こんにちは。

      ヘッダー部分のSNSをクリックすると縦線が出ます。

      バージョン:2.3.0b

      ウチの環境で家でしょうか?
      見えにくいですがよろしくお願いします。

      http://marugari.wfb92.com/wp-content/uploads/2016/09/0919.png

    • #45346
      ももうら
      ゲスト

      ×ウチの環境で家でしょうか?
      ●ウチの環境だけでしょうか?

      画像が貼れない??

    • #45356
      アバター画像わいひら
      キーマスター

      このページでいいですよね?
      http://marugari.wfb92.com/
      Chrome、Firefoxだと表示されないようです。
      不具合の出るブラウザはどれでしょうか?

    • #45368
      hidekichi
      ゲスト
      ul.snsp li a {
        text-decoration: none;
        display: block; /*追加*/
      }

      でどうですか?

      直接該当のセレクタを修正せずとも子テーマstyle.cssに

      ul.snsp li a {
        display: block;
      }

      でイケると思います。

    • #45371
      ももうら
      ゲスト

      わいひらさま
      >不具合の出るブラウザはどれでしょうか?
      Firefoxです。Chromeは問題ありません。

      ただ、該当ページだけの症状ではなく他サイトでも同じ縦線が出ます。

      寝ログも同じように出ます。

      hidekichiさま

      ul.snsp li a {
        text-decoration: none;
        display: block; /*追加*/
      }

      自サイトは改善されました。

      ただ、他サイト(例えばSimplicity)を再度クリックすると症状は変わらずでした。

    • #45373
      ももうら
      ゲスト

      ちなみにhidekichiさんのサイトblazechariot -Xdomain-は問題ないですね。

      「Simplicity」「寝ログ」は出るんですよね。

      やっぱりウチのFirefoxの問題でしょうかね??

    • #45374
      hidekichi
      ゲスト

      おそらくですが、セレクタの指定もあると思います。

      ul.snsp li a {
        text-decoration: none;
      }
      
      .snsp li a {
        text-decoration: none;
      }

      上記だとulの.snspと言う事で選択されますが、下だと単に.snspの中のaと言うことでulの影響がなくなるため、aの幅がulまで伸びることはないかと思います。

    • #45375
      ももうら
      ゲスト

      hidekichiさま

      なるほどですね。ありがとうございました。

    • #45376
      hidekichi
      ゲスト

      ちなみにうちのサイトは、親テーマ2.1.6までしか対応してませんけれども(それ以降はバージョンアップで追加された部分だけ修正していく必要がありますがまだ見てません)、親テーマのstyle.cssを全体的に見直して適用してあり、このcssはパーツスキンとしてダウンロードできます。

      cssをparts.cssとして、パーツスキンで読み込ませて適用できます(※)。簡単に言うと親テーマの拡張版ではなく、fix版のcssとなります。
      このパーツスキンは親テーマにあるstyle.cssのみの修正で、Simplicityのスタイルの基本的な部分のみを見直しています。これはメディアクエリや、拡張スタイル等は別ファイルなので手を付けていません。

      ※ うちのサイトからダウンロードできるcssが問題ないことを確かめるために、親テーマのcss自体をパーツスキンのcssで書き換えて、かつ圧縮しています

      内容的には、

      .entry h2 {
        font-size: 20px;
      }
      .entry h2 a {
        font-size: inherit;
      }

      みたいなことをしてあり、h2のフォントサイズを変えるだけでその中のa要素にも値が継承できるようにしてあります。本来これは不要なことですが、simplicityはaタグに色々スタイルされているため、見出しの色が変えられないとか、サイズが変わらないと言うようなことを軽減するための処置です。

      これらは、

      親テーマstyle.css
      パーツスキン.css
      子テーマstyle.css

      こういう感じで読み込まれ、親テーマstyle.cssをパーツスキンで上書きして問題があるような部分を修正しつつ、それでもまだ問題がある場合は子テーマstyle.cssで修正できるようになっています。

      主に行間・間隔の統一や不要プロパティ、重複プロパティ、問題と思われる部分の修正等を行ってます。
      詳しくは、こちらを参照のこと。

      すでに多くのカスタマイズをされているような場合は、それらとの組み合わせによっておかしな表示になる可能性もあります。
      これからSimplicityを利用されるような方はカスタマイズ自体がほぼないので、(バージョンが違うことによる)問題が出る部分は少ないと思います。
      それらが見つかった場合は報告してもらったら修正します。が、うちの環境の話ですが、OSをlinux mintからarch linuxに変更して、まだ以前の環境に戻してません(笑)
      なので修正自体はできますが、サックリとできないと思うのでやや時間がかかる可能性があります。

      それらの修正は、親テーマの問題と思われるプロパティの修正なので、基準は親テーマの仕様になります。

    • #45378
      hidekichi
      ゲスト

      セレクタの指定だけ直しても完全には無くならないようなので、やはりdisplay: blockが有効かと思います。

    • #45429
      ももうら
      ゲスト

      そうですね。display: blockが有効のようですね。
      色々ありがとうございました.

    • #45436
      hidekichi
      ゲスト

      ただ、アレですよ、うちのサイトはdisplay: blockは入ってないんです。なので、まぁ有効なのはdisplay: blockですが、cssの組み立て方もあるのかなぁと思ったりなんちゃったり。

    • #45438
      ももうら
      ゲスト

      コソコソやって見ます(و•o•)و<Thank you

12件の返信スレッドを表示中
  • トピック「SNSをクリックすると縦線が出ます。」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)