トップページの最新記事の表示を「サムネイル画像/タイトル/日付」に設定したときのサムネイル画像を小さくしたい

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

14件の投稿を表示中 - 1 - 14件目 (全14件中)

投稿者

投稿
2019年4月2日 12:56 AM #15609
yunahana
参加者
いつもお世話になっております。

Charmを使っていますが、トップページにウィジットを使って最新記事を表示させておりますが、サムネイル画像が大きくて困っています。
Charmでは、サムネイルを大きく表示できギャラリーのようにみせる仕様になっていますが、通常の最新記事を表示させたいと思っています。
「日付/カテゴリー/タイトル」に設定すると、日付とタイトルのみの寂しいコーナーになってしまいます。
CSSカスタマイズで、下記の様に記述してみませたが反映されませんでした‥
```
.veu_postList .postList_miniThumb .postList_thumbnail img {
    width: 80px;
    height: auto;
}
```
Charmでも、通常の最新記事の様にサムネイル画像を小さく表示させる方法を、ご教授お願いいたします。
よろしくお願いいたします。
2019年4月2日 8:09 AM #15616
DRILL LANCER
モデレーター
VK最新記事ウィジェットのお話でしょうか？
下記コードを適用してみてはいかがでしょうか？
```
.veu_postList .postList_miniThumb .postList_thumbnail {
　　　　width: 80px;
　　　　height: auto;
}
```
あと、適用後にサーバー＆ブラウザのキャッシュの削除を忘れずに。
- この返信は5年、 8ヶ月前にDRILL LANCERが編集しました。
- この返信は5年、 8ヶ月前にDRILL LANCERが編集しました。
- この返信は5年、 8ヶ月前にDRILL LANCERが編集しました。
2019年4月2日 10:29 AM #15621

yunahana
参加者

RICK 様

ご教授ありがとうございます！
外出していますので、夕方帰りましたら作業してみます！
またご報告させていただきます。

2019年4月2日 6:37 PM #15633
yunahana
参加者
RICK 様

朝早くからのご教授、本当にありがとうございました！
下記を試してみましたが代わりありませんでした‥
キャッシュも試しました。シークレットウィンドーでも試しましたが、変化無しでした。
```
.veu_postList .postList_miniThumb .postList_thumbnail {
　　　　width: 80px;
　　　　height: auto;
}
```
下記のコードを試してみると、URLの画像の様に小さくなるのですが、バランスが悪くなります。セクションの設定などが必要でしょうか‥
```
.mainSection .veu_postList.pt_0 .postList_thumbnail a img {
    width: 100%;
}
```
■サンプル画像
https://www.dropbox.com/s/3ewzbgp1yza18oj/Sample2.png?dl=0
2019年4月2日 7:32 PM #15634
DRILL LANCER
モデレーター
```
.mainSection .veu_postList .postList_miniThumb .postList_thumbnail {
　　　　width: 80px;
　　　　height: auto;
}
```
を試してみてください。

imgタグにはテンプレートの方でmax-width:100%が設定されているので、
画像の幅は「そのすぐ外側の枠の幅」か「画像の最大幅」の小さい方が適用されます。

ちなみに、私は子テーマに
```
.subSection .veu_postList .postList_miniThumb .postList_item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	padding: 10px;
	vertical-align: middle;
	-webkit-box-align: center;
	-ms-flex-align: center;
}

.subSection .veu_postList .postList_miniThumb .postList_thumbnail {
	float: none;
	width: 60px;
	padding: 0;
	margin-right: 10px;
	margin-bottom: 0;
}
```
を記述することで、下記のようなデザインを実現しています。
- この返信は5年、 8ヶ月前にDRILL LANCERが編集しました。
2019年4月2日 9:58 PM #15636
yunahana
参加者
RICK 様

何度もお手数をおかけしております。
```
.mainSection .veu_postList .postList_miniThumb .postList_thumbnail {
　　　　width: 80px;
　　　　height: auto;
}
```
を、ExUnitのCSSカスタマイズに記述して試しましたが、何も変わりなく下記の様に大きい画像のままなんです‥
https://www.dropbox.com/s/n9muurctnoslwwa/sample3.jpg?dl=0
- この返信は5年、 8ヶ月前にyunahanaが編集しました。
2019年4月2日 10:23 PM #15638
DRILL LANCER
モデレーター
うーむ、なんかデザインが標準のものと違っているのでカスタマイズされていますか？
それともこれがCharmの標準なのでしょうか？
ただ、これまでのやりとりで
```
.mainSection .veu_postList.pt_0 .postList_thumbnail a {
　　　　width: 80px;
　　　　height: auto;
}
```
か
```
.mainSection .veu_postList.pt_0 .postList_thumbnail {
　　　　width: 80px;
　　　　height: auto;
}
```
のどちらかで解決しそうな感じがします。

