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

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

このトピックには13件の返信が含まれ、2人の参加者がいます。3 ヶ月、 2 週間前 yunahana さんが最後の更新を行いました。

14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • 投稿者
    投稿
  • #15609

    yunahana
    参加者

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

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

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

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

    #15616

    RICK
    参加者

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

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

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

    • この返信は3 ヶ月、 2 週間前に  RICK さんが編集しました。
    • この返信は3 ヶ月、 2 週間前に  RICK さんが編集しました。
    • この返信は3 ヶ月、 2 週間前に  RICK さんが編集しました。
    #15621

    yunahana
    参加者

    RICK 様

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

    #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

    #15634

    RICK
    参加者
    
    .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;
    }
    

    を記述することで、下記のようなデザインを実現しています。

    • この返信は3 ヶ月、 2 週間前に  RICK さんが編集しました。
    #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

    • この返信は3 ヶ月、 2 週間前に  yunahana さんが編集しました。
    #15638

    RICK
    参加者

    うーむ、なんかデザインが標準のものと違っているのでカスタマイズされていますか?
    それともこれが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を貼っていただかないとちょっと無理です。

    #15639

    RICK
    参加者

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

    #15640

    yunahana
    参加者

    RICK 様

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

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

    HOME

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

    #15641

    yunahana
    参加者

    RICK 様

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

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

    #15642

    yunahana
    参加者

    RICK 様

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

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

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

    #15643

    RICK
    参加者

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

    #15645

    RICK
    参加者
    #15658

    yunahana
    参加者

    RICK 様

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

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

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

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

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

    • この返信は3 ヶ月、 2 週間前に  yunahana さんが編集しました。
14件の投稿を表示中 - 1 - 14件目 (全14件中)

このトピックに返信するにはログインが必要です。