モバイルのブログカード左サムネイルの抜粋位置

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › モバイルのブログカード左サムネイルの抜粋位置

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

      お世話になっております。

      モバイルでのブログカード
      左サムネイル時の抜粋位置が
      サムネイルとベタ付きになるのが気になっています。

      ※PCはベタ付いていません。

      お手数ですが、どこを直せばよいかご教授いただけると幸いです。

      よろしくお願いいたします。

    • #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で上書きするのが正しい書き方です。といらん事まで、一応解説しておきます。

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

      ベタ付き(margin0状態)、こちらのローカル環境でも確認しました。
      手元のファイルは修正したので、次のバージョンで改善されると思います。
      修正方法は、ちょっと説明が大変なので、次のバージョンをまっていただけると幸いです。

    • #30178
      nok
      ゲスト

      Hidekichiさま、わいひらさま

      ご教授ありがとうございます。
      Hidekichiさまに教えていただいたコードが上手く反映されなかったので、
      素直に次バージョンを待ちたいと思います。
      ありがとうございました。
      よろしくお願いいたします!

    • #30181
      Hidekichi
      ゲスト

      コードがうまく反映されなかったというのを受けて試してみましたが、子テーマではダメでした。
      というのは、いつからあるのか忘れましたが、子テーマの中にmobile.cssってのがありまして、そこに入れたらローカルでは反映しました。
      うちの環境は基本的にレスポンシブ・モバイル系は全てオフにして子テーマですべてを担っているのでうっかりしていた部分でした。

      とは言うものの、次期バージョンで修正されるというので、それを待つのが良いかと思います。

      念の為の画像

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