カード 画像配置
2021-07-01
参考サイト1:https://webst8.com/blog/bootstrap4-card/
参考サイト2:https://webnetamemo.com/coding/bootstrap4/201711116162
参考サイト3:http://www.tohoho-web.com/bootstrap/card.html
画像を下に表示
WordPress側が勝手にimgタグをpタグで囲んでしまう場合があるため、隙間が空いたりするかもしれないです。
imgタグはそのまま入れるのではなくdivなどのブロックレベル要素で囲んだ方が良いかもしれないです。
imgタグにクラス.card-img-bottom
|
1 2 3 4 5 6 |
<div class="card" style="width: 20rem;"> <div class="card-body"> <p class="card-text">imgタグにクラス.card-img-bottom</p> </div> <div><img class="card-img-bottom" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg" alt="Card image cap"></div> </div> |
画像上に文字表示
WordPress側が勝手にpタグを入れてしまい隙間が空く場合があります。
|
1 2 3 4 5 6 7 |
<div class="card text-white" style="width:20rem"> <img class="card-img" src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg" alt="ライトコースのイメージ画像"> <div class="card-img-overlay"> <h4 class="card-title">ライトコース</h4> <p class="card-text">.card-bodyの代わりに.card-img-overlay</p> </div> </div> |
横並びのcard
rowクラスにno-guttersを足しています(no-guttersをつけないと画像などのレイアウトの間に隙間が発生します。)
画像の下に隙間が空きますが、ちょっとよくわからないですね。
ライトコース
ホームページ・ブログ開設など基礎を身に付けたい方向けコースです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="card mb-3" style="max-width: 500px;"> <div class="row no-gutters"> <div class="col-lg-6"> <img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg" class="card-img" alt="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg"> </div> <div class="col-lg-6"> <div class="card-body"> <h4 class="card-title">ライトコース</h4> <p class="card-text">ホームページ・ブログ開設など基礎を身に付けたい方向けコースです。</p> </div> </div> </div> </div> |
