タイル2列や3列に設定した際のトリミング画像の表示についてのご質問

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など タイル2列や3列に設定した際のトリミング画像の表示についてのご質問

  • このトピックには14件の返信、2人の参加者があり、最後にぶるごろにより9年前に更新されました。
14件の返信スレッドを表示中
  • 投稿者
    投稿
    • #55622
      ぶるごろ
      ゲスト

      お世話になります。

      ネット上でいろいろ調べましたが、分からなかったため、ご質問させていただきます。
      デフォルトのケースではトリミングした画像をアイキャッチ画像として使い、上手く表示出来ていたのですが、タイル2列や3列に設定した際にアイキャッチ画像がデフォルトの時に比べ、大分ずれて表示されてしまっております。

      上記を解決する方法はありますでしょうか?

    • #55623
      かうたっく
      ゲスト

      デフォルトのケースではトリミングした画像をアイキャッチ画像として使い、上手く表示出来ていたのですが、タイル2列や3列に設定した際にアイキャッチ画像がデフォルトの時に比べ、大分ずれて表示

      どのような表示になってお困りなのかがよく分かりません…。キャッシュの削除なども試されると良い?かも知れません??

      • もしかしたら、プラグインで修正できるかもしれない。

      テーマの変更などで、画像がゆがんで見えたりしたとき、下記のプラグインで修正できたので便利でした。※状況がまったく違っていれば、関係ありませんが。

      https://ja.wordpress.org/plugins/regenerate-thumbnails/

      • またはstyle的にずれてしまったのか。その他……なのか???

      現状がよくわかりません。

      ※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

      スタイルなどの場合でもですが、実際のソースを見ないと何とも言えません

    • #55629
      ぶるごろ
      ゲスト

      ご返信ありがとうございます。
      症状は下記画像となります。
      https://www.fastpic.jp/images.php?file=4391805053.jpg

      .entry-card-content h2{
      height:72px;
      }
      上記でタイトルの高さを設定することはできたのですが、どうしても画像のサイズを揃えることが出来ないです。
      これはキャプチャーを取るソフトで一括でサイズを合わせないといけないのでしょうか?

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

      「レイアウト(全体・リスト)」の「一覧リストのスタイル」は、何にしてそのような表示になっているのでしょうか?
      現在の設定状態を教えていただければと思います。

      あとできれば、不具合状態を見るのに実際のページのURLを提示していただいてんソースコードを見たいところではあります。

    • #55652
      女装子
      ゲスト

      横からで失礼致します。
      とても良いテーマを使わせて頂き、ありがとうございます。

      私も多分ご質問者様と同じ状態だと思いますので、情報を記載させていただきます。

      「レイアウト(全体・リスト)」の「一覧リストのスタイル」はタイル2列を使っています。

      ページのURL
      https://jidori-kotsu.com/

      他サイトの情報となってしまいますが、少し前にわいひら様がリツイートしていた、アオイ様のミズタマブログのトップページも同じようなズレがあったと思います。

      お時間がある時にお調べ頂けると嬉しいです。

    • #55653
      ぶるごろ
      ゲスト

      わいひら様
      女装子様が投稿されている症状と全く同じでタイル2列に設定した際にこのような症状が起こります。
      画像修正ソフト等で画像サイズを均一にしてアップロードしていく方法が一番良いのですかね?

    • #55658
      かうたっく
      ゲスト

      Simplicity2フォルダ内にある entry-card.phpをFTPソフトでダウンロード

      子テーマ内にアップロードしてください。

      (/domain.com/public_html/)wp-content/themes/simplicity2-child

      子テーマに導入されたentry-card.phpを一部編集します。

          <?php else: //大きなサムネイルカードの場合?>
            <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき
              //サムネイル画像の縦横比を保存するかどうかで取得するサムネイルを変化
              $thumb = ( is_list_style_tile_thumb_cards_raw() ? 'thumb320_raw' : 'thumb320') ?>
              <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail($thumb , array('class' => 'entry-thumnail', 'alt' => '') ); ?></a>
          <?php else: //大きなサムネイルカードの場合?>
            <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき
              //サムネイル画像の縦横比を保存するかどうかで取得するサムネイルを変化
              //$thumb = ( is_list_style_tile_thumb_cards_raw() ? 'thumb320_raw' : 'thumb320') ?>
              <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail(thumb320 , array('class' => 'entry-thumnail', 'alt' => '') ); ?></a>

      thumb320:画像を320×180pxに。

      子テーマstyle.cssに下記を追加

      .entry-card-content h2,
      .entry-snippet{
      	height: 2.6em;
      	overflow: hidden;
      }

      上記で提示されたリンクに合わせたCSSです。もしかしたら別のコードも居るかも知れませんが。試してください。

    • #55665
      かうたっく
      ゲスト

      子テーマに導入されたentry-card.phpを一部編集します。

      画像サイズを合わせるだけでしたら、上記PHPコードでいけます。

      • カスタマイズが不要になれば、子テーマにアップロードしたPHPファイルを、FTPソフトで削除すれば親テーマのPHPが表示されるので元通りになる。

      ローカルで試してみました。完ぺきではないですが、CSSは下記。

      @media screen and (min-width: 360px) {
      	#main .entry {
      		position: static !important;
      	}
      
      	.entry-card-content h2,
      	.entry-snippet,
      	.entry .post-meta {
      		height: 2.6em;
      		overflow: hidden;
      	}
      
      	.entry-card-content h2 {
      		height: 2.1em;
      	}
      
      	.entry .post-meta {
      		height: 1.3em;
      		overflow: hidden;
      	}
      }

      ローカルでスタイルをあてて試したら、きれいに表示されますが、ページネーションに不具合が出ます。

      http://netakiri.net/uploader/src/up0319.png

      position: staticが問題っぽいけどこれがないと表示が崩れる。Floatの解除も全て出来ているのになぜかこうなる^^;

      また表示数を10個にしたら、もしかしたら対応できる反面、2記事投稿に1回は最後は必ず奇数になる。トップ記事を10個にする方法はまだ特定できてない。※ブラウザ上で試したのみ。

      奇数を無視し、投稿表示数を偶数にすれば、下記のコードで反映できると思われる。

      @media screen and (min-width: 360px) {
      	.pagination {
      		margin-top: ***;
      	}
      }

      ***の値は、様子を見ると幅が開きすぎていたので、マイナスで指定。※実際のものを見ないと不明。

      さらに現状のCSSでは、700pxから710数pxでは左1列になります。※必要な場合、2列を保つスタイルを追加:私はチェックしてません。

      ※700~710強の横幅のデバイスからアクセスが多いか、アナリティクスでチェックするなど

      • 他に良い方法を探す
      • 別のアイデアでの投稿を待ってみる
      • クラウドワークスに1から依頼する

      などオススメします。ですが、良い方法が見つかると良いですね^^

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

      「レイアウト(全体・リスト)」の「一覧リストのスタイル」はタイル2列を使っています。

      大事なことなので一応、確認させてください。
      「タイル2列」で間違いないでしょうか?「タイル2列 画像縦横比保存(要再生成)」になっているということはないですか?

    • #55678
      かうたっく
      ゲスト

      午前中、確認した時ですが、タイル2列・タイル2列 画像縦横比保存(要再生成)でも同じ表示・画像の比率保存になって、キャッシュを何度も切ったり、PC再起動しても、親テーマで試したりしても画像表示が変わらなかったんで、おかしいな!?と思ってました。

      原因不明ですけど。今、再度キャッシュを削除して確認したら、タイル2列の画像はそろってますね。一時期のPCエラーかもしれない、としておきます…?! 他の方がタイル2列で画像表示が同一でキレイでしたら問題ありません。

      PHPのくだりはなくて平気で、他はその通りです。

      それから、どちらの設定でしたか?

    • #55681
      女装子
      ゲスト

      わいひら様
      念のため再度確認いたしましたが「タイル2列 画像縦横比保存(要再生成)」ではなく、「タイル2列」でした。

      かうたっく様
      とても丁寧に教えて頂き、まことにありがとうございます。
      ド素人の私は一つ一つお勉強しながらじゃないとできなそうなので、時間をかけて試してみます。
      (私はそこまで急いでいるわけではなく、一覧リストのスタイルもどれにしようか迷っているくらいなので^^;)

    • #55694
      アバター画像わいひら
      キーマスター
    • #55702
      女装子
      ゲスト

      わいひら様
      そちらのページにある通り、Regenerate Thumbnailsでサムネイルの再生成を行ったら、画像の大きさが揃いました!
      私は元の質問者様ではありませんが、ありがとうございました^^

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

      うまくいったようでよかったです^^

    • #55741
      ぶるごろ
      ゲスト

      わいひら様
      かうたっく様

      返信遅くなり、申し訳ありません。
      私も無事解決致しました!

      ありがとうございました。

14件の返信スレッドを表示中
  • トピック「タイル2列や3列に設定した際のトリミング画像の表示についてのご質問」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)