WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマUNIQUE:トップページの各コンテンツの高さを小さくする方法

Q.トップページのコンテンツビルダーの各コンテンツのボックスの高さを制作実績の各ボックスの大きさに合わせたいです。

※コンテンツの行数によってカスタマイズ方法が異なります。
この記事では『コンテンツが1行の場合(ボックスのサイズ小×4つ等の場合)』のカスタマイズ方法をご案内しております。
『コンテンツが2行の場合(ボックスのサイズ大×4つ等の場合)』では、大幅な仕様変更が必要となり、当サイト及びTCDサポートではご案内をいたしかねます。

A.下記の方法でカスタマイズしてください。

1. 「最近の記事一覧」「最近のお知らせ記事一覧」の表示件数を少なくする

テーマオプションで設定出来る最小件数の3件でもはみ出してしまうので2件表示にします。
編集するファイル: ホームページ (front-page.php)
編集する箇所: 28行目付近

$args = array('post_type' => 'post', 'posts_per_page' => $post_num, 'ignore_sticky_posts' => 1);

 ↓ 「$post_num」を「2」に変更

$args = array('post_type' => 'post', 'posts_per_page' => 2, 'ignore_sticky_posts' => 1);

編集する箇所: 64行目付近

$args = array('post_type' => 'news', 'posts_per_page' => $post_num, 'ignore_sticky_posts' => 1);

 ↓ 「$post_num」を「2」に変更

$args = array('post_type' => 'news', 'posts_per_page' => 2, 'ignore_sticky_posts' => 1);
2. CSSを調整する

外観>TCDテーマオプション>基本設定のカスタムCSSに入力してください。

@media only screen and (min-width: 1025px) {
.box_list, .box_inner, .index_recent_post { height: 379.8px!important; }
.index_recent_post .box_inner .content { top: 58%; }
}

 
▼変更後のイメージ コンテンツの縦幅が1/2サイズ(制作実績と同じ)になっています。
変更後のイメージ

この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

0

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。