[ 解決済 ] 子ページ一覧アイキャッチ画像サイズ変更

[k-foods]

→Lightning Pro child
→Origin Ⅱ

タイトルそのままですが、子ページ一覧アイキャッチ画像サイズ変更は可能でしょうか？テキスト数・フォントサイズも変更できるといいです。いかがでしょうか？

[うなこ]

プラグインVK Blocks Proの子ページリストブロックで、表示タイプがいろいろ選択できます。
アイキャッチ画像も、カードタイプを選択しますと大きく表示できます。
選択する表示タイプによりcssのクラス名が変わりますので、まずはこちらの表示タイプを選んでいただき、
フォントサイズを調整する形になるかと思います。

子ページリスト（Pro版のみ）

cssのカスタマイズは、こちらのサイトが参考になると思います。

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

[k-foods]

固定ページは操作できますが、外観＞カスタマイズ＞ウィジェット＞TOPページコンテンツエリア部にVK固定ページ本文を設置し、子ページ一覧の表示をチェックしていますが、それ自体は編集可能でしょうか？

[うなこ]

はい、cssでカスタマイズ可能です。

トップページのみに適応させたい場合は以下のクラス名に対してサイズを調整してみてください。
トップページのみではなくて全ページで適応させたい場合は上の.home のクラス名を削除してください。

/* HOMEのみ 子ページアイキャッチ画像 */

.home .veu_childPage_list .wp-post-image{
width: ○○;
}

/* HOMEのみ 子ページタイトル */

.home .veu_card .veu_card_title{
font-size: ○○px;
}

/* HOMEのみ 子ページ文章 */

.home .veu_childPage_list .childPage_list_text{
font-size:○○px;
}

[k-foods]

ブロック：子ページリスト(pro)

と

VK ALL in one expansion unit：挿入アイテムの設定＞子ページ一覧の表示
があるようですね。私がお話ししていたのは後者のほうでした。

別ページで、前者の方でリストを表示させてみましたが、サムネイルが大きすぎるのと抜粋の文章が長すぎるのでその調整のCSSがあるとありがたいです。その場合そのブロックの高度な設定＞追加CSSクラスに挿入すればいいでしょうか？

[うなこ]

別ページで、前者の方でリストを表示させてみましたが、サムネイルが大きすぎるのと抜粋の文章が長すぎるのでその調整のCSSがあるとありがたいです。その場合そのブロックの高度な設定＞追加CSSクラスに挿入すればいいでしょうか？

こちらはcssのクラス名を追加する場所になります。
少量のcssを追加する場合はカスタマイズの追加CSSに記述してください。

cssのカスタマイズが多い場合は、子テーマで作成したほうが作りやすいと思います。

CSSの記述場所は、こちらのページにも説明がありますので、よろしければ参考にしてみてください。

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

[うなこ]

別ページで、前者の方でリストを表示させてみましたが、サムネイルが大きすぎるのと抜粋の文章が長すぎるのでその調整のCSSがあるとありがたいです。

こちらの抜粋の件は、該当の子ページの編集画面から文字数を調整可能です。
右に抜粋の項目がありますので、抜粋を入力 (任意)の個所に好きな文字を入れて更新してください。（添付画像参照）

サムネイルの大きさの件は、子ページリストの表示タイプによってcssクラス名が変わりますので、
まずはどの表示タイプで実装するかを教えてください。
（表示タイプは、カード、カード水平、メディア、テキスト1カラムの4種類あります。）

Attachments:

You must be logged in to view attached files.

[k-foods]

/* HOMEのみ 子ページ文章 */

.home .veu_childPage_list .childPage_list_text{
font-size:○○px;
}

上記機能しましたが、フォントサイズを大きくすると枠も大きくなりました。文章量を少なくできますでしょうか？

/* HOMEのみ 子ページアイキャッチ画像 */

.home .veu_childPage_list .wp-post-image{
width: ○○;
}

アイキャッチ画像は枠の幅が決まっているせいか、拡大も縮小もできない感じです。

よろしくお願いします。

[うなこ]

上記機能しましたが、フォントサイズを大きくすると枠も大きくなりました。文章量を少なくできますでしょうか？

⇒こちらの件は抜粋の文字になりますので、
該当の子ページの編集画面から文字数を調整可能です。
右に抜粋の項目がありますので、抜粋を入力 (任意)の個所に好きな文字を入れて更新してください。（添付画像参照）

アイキャッチ画像は枠の幅が決まっているせいか、拡大も縮小もできない感じです。

⇒アイキャッチ画像の件は、ためしに以下のcssでサイズは変わりますか？

/* HOMEのみ 子ページアイキャッチ画像 */

.home .veu_childPage_list .wp-post-image{
width: 20%;
}

/* 子ページアイキャッチ画像 */

.veu_childPage_list .wp-post-image{
width: 20%;
}

Attachments:

You must be logged in to view attached files.

[k-foods]

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

[投稿者]

投稿