Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › モバイルのサイトタイトル非表示
- このトピックには14件の返信、2人の参加者があり、最後に
dorにより11年、 5ヶ月前に更新されました。
-
投稿者投稿
-
-
2015年5月27日 2:26 AM #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;
} -
2015年5月27日 2:55 AM #27092
わいひらキーマスター完全レスポンシブでないなら、僕の場合mobile.cssに以下を書けばOKでした。
#site-title { display: none; } #site-description { display: none; }何か別の要因があるのかもしれません。
ただ、それは、実際のページからソースを見てみないとわからないかもしれません。
とりあえず、デベロッパーツールでどのCSS設定が優先されているかを確認してみてください。 -
2015年5月27日 11:55 AM #27100
hidekichi
ゲスト子テーマだったら、メディアクエリを入れたらいけるんではないでしょうか?
試してないんですけども(汗) -
2015年5月27日 2:06 PM #27103
dor
ゲストお二方ともありがとうございます。
どうやらnarrow.cssが最優先されているようです。
完全レスポンシブにはしてないのですが、
他に何か思い当たる原因はありますでしょうか?メディアクエリもしてみたのですが、
ダメでした。 -
2015年5月27日 3:11 PM #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の幅を変えたり、いろいろ試して下さい。一応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 とかと書いてますが気にしないように(笑)
-
2015年5月27日 3:13 PM #27106
hidekichi
ゲストあぁぁぁ 誤爆の誤爆やん(笑)
selector を selecer ☓
selector を selecter △どっちにしても間違いなんですが、変数名だから何でもいいです(滝汗)
-
2015年5月27日 5:06 PM #27129
わいひらキーマスターnarrow.cssは、モバイルと、レスポンシブ両方で使う分をまとめてあります。@importで最初で呼び出しても、適用されるように、CSSセレクタによっては、!importantしてあるものもあります。(あまり良いことではないですが当時開発する上で楽だったので)
子テーマのCSSファイルで、!importantで指定すれば、行けると思うのですけど無理でしょうか? -
2015年5月27日 6:52 PM #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;
}これではできないのですが、間違ってますか?
-
2015年5月27日 8:11 PM #27133
-
2015年5月27日 9:29 PM #27137
dor
ゲスト確かめてみた結果、
自分のいれたプラグインが原因でした。お手数お掛けして申し訳ありませんでした。。
-
2015年5月27日 10:01 PM #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で管理してるので結構大変でしたけどね。おかげで今現在も一部表示がおかしかったりしています。これに気がつく人がどれぐらいいるか反応を待ってるんですけど、未だに反応がない事に夜ごと枕を濡らしてます(笑)
-
2015年5月27日 10:12 PM #27140
dor
ゲストhidekichiさん
自分が無知ゆえに難易度の把握なども上手く出来ていませんでした。
申し訳ないです。
学習して理解できるようになるよう、ゆっくりですが努めたいと思います。ありがとうございました。
-
2015年5月27日 10:14 PM #27141
dor
ゲストそういえば、narrow.css自体を見つけられなかったのですが、
どこかにあるのでしょうか?テーマ編集で見当たらないのですが……。
-
2015年5月27日 11:26 PM #27145
わいひらキーマスターnarrow.cssは、テーマフォルダ内の「css」フォルダ内にありますよ。
-
2015年5月27日 11:28 PM #27146
dor
ゲストファイルは存在しているけど、
ワードプレスのテーマ編集ではいじれないってことですかね?分かりました。
ありがとうございました。
-
-
投稿者投稿
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。