サポート » 使い方全般 » 「TOPへ戻る」のアイコンがバツマークになる

  • 解決済 バッテリー

    (@vtrd2013)


    こんにちは。
    新しくHPを作成している途中なのですが、どうしても改善出来ない現象が起こっているので、お詳しい方がいらっしゃいましたら是非お力をお貸しください。

    今回質問したい内容は、「TOPへ戻る」の実装をした際に、
    なぜかアイコンが□の中にバツマークが入ったアイコンが表示されてしまうのです。

    今は取ってしまいましたが、他にもContact Info Barの電話やメールのアイコンも□の中にバツマークが表示されて、うまく正しいアイコンが表示されません。

    プラグインを止めてみたりしましたが改善されずお手上げ状態です。

    他のサイトを同じ作りで、その同じ作りのサイトでは問題なくアイコンが表示されているのでより一層なぜだかわかりません。

    違うサイトとはこちら:https://www.iphoneclear.jp/

    ヘルプの必要なページ: [リンクを見るにはログイン]

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • CG

    (@du-bist-der-lenz)

    作りが同じであれば、比較しやすいと思いますが。

    DRILL LANCER

    (@rickaddison7634)

    ソースコードを比較したところ同じ作りとは言えないみたいですね。

    本件に関連する部分だけ述べますと、
    問題のない方では Font Awesome の Ver. 4.xx が読み込まれていますが、
    問題のある方では Font Awesome の Ver. 5.xx が読み込まれています。

    Font Awesome の 4.XX と 5.XX では font-family の指定方法が変わってくるので
    このあたりが影響しているものと思われます。

    トピック投稿者 バッテリー

    (@vtrd2013)

    CG 様
    RICK様

    ご回答いただきまして誠にありがとうございます!

    RICK様
    違いをみつけていただいてとても助かります。

    大変無知で申し訳ないのですが、この場合どのように対処すれば、
    問題のない方では Font Awesome の Ver. 4.xx に変更することができるのでしょうか;;?

    CG

    (@du-bist-der-lenz)

    ロールバックすることはないでしょう。前へ進みましょう。

    トピック投稿者 バッテリー

    (@vtrd2013)

    CG 様

    Font Awesome の Ver. 5.xxのままで、問題なく表示させるほうがよいということでしょうか?
    その場合の解決策を教えていただけると大変助かります。
    宜しくお願いいたします。

    DRILL LANCER

    (@rickaddison7634)

    1週間前と何も変わっていないのであれば
    https://alphalogic.jp/wp/wp-content/themes/interface/font-awesome/css/font-awesome.css
    上記が存在していないためフォントが上手くあたっていない可能性があります。
    ひょっとしたら?ver=5.2.2を Font Awesome のバージョンと勘違いしていたのかもしれません。

    問題ないほうでは Font Awesome 4.0.1 と 4.7.0 の両方が読み込まれています。
    4.0.1の方は不要なので削除すれば良いと思われます。

    トピック投稿者 バッテリー

    (@vtrd2013)

    RICK様

    https://alphalogic.jp/wp/wp-content/themes/interface/font-awesome/css/font-awesome.css

    ここの部分を確認し、問題ないほうと合わせたところアイコンが表示されるようになりました;;!!
    本当に本当にありがとうございます!!!

    ちなみになのですが、、、
    問題ない方のサイト(https://www.iphoneclear.jp)の
    メニューの一番右はしにある、虫眼鏡の検索窓が、
    https://alphalogic.jp/だと表示されないのですが、
    こちらはまだ別の問題でしょうか?

    度々質問してしまい申し訳ございませんが、もし分かれば教えていただければ幸いです><

    トピック投稿者 バッテリー

    (@vtrd2013)

    追記

    ソースをみてみると、
    #search-boxというのが、display: none;という設定になっているのですが、
    スタイルシートを確認しても、どこにもこの設定が入っておらず、どこを変更すればよいかわからないという状態です><

    DRILL LANCER

    (@rickaddison7634)

    下記を削除できれば正常に動作しそうですが・・・

    .search-toggle, #search-box {
        display: none;
    }

    すべてがインラインで読み込まれているのでどこから来ているのかさっぱりです。
    Autoptimize等のHTML圧縮プラグインを使用して圧縮しているのならば、
    それを解除することで少しは分かりやすくなりそうな気がします。

    あと、表示できたとしても「SIMフリー」のメニュー項目に食い込むので削除されたのではないかと・・・

    メニューの項目を

    Apple ┬ iPhone
          └ iPad
    
    Android ┬ docomo
            ├ au
            └ softbank

    といった感じに整理するのも手かもしれません。

    ついでにいうと2つのサイトのAutoptimize等のHTML圧縮プラグインの設定がちぐはぐになっている可能性があります。

    トピック投稿者 バッテリー

    (@vtrd2013)

    RICK様
    ご回答いただきありがとうございます!

    確かにAutoptimizeでHTMLの「HTML コードを最適化」にチェックをいれていました。
    一旦、このチェックを外してみたのですが、わかりますでしょうか・・・?;;

    メニューのアドバイスありがとうございます!
    メニューの項目の幅は変更が出来るので、そのようにするかどうか検討してみます。

    ついでにいうと2つのサイトのAutoptimize等のHTML圧縮プラグインの設定がちぐはぐになっている可能性があります。
    →こちらはなにか今の設定を変えないとまずいということでしょうか><?

    DRILL LANCER

    (@rickaddison7634)

    キャッシュが残っているのか圧縮されたままです。
    Autoptimizeのキャッシュを削除した後で一旦Autoptimizeを無効化してもらえるでしょうか?
    どうやらすべてのCSSをインラインで読み込むように設定されているようなので
    それを解除していただかないとなんとも言えません。

    ついでにいうと2つのサイトのAutoptimize等のHTML圧縮プラグインの設定がちぐはぐになっている可能性があります。
    →こちらはなにか今の設定を変えないとまずいということでしょうか><?

    まずくはないですが・・・おそらく2つのサイトの構造が異なる原因がそこにある可能性があるというだけのことです。

    トピック投稿者 バッテリー

    (@vtrd2013)

    RICK 様
    返信が遅くなり大変申し訳ございません。

    一旦、この検索窓の件は保留することになりました。
    色々と教えていただき本当に助かりました。

    ありがとうございました!!!

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • トピック「「TOPへ戻る」のアイコンがバツマークになる」には新たに返信することはできません。