Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › パソコンとモバイルで使用する時のスタイルを変更したい
- このトピックには5件の返信、2人の参加者があり、最後に
さやにより11年、 4ヶ月前に更新されました。
-
投稿者投稿
-
-
2015年2月24日 6:24 PM #21714
さや
ゲストわいひらさん、いつもありがとうございます。
パソコンとモバイルで使用する時のスタイルを変更したい場合は、どこに記述すればよろしいのでしょうか?
mobile.cssでいいのでしょうか?よろしくお願いします。
-
2015年2月24日 8:09 PM #21718
わいひらキーマスターパソコンと、モバイル両方で適用されて良いものならば、style.cssでいいのではないかと思います。
-
2015年2月24日 10:33 PM #21732
さや
ゲストすみません、パソコンとモバイルのスタイルを変えたいので
その時は、どこで切り分けたらいいのでしょうか? -
2015年2月24日 11:49 PM #21742
hidekichi
ゲスト子テーマを利用されているようであれば、子テーマにCSSを書けばそれが優先的に適用されるかと思います。
例えば、このトピックのタイトル部分は、
<h1 class=”entry-title”>モバイルで</h1>このように書かれています。親テーマのstyle.css内で、色んな所に.entry-titleは書かれていますが、子テーマに
.entry-title { font-size:10px; color: #F00; border-bottom: 1px solid #F00; }と言う具合に書けば子テーマの「文字サイズ10pxで赤色、文字下に1pxの赤線が付けられたタイトル」が表示されるようになるかと思います。
同様に、モバイルと通常表示は画面幅のサイズがどれぐらいかというので条件分岐しており、CSSで言うとMedia Queriesの部分をいじれば良いわけですが、Simplicityの場合、それぞれのCSSを用途ごとに分離してあるので、子テーマを利用されている場合は、例えばcss/narrow.cssを参考に子テーマに必要な部分のCSSをコピペしてカスタマイズしていけばよいのではないかと思います。
メディアクエリとは、
@media screen and (max-width:639px){ /*画面幅が639px以下の時*/ img{ margin-left:0 !important; margin-right:0 !important; } }このようなもので、画面幅が639px以下の端末の時、画像(img)の左右マージンは0ですよと言う感じです。639px以下の画面の時のスタイルはこのメディアクエリの{}の中に記載していけば良いことになります。PC含む639px以上の時の設定は上記リンクを参考に、セレクタを調べてそのセレクタを子テーマに記述していけばよいのですが、子テーマを適用されていない場合は親テーマを直接カスタマイズすることになります。
親テーマは頻繁にアップデートされる場合があるため、直接編集するのは案外面倒な事になるかと思います。カスタマイズしたい場合は子テーマを有効利用されると良いと思います。
Simplicityのバージョンが上がった時は、何がどう変わったかをよく調べて必要に応じて子テーマのCSSの内容を新しいバージョンに合わせていくという感じになるかと思います。その内にわいひらさんがカスタマイズのやり方を記事にしてくれると思いますが、いつになるかは定かではありません(笑)また過去の質問などでも同じようなものがあるかも知れないので探すのもまたひとつの手段かと思います。
-
2015年2月25日 12:12 AM #21746
-
2015年2月25日 8:34 AM #21782
さや
ゲストhidekichiさん、わいひらさん、ありがとうございます。
早速、挑戦してみまます。
-
-
投稿者投稿
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。