モバイルのサイトタイトル非表示

  • このトピックには14件の返信、2人の参加者があり、最後にdorにより11年、 5ヶ月前に更新されました。
14件の返信スレッドを表示中
  • 投稿者
    投稿
    • #27091
      dor
      ゲスト

      お世話になっております。
      本当にたびたび申し訳ないです。
      質問させてください。

      サイトタイトル入りのヘッダー画像を作ったため、
      デフォルトのサイトタイトルと説明文が不要になりました。

      ですので、それらを非表示にしたいと思い、
      子テーマのstyle.cssとmobile.cssに以下のコードを貼りました。

      #site-title a{
      display:none;
      }
      #site-description{
      display:none;
      }

      結果、PC用では上手くいったのですが、
      スマホでは非表示になりませんでした。
      完全レスポンス設定にはしてません。

      モバイル版ではどうすれば上手くいくのでしょうか?

      以下、mobile.css(子テーマ)全文です

      @charset “UTF-8”;
      @import url(“../simplicity/mobile.css”);

      #site-title a{
      display:none !important;
      }
      #site-description{
      display:none;
      }

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

      完全レスポンシブでないなら、僕の場合mobile.cssに以下を書けばOKでした。

      #site-title {
          display: none;
      }
      
      #site-description {
          display: none;
      }

      何か別の要因があるのかもしれません。
      ただ、それは、実際のページからソースを見てみないとわからないかもしれません。
      とりあえず、デベロッパーツールでどのCSS設定が優先されているかを確認してみてください。

    • #27100
      hidekichi
      ゲスト

      子テーマだったら、メディアクエリを入れたらいけるんではないでしょうか?
      試してないんですけども(汗)

    • #27103
      dor
      ゲスト

      お二方ともありがとうございます。

      どうやらnarrow.cssが最優先されているようです。
      完全レスポンシブにはしてないのですが、
      他に何か思い当たる原因はありますでしょうか?

      メディアクエリもしてみたのですが、
      ダメでした。

    • #27105
      hidekichi
      ゲスト

      消すだけであれば、

      (function($){
        $(function(){
          var check_selecter = $("#site-title, #site-description");
          if (window.innerWidth < 440){
            check_selecter.hide();
          } else {
            if (check_selecter.is(":hidden")){
              check_selecter.show();
            }
          }
        });
      })(jQuery);

      とかはどうでしょう?
      子テーマjavascript.jsに追記します。文字化け修正されるまで fiddle でresultの幅を変えたり、いろいろ試して下さい。

      画面幅が440px以下の時は指定セレクタを非表示にする

      一応css部で、block(表示)とnone(非表示)とそれぞれに書いてありますが、画面サイズで指定されたセレクタが同時に表示されたり消えたりしているのがわかるかと思います。
      また、440を640とかにすればスマホを横向けにしてもリロードできれば対応できるはずです。
      まぁスマホの場合はリロードできないでしょうから、$(window).resize({})やらでチェックしないといけないんですけどね。

      $(window).resizeはリサイズしている間は常に値を返すので、

      var timer = null;
      
      $(window).resize(function(){
        clearTimeout( timer );
        timer = setTimeout(function(){
          //処理
        },200);
      });

      こんな感じにすれば、リサイズ後0.2秒で処理が行われるようになります。
      これ試してないけど動くだろうか…多分動くと思います(汗)

      selector を selecer とかと書いてますが気にしないように(笑)

    • #27106
      hidekichi
      ゲスト

      あぁぁぁ 誤爆の誤爆やん(笑)

      selector を selecer ☓
      selector を selecter △

      どっちにしても間違いなんですが、変数名だから何でもいいです(滝汗)

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

      narrow.cssは、モバイルと、レスポンシブ両方で使う分をまとめてあります。@importで最初で呼び出しても、適用されるように、CSSセレクタによっては、!importantしてあるものもあります。(あまり良いことではないですが当時開発する上で楽だったので)
      子テーマのCSSファイルで、!importantで指定すれば、行けると思うのですけど無理でしょうか?

    • #27132
      dor
      ゲスト

      hidekichiさん

      すみません、ど素人なのであまり難しいことは分からないです……
      できるだけ易しい手順で考えてます。

      わいひらさん
      !important指定は以下のようであってるでしょうか?
      mobile.css子テーマ全文

      @charset “UTF-8”;
      @import url(“../simplicity/mobile.css”);

      #site-title a{
      display:none !important;
      }
      #site-description{
      display:none !important;
      }

      これではできないのですが、間違ってますか?

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

      僕の環境では、#27092で書いた方法でできてます。
      なので、(URLなどを貼ってもらって)実際のページからソースを見ないとわからないと書いた次第です。

    • #27137
      dor
      ゲスト

      確かめてみた結果、
      自分のいれたプラグインが原因でした。

      お手数お掛けして申し訳ありませんでした。。

    • #27138
      hidekichi
      ゲスト

      >>dorさん

      親・子テーマのjavascript.jsに最初のスクリプトをコピペしてjavascript.jsをアップロードするだけで動作するんですけれども、これ以上簡単にする方法は僕にはわかりません(汗)
      fiddleでしか試してないと言うのもアレですし、cssよりjavascriptの方が後で読み込まれるはずなので動作するだろうと言うことぐらいしか保証はないんですが。

      前のレスのtimer使ってる奴は、必要があればと言うだけです。
      基本スマホは縦にして見るでしょうし、見てる最中、横向きにして見る時に画面幅の更新ができないことを考えてリサイズの処理が必要かも知れないと言うだけの話です。

      リサイズ対応版

      わいひらさんの手間を省くため、fiddleに前のレスのスクリプトのリサイズ対応版にアップデートしました。運営していく中でリサイズにも対応したほうが良いのであれば、この上のリンク先のjavascript(左下の部分)だけをコピペすればいけます。
      リサイズに対応する必要がない場合は、最初のレスのスクリプトだけで大丈夫です。と声高らかに言ってはみたものの実際のwordpressでは試してないという(笑)
      まぁjQueryが動いていればスクリプトは動作すると思います。

      僕の見解ですが、cssは簡単そうに見えてかなり奥が深いものです。なんせcssを専門にしてる職業もあるぐらいですから。なので実際の所、cssをイジるよりjQueryとかでサクッとやっちゃう方が速い場合もあります。

      僕がもしdorさんと同じ部分で悩んでいたとしたら、narrow.cssの該当部分を全部コメントアウトして、子テーマstyle.cssに該当部分と同じものを新規に書きます。そしたら子テーマにしか該当部分がなくなるんですから、それしか適用されませんよね。
      案外こういうのはコロンブスの卵みたいなもんなんです。

      と、言うか僕が面倒くさがりなだけかも知れませんけども、自分のサイト(国内サーバー)では最新のバージョンのSimplicityではないのですが、CSSはほぼ子テーマにしかありません。一応、万が一のため親テーマのcssファイル自体をなくしているわけではないんですが、オリジナルのcssファイルは8割方コメントアウトされています(笑)
      なので(わいひらさんにも悪いので)もうひとつ持ってるサイトはオリジナルをそのまま適用して、半ばテストサイトみたいにして使っています。

      子テーマにオリジナルのcssの各設定を移植するのは、現在scssで管理してるので結構大変でしたけどね。おかげで今現在も一部表示がおかしかったりしています。これに気がつく人がどれぐらいいるか反応を待ってるんですけど、未だに反応がない事に夜ごと枕を濡らしてます(笑)

    • #27140
      dor
      ゲスト

      hidekichiさん

      自分が無知ゆえに難易度の把握なども上手く出来ていませんでした。
      申し訳ないです。
      学習して理解できるようになるよう、ゆっくりですが努めたいと思います。

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

    • #27141
      dor
      ゲスト

      そういえば、narrow.css自体を見つけられなかったのですが、
      どこかにあるのでしょうか?

      テーマ編集で見当たらないのですが……。

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

      narrow.cssは、テーマフォルダ内の「css」フォルダ内にありますよ。

    • #27146
      dor
      ゲスト

      ファイルは存在しているけど、
      ワードプレスのテーマ編集ではいじれないってことですかね?

      分かりました。
      ありがとうございました。

14件の返信スレッドを表示中
  • フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)