スマホ版のメインページデザインを、左にサムネイルで右側にタイトルとカテゴリみたいにしたい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など スマホ版のメインページデザインを、左にサムネイルで右側にタイトルとカテゴリみたいにしたい

14件の返信スレッドを表示中
  • 投稿者
    投稿
    • #1904 返信
      りんご
      ゲスト

      いつもありがとうございます。
      スマホ版のメインページデザインを、左にサムネイルで右側にタイトルとカテゴリみたいにしたいです。
      ちょうどPC版のメインページから抜粋をなくした感じです。
      CSSをいじってみましたがうまくいきません。どうやったらいいでしょうか?

    • #1919 返信
      アバター画像わいひら
      キーマスター

      mobile.cssにこのように書けばOKではないかと思います。

      .entry .entry-thumb, .related-entry-thumb {
          float: left !important;
          margin: 10px !important;
      }

      !importantを使いたくない場合は、書き込む位置や、CSSセレクタを工夫してみる必要があります。

    • #1923 返信
      とくさん
      ゲスト

      こちらを参考に修正したみたのですが、ウィジェット部分(人気記事など)をモバイルでみた場合に表示される形式(画像+タイトルなど)ですっきり表示するにはどうすればよいでしょうか?

    • #1932 返信
      アバター画像わいひら
      キーマスター

      ウィジェット部分(人気記事など)をモバイルでみた場合に表示される形式(画像+タイトルなど)ですっきり表示するにはどうすればよいでしょうか?

      すっきり表示するという説明だけでは、ざっくりとしすぎていてどのように表示していいのかわからないです。
      もう少し具体的にお願いします。

    • #1955 返信
      とくさん
      ゲスト

      例えば
      http://logcamera.com/
      のサイトをモバイルで表示したときに、画像の横にタイトルが表示されているようなイメージです。
      伝わるでしょうか?

    • #1957 返信
      りんご
      ゲスト

      ありがとうございます。
      サムネイルのサイズの変え方と抜粋非表示はどうやればいいですか?

      あと、モバイルだけのデザインを変えるのがうまくいきません。style.cssから何をコピーして使ったらいいのでしょうか。基本的なことでごめんなさい。これがわかれば質問も減ると思うので。

    • #1961 返信
      アバター画像わいひら
      キーマスター

      >とくさん
      Simplicity人気・新着ウイジェット使用時は、デフォルトのモバイル表示で、以下のように画像横にタイトルが来ますけど、こういったイメージとはまた違うのでしょうか?
      Simplicity人気・新着ウイジェット

    • #1963 返信
      アバター画像わいひら
      キーマスター

      >りんごさん
      サムネイルのサイズを変更するには以下のようにします。

      .entry-thumb img{
      	width: 200px;
      	height: 200px;
      }

      抜粋表示は以下のようにすればいいかと思います。

      .entry .entry-snippet{
      	display: block;
      }

      変更がうまくいかない場合は、CSSセレクタを足すか!importantを足してください。

      あと、モバイルだけのデザインを変えるのがうまくいきません。style.cssから何をコピーして使ったらいいのでしょうか。

      この質問だけでは、変更対象がわからないので、何をしたいかがわからないです。
      モバイルだけの何のデザインを変更したいのでしょうか?

      • #1973 返信
        りんご
        ゲスト

        ありがとうございます。

        mobile.cssに下記のように書きましたが画像が左に寄っただけで、大きさと抜粋非表示はできませんでした・・

        .entry .entry-thumb, .related-entry-thumb {
            float: left !important;
            margin: 10px !important;
        }
        
        .entry-thumb img{
        	width: 60px; !important
        	height: 60px; !important
        }
        
        .entry .entry-snippet{
        	display: block; !important
        }

        後半ですが、PCとスマホでデザインを変更したいときの方法です。これまでwptouchを使っていたので、レスポンシブのカスタマイズがよくわかりません。スマホデザインだけをカスタムする場合はどうしたらいいですか?

    • #1975 返信
      アバター画像わいひら
      キーマスター

      !importantの場所がおかしいです。
      修正してもう一度試してみてください。

      後半ですが、PCとスマホでデザインを変更したいときの方法です。これまでwptouchを使っていたので、レスポンシブのカスタマイズがよくわかりません。スマホデザインだけをカスタムする場合はどうしたらいいですか?

      スマホだけのデザインを変更したいときは、mobile.cssに記入すればOKです。

      サイズによって変更するには以下のように書く必要があります。

      /************************************
      ** 解像度639px以下のスタイル
      ************************************/
      @media screen and (max-width:639px){
        ...
      }
      • #2002 返信
        りんご
        ゲスト

        ありがとうございます。

        出来てきました!記事一覧のh2タイトルのフォントサイズを16pxのようい小さくすると行間がえらく空いてしまいます。line-heightしてみたけどできませんでした。行間の調整はどうしたらいいですか?

      • #2004 返信
        りんご
        ゲスト

        すいません。追加でもう一点。

        画像回り込みのテキストで上部に表示する方法も教えてください。

      • #2033 返信
        アバター画像わいひら
        キーマスター

        話題がタイトルのフォントサイズのことになっているので
        よろしければ新しくトピックを立てていただけると幸いです。

        画像回り込みのテキストで上部に表示する方法も教えてください。

        あともう少し具体的に書いていただけると助かります。

    • #1976 返信
      とくさん
      ゲスト

      >とくさん
      Simplicity人気・新着ウイジェット使用時は、デフォルトのモバイル表示で、以下のように画像横にタイトルが来ますけど、こういったイメージとはまた違うのでしょうか?

      まさにこの表示のイメージでした!

    • #1978 返信
      アバター画像わいひら
      キーマスター

      デフォルトでその状態なので、特に変更する必要はないと思うんですが、とくさんのサイトは何か違った表示なんでしょうか。

    • #1996 返信
      とくさん
      ゲスト

      すみません。ウィジェットをそのように表示するのではなくて、モバイル版の記事一覧をそのような表示に変更するにはどうすればよいでしょうか?という質問になります。

    • #1998 返信
      アバター画像わいひら
      キーマスター

      つまりはつまりはモバイル版の記事一覧でこのように表示するということでしょうか?

    • #2030 返信
      とくさん
      ゲスト

      キャプチャーまでしていただきありがとうございます!
      はい。まさにその通りに表示できれば1ページが長くならずによいかなと個人的には思っておりました。

    • #2032 返信
      アバター画像わいひら
      キーマスター

      それだったらこんな感じでいけるのではないかと思います。
      (※動作確認はしていません。)

      .entry .entry-thumb, .related-entry-thumb {
          float: left !important;
          margin: 10px !important;
      }
      
      .entry .post-meta,
      .entry .entry-snippet,
      .entry .entry-read{
        display:none !important;
      }
14件の返信スレッドを表示中
返信先: スマホ版のメインページデザインを、左にサムネイルで右側にタイトルとカテゴリみたいにしたい
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)