simplicity2　トップページ最新一覧タイル3列の画像をスクエアに、その他

PR 2017/8/28

このトピックには8件の返信、2人の参加者があり、最後にnokiにより9年前に更新されました。

8件の返信スレッドを表示中

投稿者

投稿
- 2017年8月24日 2:25 AM #55251
  
  noki
  ゲスト
  
  初めまして、自分でいろいろ試してみましたが解決せずにお尋ねします。
  やりたいことは、
  １.トップページで最新記事をタイル３列で使用中ですが、通常のエントリーカードの画像のように正四角形にしたい。投稿記事の最初の画像を自動でサムネイル取得する仕様で使っています。
  ２.３列のタテが記事量により伸びないように、一定のブロックで揃うようにしたい
  
  いろいろ少しずつカスタマイズはしておりますが、素人に近いためあまり難しいとこなせないかもしれませんが、ご教示いただきたくお願いします。
- 2017年8月24日 9:33 AM #55253
  
  かうたっく
  ゲスト
  
  投稿記事の最初の画像を自動でサムネイル取得する仕様
  
  その設定はどこで設定しているか？何かあった気もします・・・。またデフォルトだったようにも思ったり？
  と言う事でよく見てみたけどわかりません。
  
  通常のエントリーカードの画像のように正四角形にしたい。
  
  ２.３列のタテが記事量により伸びないように、一定のブロックで揃うようにしたい
  
  こちらは、たぶんTOPページのCSSを土台の部分から変えないと実現しないと思います。例えばfloatを使っているけど、table-cellに変更してメディアクエリで表示を切り替えるなどの対応…。（トップページのリストのスタイルをほとんど変更・親テーマのスタイルを初期値に戻して作り直しするイメージ。）
  
  ※style変更だけでいけると思うのでクラウドワークスなどでは、喜んでやってもらえるような簡単なレベルではあると思います
  
  ただ私の見逃しもありそうなので、もっと簡単にできる方法がないか
  他の人や、わいひらさんの復活を待ってお話を聞いてみてくださいねっ❦
- 2017年8月24日 10:35 AM #55254
  
  noki
  ゲスト
  
  かうたっく　さん
  早速ありがとうございます。
  
  画像を自動でサムネイル取得はできています。ありがとうござます。
  2の件に関しては、お話によると結構難しいのですね。
  あまり難しいと私では困難かもしれませんが、引き続き模索してみます。
- 2017年8月25日 11:51 AM #55307
  わいひら
  キーマスター
  1.functions.phpに正方形となる処理を書いて
  add_image_size('thumb300', 300, 300, true);
  
  entry-card.phpを以下のように書き換えた方が早いかも。
```
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき
        //サムネイル画像の縦横比を保存するかどうかで取得するサムネイルを変化
        $thumb = 'thumb300' ?>
        <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: // サムネイルを持っていないとき ?>
        <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" class="entry-thumnail no-image list-no-image" /></a>
      <?php endif; ?>
```
  ただ、動作確認はしていないので、正常動作は保証できないです。
  テンプレートファイルをカスタマイズする場合は、サポート対象外のものにもあるようにあくまでヒントのみになるので、ある程度PHP編集ができることが前提になります。
- 2017年8月25日 11:57 AM #55308
  わいひら
  キーマスター
  2.タイルの高さを揃えるのであれば、style.cssに以下のように書けばいけるかと思います。
```
#main .entry{
  height: 300px;
  overflow: hidden;
}
```
  高さは好みに合わせて調節してください。
  ※メディアクエリーかモバイル用のCSS（mobile.css）を用いて、モバイル環境用のCSSも書く必要があるかも。
- 2017年8月25日 4:48 PM #55333
  
  noki
  ゲスト
  
  わいひら　さん
  詳しくご教示いただきありがとうございました。
  
  以前幾度かfunction.phpを触って真っ白になり慌てましたが、ご教示いただいた通り記述でき、entry-card.phpの変更箇所も分かったので差し替えてみました。
  
  残念ながら反映しませんでした。
  私のやり方に不備があるのかもしれませんね。
  
  勉強しながら、模索続けます。
  お忙しいところ本当にありがとうございました。
- 2017年8月26日 12:36 PM #55355
  かうたっく
  ゲスト
  こんにちは！CSSだけで（ザックリ）対応してみました。（穴はある）
  
  パッと見で、画像を正方形という部分では対応させてますｗｗ
```
#main .entry {
	position: static !important;
	width: 214px;
	height: 400px;
	margin: 10px 5px 0 5px;
	border: 1px solid #ddd;
	border-radius: 5px;
	/* float: none; */
	/* clear: none; */
	overflow: hidden;
}
.entry-thumb {
	float: none;
	margin-right: 0;
	margin-top: 0;
	margin-left: 0;
}
#list .entry .entry-thumb img {
	float: none;
	margin: 0;
	width: 220px;
	height: 220px;
	margin-bottom: 10px;
}
.entry-card-content {
	margin-left: 0;
	clear: none;
	overflow: hidden;
}
@media screen and (max-width: 715px) {
	#main .entry {
		height: 430px;
	}	
	#list .entry .entry-thumb img {
		display: inline;
		text-align: center;
		width: calc(45vmin);
		height: calc(45vmin);
	}
}
@media screen and (max-width: 359px) {
	#main .entry {
		height: auto;
	}	
	#list .entry .entry-thumb img {
		display: inline;
		text-align: center;
		width: calc(90vmin);
		height: calc(90vmin);
	}
}
```
  どこがどのように表示させているか、ガッツリ調べたらもっとキレイな表示になると思います。お勉強がてらどのような表示になるかを確認する程度でお使いください＾＾；
  
  （良かったら）ローカルなど…どこかで・・・。。反映しないときはキャッシュを削除してくださいね❦
- 2017年8月26日 12:50 PM #55356
  
  かうたっく
  ゲスト
  
  http://netakiri.net/uploader/src/up0310.gif
  上記CSSのgif画像
- 2017年8月28日 1:04 PM #55409
  
  noki
  ゲスト
  
  かうたっく　さん
  
  引き続き恐縮です。
  CSS書き込んでみました。
  正方形になりました!(^^)!　まさにこういう感じです。
  
  横長画像使用してましてタテに伸びていますので、なんとかいろいろ勉強修正中です(^-^;
  本当にありがとうございます。
投稿者

投稿