もしこれで解決できなければ、サイトのURLを貼っていただかないとちょっと無理です。
2019年4月2日 10:51 PM #15639
DRILL LANCER
モデレーター
追記：
今しがたLightning Charmのデモサイトを見てきました。
どうやらLightning CharmではVK最新記事のデザインが大幅に変わっているようです。
（まさかLightning CharmにおいてVK最新記事のデザインが変わっているなんて思っていませんでした。）

Lightning Charmでは記事の画像エリアと記事タイトル等があるエリアが50:50で配置されています。
記事の画像エリアは
```
@media (min-width: 992px) {
    .mainSection .veu_postList.pt_0 .postList_item .postList_thumbnail {
        overflow: hidden;
        width: 50%;
    }
}
```
で定義されていて、記事タイトル等があるエリアは
```
@media (min-width: 992px) {
	.mainSection .veu_postList.pt_0 .postList_item .postList_body {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    display: block;
	    width: 50%;
	    -webkit-transform: scale(0,-50%);
	    transform: translate(0,-50%);
	}
}
```
で定義されています。
この両方のwidthと記事タイトルがある部分のtopやleftやtransformあたりををうまく調整すれば良くなると思います。

992px以下のデバイスでは画像が上、その他が下で表示されるのでそのあたりも踏まえて編集すると良いでしょう。
2019年4月2日 10:57 PM #15640

yunahana
参加者

RICK 様

本当にお手数をおかけして申し訳ありません。

お客様の作成中のサイトなので、URLを貼ることができませんが、
下記はCharm のサンプルデモサイトですが、こちらの「最新記事」が標準になっています。

HOME

Charmでは、サムネイルを大きく表示できギャラリーのようにみせる仕様になっているそうです。
こちらの「VK最新記事ウィジェット」をFortなどの「VK最新記事ウィジェット」のような表示にするのは無理があるのでしょうか？

2019年4月2日 11:01 PM #15641

yunahana
参加者

RICK 様

Lightning Charmのデモサイト確認、ありがとうございます！
教えて頂いたコードで試してみます。

本当にありがとうございます。
またご報告させていただきます。

2019年4月3日 2:32 AM #15642

yunahana
参加者

RICK 様

長いことご教授いただき、ありがとうございます。

コードの数字を色々と変更してみましたが、記事の画像エリアと記事タイトル等があるエリアが交互に配置されるせいか、中々思うようにいきませんでした‥
少し時間をおいて、もう少しためしてみます。

長い間、お付き合いいただき、本当にありがとうございます。

2019年4月3日 7:06 AM #15643

DRILL LANCER
モデレーター

「VK 最新記事」ウィジェットではなく、「LTG コンテンツエリア投稿ウィジェット」で妥協するという案はどうでしょうか？
すでにおわかりかと思いますが、私は一顧客であり、Lightning Charmを所持しておりませんのでなんとも言えませんが・・・

2019年4月3日 7:59 AM #15645

DRILL LANCER
モデレーター

色々試す前に下記記事を一読してみるといいかもしれません。

全てのWordPressテーマで使える！デザインをピンポイントで変更する方法〜親テーマのCSSは書き換えないで〜

2019年4月4日 1:39 AM #15658
yunahana
参加者
RICK 様

お忙しいところ、細かいところまでご教授いただき、本当にありがとうございます。
下記ページはいつも参考にさせていただいております。きちんと理解できているかどうかは少し自信がありませんが‥

全てのWordPressテーマで使える！デザインをピンポイントで変更する方法〜親テーマのCSSは書き換えないで〜

>
「VK 最新記事」ウィジェットではなく、「LTG コンテンツエリア投稿ウィジェット」で妥協するという案はどうでしょうか？

RICK 様！
妥協もなにも、私のやりたかったこと表示はこれです～！！！
「LTG コンテンツエリア投稿ウィジェット」‥視界に入っておりませんでした‥(*_*)
「VK最新記事ウィジェット」を無理に改造するよりも「LTG コンテンツエリア投稿ウィジェット」で最新記事を表示させ、「VK最新記事ウィジェット」はサムネイルを大きく表示のままギャラリーのようにみせる仕様として使えるようにも残せるので、「コンテンツエリア投稿ウィジェット」を使うことは、最高の解決策です。

本当に長いことお付き合いいただき、心より感謝申し上げます。
ありがとうございました。
- この返信は5年、 8ヶ月前にyunahanaが編集しました。
投稿者

投稿