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

[yunahana]

いつもお世話になっております。

Charmを使っていますが、トップページにウィジットを使って最新記事を表示させておりますが、サムネイル画像が大きくて困っています。
Charmでは、サムネイルを大きく表示できギャラリーのようにみせる仕様になっていますが、通常の最新記事を表示させたいと思っています。
「日付/カテゴリー/タイトル」に設定すると、日付とタイトルのみの寂しいコーナーになってしまいます。
CSSカスタマイズで、下記の様に記述してみませたが反映されませんでした‥

.veu_postList .postList_miniThumb .postList_thumbnail img {
    width: 80px;
    height: auto;
}

Charmでも、通常の最新記事の様にサムネイル画像を小さく表示させる方法を、ご教授お願いいたします。
よろしくお願いいたします。

[DRILL LANCER]

VK最新記事ウィジェットのお話でしょうか？
下記コードを適用してみてはいかがでしょうか？

.veu_postList .postList_miniThumb .postList_thumbnail {
　　　　width: 80px;
　　　　height: auto;
}

あと、適用後にサーバー＆ブラウザのキャッシュの削除を忘れずに。

• この返信は5年、 7ヶ月前にDRILL LANCERが編集しました。
• この返信は5年、 7ヶ月前にDRILL LANCERが編集しました。
• この返信は5年、 7ヶ月前にDRILL LANCERが編集しました。

[yunahana]

RICK 様

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

[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

[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年、 7ヶ月前にDRILL LANCERが編集しました。

[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年、 7ヶ月前にyunahanaが編集しました。

[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を貼っていただかないとちょっと無理です。

[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以下のデバイスでは画像が上、その他が下で表示されるのでそのあたりも踏まえて編集すると良いでしょう。

[yunahana]

RICK 様

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

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

HOME

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

[yunahana]

RICK 様

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

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

[yunahana]

RICK 様

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

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

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

[DRILL LANCER]

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

[DRILL LANCER]

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

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

[yunahana]

RICK 様

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

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

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

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

本当に長いことお付き合いいただき、心より感謝申し上げます。
ありがとうございました。

• この返信は5年、 7ヶ月前にyunahanaが編集しました。

[投稿者]

投稿