フォローボタンのcssとjavascripr.js、スキンのjavascript.jsについて

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも フォローボタンのcssとjavascripr.js、スキンのjavascript.jsについて

  • このトピックには9件の返信、2人の参加者があり、最後にbiseclilsにより1週、 6日前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #39208 返信
      Hidekichi
      ゲスト

      フォーラムがエラー出てたのと、今日の昼ぐらいにtwitterも何かしら一時的に技術的な問題で停止したみたいで「まぁ4月だしね、新人さんがサーバーにコーヒーこぼしたか」とか、「LANケーブルに引っかかって抜いちゃったか」とか勝手な妄想して笑ってたんですが、復帰して何よりです。

      で、復帰ついでに色々と(笑)

      寝ログのスクリーンショットを見るとズレがないのでもしかするとOSやブラウザによるのかも知れませんが、フォローボタンのサイズがウチでは揃わなかったので以下のcssで無理やり合わせてます。
      おそらくfontawesomeと、他のwebフォントのオリジナルのサイズが異なるのが原因ではなかろうかと思うんですが、根本的なスタイルをどれでも合うように修正するか、以下のような上書きで済ますかは悩む所です。

      ul.snsp li a span {
        width: 31px;
        height: 31px;
        line-height: 33px;
        font-size: 38px;
        font-size: 2.375rem;
      }
      ul.snsp li a span.icon-feedly-square, ul.snsp li a span.icon-line-square, ul.snsp li a span.icon-hatebu-square {
        font-size: 33px;
        font-size: 2.0625rem;
      }

      ◆javascript.js
      javascript.jsにvar抜けと、acv = wgt;が「;」になっているのでその後のacvLiが定義できていないのの報告です。

      メニューボタンの開閉
      header_menu = $(‘#navi ul’);
      var header_menu = $(‘#navi ul’);

      折り畳み式アーカイブウィジェット
      wgt = $(el);
      var wgt = $(el);

      acv = wgt; //ウィジェット
      acvLi = acv.find(“li”); //ウィジェット内のli全て

      acv = wgt, //ウィジェット
      acvLi = acv.find(“li”); //ウィジェット内のli全て

      更に、先ほどwordpress4.5にアップデートして試してみたんですが、2.1.2だったかで導入された「スキンでもjavascript.jsが使えるように」が機能していないようです。
      同じスクリプトを子テーマjavascript.jsでは機能しました。スキンのjavascriptはまだおそらくほとんどの場面で使われていないかと思うので、時間がある時にでも確認して下さい。

    • #39210 返信
      Hidekichi
      ゲスト
      ul.snsp li a span.icon-feedly-square,
      ul.snsp li a span.icon-line-square,
      ul.snsp li a span.icon-push7-square,
      ul.snsp li a span.icon-hatebu-square {
        line-height: 34.5px;
      }

      このline-heightもいりませんね。

    • #39211 返信
      Avatar photoわいひら
      キーマスター

      #39208のCSSを適用すると、ボタンが以前より一回り小さくなってしまったので、今回はちょっと適用を見送りました。
      ちなみに、ブラウザは何でしょうか?

      ただ、その他のJavaScriptの記入や、javascript.jsが読み込まれないのは、修正したものをアップしておきました。

    • #39212 返信
      Avatar photoわいひら
      キーマスター

      できれば、アイコンフォントの大きさを揃えたいところではありますね。
      ちょっと面倒くさくて、やる気が出ずに、ずっと放置している状態になっています。

    • #39214 返信
      Hidekichi
      ゲスト

      ブラウザはfirefoxで、最初のcssは、今作ってるスキン用に直したものなので一回り小さいかも知れません。
      push7のフォローボタンは2つ目のcssを入れないと直りませんが、

      今すぐなら、blazechariot-cloud9-で見れます。

    • #39235 返信
      Avatar photoわいひら
      キーマスター

      僕もFirefoxを使っていますが、当サイトのフォローアイコンの大きさは大丈夫のような気がします。でも確かに、hidekichiさんのサイトの、Push7アイコンは大きく表示されてますね。なんでだろ。

      というかそれよりも、そのhidekichiさんのサイトの、忍者屋敷のような楽しいスキンは何なんですか。すご!
      JavaScriptだけでも、そんなことができるんですね。

    • #39253 返信
      Hidekichi
      ゲスト

      > 当サイトのフォローアイコン自体の大きさは大丈夫のような気がします。

      アイコン自体は多少大きさが違ってもよいのですが、そのまわりの背景が1px程度ズレていて、font-awesomeとその他と言う感じになっているように思います。

      これをあわせるためのスタイルです。

      フォント基準のline-heightで合わせると、中身の大きさが異なった場合にそれに合わせて外のボタン部分も影響が出るかと思います。

      <ul>
        <li>
          <span>ボタンアイコン</span>
        </li>
        <li>...</li>
        <li>...</li>
      </ul>

      こういう構造ですから、liでボタンのサイズを決めて、中のフォントサイズは可変で調整が必要(font-awesomeとそれ以外みたいな感じで)ですが、liの中央にフォントを持ってくる方が、フォントのサイズを変更するだけなので構造的には簡単で、また色の変化や例えば形状を変えるのも簡単にできるようになり、例えばfont-awesomeだけではなく、cssスプライト等を利用したり、svgを利用することも簡単にできるようになります。なんせ勝手に中央に揃えるだけなので。

      css的には、

      ul li {
        position: relative;
        width: 32px;
        height: 32px;
        background-color: #666;
        color: #fff;
      }
      
      ul li a {
        color: inherit;
      }
      
      ul li span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%,-50%,0);
      }
      
      ul li (あるいはフォント、その他画像) {
        font-size: xx;
        /*あるいは
        width: xx;
        height: xx;
        */
      }

      こんな感じでしょうか。

      で、liに仮に.twitterがあった場合、

      <ul>
        <li class="twitter">
        ...

      こうだとすると、

      ul .twitter:hover {
        background-color: #twitter-color;
      }

      こうでしょうか。

    • #39324 返信
      Avatar photoわいひら
      キーマスター

      1pxでしたら、そこまで重大な不具合でもないので、いずれ直せればと思います。

    • #39336 返信
      Hidekichi
      ゲスト

      と、お思いでしょうが、それはヘッダなりウィジェットの背景が明るい場合です。
      背景が明るい場合の1pxはおそらくこの点に気づきもしないと思うんですが、これが背景が暗くなると目立ちます。何でここには線が入ってるんだろう?と思う人がいるかも知れません。

      アンチエイリアスのようなボケた線であれば、「滲みか」ぐらいに思われるかも知れませんが、バッチリ白線なので(笑)

      で、前にも書きましたが、寝ログのヘッダのフォローボタン付近のスクリーンショットを何かの記事で見たんですけれども、そこには線がなかったんです。これはOSなりブラウザなりそこらに依存するものかどうかが気になる点です。

      ちなみにchromeでは出ないっぽいです。firefoxのみの現象かも知れません。何かfirefoxでfont-awesomeが1pxズレるというのは聞いたことがありますが現象が出ているのはfont-awesome以外なんですよね。

      上: firefox
      下: vivaldi(chromeも同じかと)

      ここらの何かしら情報を持ってる方がいればレス頂きたい感じです。

    • #39377 返信
      Avatar photoわいひら
      キーマスター

      僕もちょっと原因はわからないです。何でだろう。
      いろいろなサイトを見ていて、背景がはみ出すのは、僕も何とかしたいとかねてから思っていました。

      CSSを見てみた感じでは、topが1pxに設定されているので、上が出るのかもしれません。
      でも直すと、下がはみ出すような気もします。
      体調が、戻ったら詳しくみてみようと思います。

9件の返信スレッドを表示中
返信先: フォローボタンのcssとjavascripr.js、スキンのjavascript.jsについて
あなたの情報:




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