ワードプレス

WordPressの投稿記事の下に画像やカードを表示させてスクロールさせる | ウィジット化

2020年12月16日

WordPressの投稿記事の下に画像やカードを表示させてスクロールさせる | ウィジット化

レスポンシブで横スクロールでカードが表示できないかなと思っておりました。

こんな感じに↓

hitokage.gif

アマゾンの本をオススメで記事の下に表示させています。

このやり方を書きます。

htmlとcssを自分で書く

こういうプラグインを探したがありませんでした。

ですから自分で書きます。

dmnqklwdmqlkw.png

こんな感じで、カスタムHTMLにコードを書きます。

ウィジットがどういう風に存在してるかは使ってるテーマに寄っても変わります。

僕はアフィンガー5を使ってます。

html5

<div class="card-deck">
    <div class="scrolling-wrapper-flexbox">
      <div class="card" style="width: 12rem;">
          <img class="card-img-top" src="https://off.tokyo/wp-content/uploads/2020/12/51MgH8Jmr3L.jpg" alt="Card image cap">
          <div class="card-body">
            <h6 class="card-title">リーダブルコード</h6>
            <p class="card-text">より良いコードを書くためのシンプルで実践的なテクニック </p>
            <button ype="button" class="btn btn-primary" onclick="location.href='https://amzn.to/3oKKckl'">Amazon.comで見る</button>
          </div>
      </div>


      <div class="card" style="width: 12rem;">
          <img class="card-img-top" src="https://off.tokyo/wp-content/uploads/2020/12/51HNAhxudcL.jpg" alt="Card image cap">
          <div class="card-body">
            <h6 class="card-title">Webを支える技術</h6>
            <p class="card-text">HTTP,URI,HTML,そしてREST</p>
            <button ype="button" class="btn btn-primary" onclick="location.href='https://amzn.to/3qRktZt'">Amazon.comで見る</button>
          </div>
      </div>

      <div class="card" style="width: 12rem;">
          <img class="card-img-top" src="https://off.tokyo/wp-content/uploads/2020/12/71sWmsYsHHL.jpg" alt="Card image cap">
          <div class="card-body">
            <h6 class="card-title">誰でもPythonで作れる</h6>
            <p class="card-text">儲かるAIとソフトウェアの作り方</p>
            <button ype="button" class="btn btn-primary" onclick="location.href='https://amzn.to/2LxErbF'">Amazon.comで見る</button>
          </div>
      </div>

      <div class="card" style="width: 12rem;">
          <img class="card-img-top" src="https://off.tokyo/wp-content/uploads/2020/12/picture_large978-4-87311-479-8.jpg" alt="Card image cap">
          <div class="card-body">
            <h6 class="card-title">プログラマが知るべき97のこと</h6>
            <p class="card-text">現場で使える実践哲学のマスターピース</p>
            <button ype="button" class="btn btn-primary" onclick="location.href='https://amzn.to/344UqV6'">Amazon.comで見る</button>
          </div>
      </div>

      <div class="card" style="width: 12rem;">
          <img class="card-img-top" src="https://off.tokyo/wp-content/uploads/2020/12/51KYrsCBI2L.jpg" alt="Card image cap">
          <div class="card-body">
            <h6 class="card-title">情熱プログラマー</h6>
            <p class="card-text">時代を超えて。ソフトウェア開発者の幸せな生き方</p>
            <button ype="button" class="btn btn-primary" onclick="location.href='https://amzn.to/3a5aWIl'">Amazon.comで見る</button>
          </div>
      </div>


      <div class="card" style="width: 12rem;">
          <img class="card-img-top" src="https://off.tokyo/wp-content/uploads/2020/12/d.jpg" alt="Card image cap">
          <div class="card-body">
            <h6 class="card-title">アジャイルサムライ</h6>
            <p class="card-text">プログラミング達人開発者への道</p>
            <button ype="button" class="btn btn-primary" onclick="location.href='https://amzn.to/3gE1Eo0'">Amazon.comで見る</button>
          </div>
      </div>

      <div class="card" style="width: 12rem;">
          <img class="card-img-top" src="https://off.tokyo/wp-content/uploads/2020/12/41y65zf27LL.jpg" alt="Card image cap">
          <div class="card-body">
            <h6 class="card-title">Rubyを作った男 まつもとゆきひろ</h6>
            <p class="card-text">コードの世界 スーパー・プログラマになる14の思考法</p>
            <button ype="button" class="btn btn-primary" onclick="location.href='https://amzn.to/37VExBr'">Amazon.comで見る</button>
          </div>
      </div>

    </div>
</div>

 

追加CSSを書く

外観 => カスタマイズ => 追加CSS

でそこにCSSを書きます。

mdq;wldm;qlw.png

dmqklwdmql.png

 

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.card {
    flex: 0 0 auto;
  }

::-webkit-scrollbar { 
    display: none; 
}

.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
}


.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.card > hr {
  margin-right: 0;
  margin-left: 0;
}

.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.8rem;
}

.card-title {
  margin-bottom: 0.75rem;
  margin-top: 0.25rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link + .card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header + .list-group .list-group-item:first-child {
  border-top: 0;
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.card-img {
  width: 100%;
  border-radius: calc(0.25rem - 1px);
}

.card-img-top {
  width: 100%;
}

.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
}

.card-deck .card {
  margin-bottom: 15px;
}

@media {
  .card-deck {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 5px;
    margin-bottom: 0;
    margin-left: 5px;
  }
}

.card-superlative {
  margin: 0.8rem;
}

 

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

ご提供 sponsor
 

Meee!(ミー)は、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできるスキルマーケットです。カテゴリや居住地から、検索することが可能です。

 

ランゲージエクスチェンジは、ネイティブスピーカーと気軽にマッチングできる言語交換プラットフォームです。あなたの地元に住む外国人を探したり、留学や海外移住の前に、現地のネイティブスピーカーと繋がることもできます!

宣伝
 

りょすけトークchは、仕事や私生活をより豊にするYouTubeチャンネルです。文献(本、映画、論文)から役に立つ情報をまとめ、生涯にわたり役に立つ哲学をお届けしています。是非、チャンネル登録してみてね

-ワードプレス
-

Copyright© offブログ! , 2021 All Rights Reserved Powered by AFFINGER5.