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

TCDテーマBLOOM:スマホでのカードリンクの表示について

Q.カードリンクがスマートフォン表示時に、縦長に表示されてしまいます。対策方法はありますか。

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

カードリンクはスマートフォン表示時に、文字数の関係上、縦長に表示される仕様でございます。回り込みを解除される場合は、大変申し訳ございませんが、カスタマイズが必要です。

外観>TCDテーマオプション>基本設定にございます「カスタムCSS」にて、下記内容をご記述頂くことで、実現可能と思われます。

@media only screen and (max-width: 767px) {
  .cardlink_thumbnail {
    float: left;
  }

上記にて、タイトルと日付がサムネイルの右側へ
配置されるようになります。

より縦幅を短くされたい場合は、文字数を制限されたり、フォントサイズをご変更されることがよろしいことと思われますので、その場合は、下記内容も併せてご記述くださいませ。

@media only screen and (max-width: 767px) {
  .cardlink_thumbnail {
    margin-bottom: 5px;
  }
  .cardlink_title {
    font-size: 13px;
  }
  .cardlink_excerpt {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

抜粋を右側に寄せない場合は、.cardlink_thumbnailのmargin-bottomの記述が不要となりますので、ご削除くださいませ。

どのようなID名、クラス名が使用されているかご確認頂く方法としては、
ブラウザに搭載されております「開発者モード」という機能をご使用頂きましたら、
簡単にご確認頂けるかと思います。
インスペクターの横にございますボタンが便利です。
詳しくは下記の記事が参考になると思いますので、ご確認の上、お試しくださいませ。
http://design-plus1.com/tcd-w/2016/06/google-develop.html

The following two tabs change content below.

タカ

スポーツが好きな30代男性です。 休みの日はフットサルやバスケットをしています。

関連記事

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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