「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

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://tcd-theme.com/2016/06/google-develop.html

この記事は役に立ちましたか?

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

同じテーマのカスタマイズ記事