Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › モバイルのブログカード左サムネイルの抜粋位置
- このトピックには4件の返信、2人の参加者があり、最後に
Hidekichiにより11年、 2ヶ月前に更新されました。
-
投稿者投稿
-
-
2015年7月30日 2:32 PM #30127
nok
ゲストお世話になっております。
モバイルでのブログカード
左サムネイル時の抜粋位置が
サムネイルとベタ付きになるのが気になっています。※PCはベタ付いていません。
お手数ですが、どこを直せばよいかご教授いただけると幸いです。
よろしくお願いいたします。
-
2015年7月30日 3:53 PM #30138
Hidekichi
ゲスト>左サムネイル時の抜粋位置が
>サムネイルとベタ付きになるのが気になっています。抜粋の部分だけなら、
@media screen and(max-width: 440px){ .entry-snippet{ margin: 10px 0 10px; /* あるいは、 margin: 1rem 0 1rem; */ } }もし日付などが入ってる.post-metaの部分も間隔を開けたいと思った場合は、.post-metaではなくサムネイルの方のボトムを設定すればイケると思います。
@media screen and (max-width: 440px){ .entry-card .entry-thumb { /*margin-top: 5px; これは元々入ってるマージン設定*/ margin: 5px 5px 16px 0; } }どちらも子テーマstyle.cssに追記でイケるんじゃなかろうかと。で、両方共適用したい場合はまとめられます。
@media screen and(max-width: 440px){ .entry-snippet{ margin: 10px 0 10px; /* あるいは、 margin: 1rem 0 1rem; */ } .entry-card .entry-thumb { /*margin-top: 5px; これは元々入ってるマージン設定*/ margin: 5px 5px 16px 0; } }こんな感じです。marginの部分は、上、右、下、左と時計回りで各マージンを設定します。
margin: 5px 5px 16px 0;なら、上と右は5px開けて、下に16px分のマージン(余白)を取ります。margin: 1rem 0 1rem;の1remは、htmlに設定してあるフォントサイズ(設定してない場合は16px)で相対的なサイズ(2rem = 16px * 2 = 32px相当)で表します。カスタマイザーでフォントサイズを15pxとか14pxにしてある場合は1remはそのサイズです。
remはhtmlに対してですが、emの場合はその要素の親との関係で相対サイズを出します。
pxは絶対サイズです。別にそれでも良いのですが、基本となる部分の相対サイズで指定した方がサイズが正確に出せるのでrem推奨です。もし正しく書きたいのであれば、
margin: 16px;
margin: 1rem;と言うように、remがわからない古いブラウザのために、pxをremで上書きするのが正しい書き方です。といらん事まで、一応解説しておきます。
-
2015年7月30日 7:58 PM #30159
わいひらキーマスターベタ付き(margin0状態)、こちらのローカル環境でも確認しました。
手元のファイルは修正したので、次のバージョンで改善されると思います。
修正方法は、ちょっと説明が大変なので、次のバージョンをまっていただけると幸いです。 -
2015年7月31日 9:03 AM #30178
nok
ゲストHidekichiさま、わいひらさま
ご教授ありがとうございます。
Hidekichiさまに教えていただいたコードが上手く反映されなかったので、
素直に次バージョンを待ちたいと思います。
ありがとうございました。
よろしくお願いいたします! -
2015年7月31日 11:08 AM #30181
Hidekichi
ゲストコードがうまく反映されなかったというのを受けて試してみましたが、子テーマではダメでした。
というのは、いつからあるのか忘れましたが、子テーマの中にmobile.cssってのがありまして、そこに入れたらローカルでは反映しました。
うちの環境は基本的にレスポンシブ・モバイル系は全てオフにして子テーマですべてを担っているのでうっかりしていた部分でした。とは言うものの、次期バージョンで修正されるというので、それを待つのが良いかと思います。
念の為の画像

-
-
投稿者投稿
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。