【横スクロール】スマホでスワイプできるおすすめ記事一覧ををコピペで(カルーセル)
スマホでよく見る横にスクロールできる記事の一覧。LINEニュースやSmartNewsなどでも見かけますね。
つるつると動かしながらコンテンツを見ることができるので非常に便利です。
今回は自分のサイトにスクロール一覧を導入する方法をご紹介します。
カルーセルとも呼ばれるこの部品を導入すると、読み手に紹介できるコンテンツが増えるため、ページ閲覧数が増える効果が見込めます。
今回のコンテンツです。
スマホで横スクロールするおすすめ記事一覧を表示する
方法はシンプル、HTMLとCSSのコピペのみです。
- HTMLのコピペ(おすすめ記事表示)
- CSSのコピペ(横スクロール設定)
1.HTMLのコピペ(おすすめ記事表示)
以下のコードをコピーして、必要な個所のみ自分のサイト用に修正します。
画像URLは記事のページを表示した状態で、画像を右クリック ⇒ 「画像アドレスをコピー」から取得することができます。
【修正箇所】
- 部品タイトル: - おすすめ記事 -
- ページURL:href="ページURL"
- 画像URL:src="画像URL"
- 記事タイトル:レベルが低い~
<div class="recommends">
<p class="recommends-title"> - おすすめ記事 - </p>
<ul class="carousel">
<li><a href="https://www.biz-thinking-k.com/entry/high-standard/dont-work-at-low-performance-company" class="recommend-entry" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/biz-thinking-K/20191125/20191125203231.png"class="recommend-img"/><p class="recommend-title">レベルが低い職場にいるといくら優秀でも年収は上がらない。理由と対策は?</p></a></li>
<li><a href="https://www.biz-thinking-k.com/entry/high-standard/mind-for-high-appraisal"class="recommend-entry" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/biz-thinking-K/20190519/20190519181453.jpg"class="recommend-img"/><p class="recommend-title">昇進も早い優秀な部下・優秀な人の特徴</p></a></li>
<li><a href="https://www.biz-thinking-k.com/entry/next-workstyle/high-performance-person-with-smart-brain"class="recommend-entry" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/biz-thinking-K/20190717/20190717194557.png"class="recommend-img"/><p class="recommend-title">地頭の良いと言われる子・人の特徴と鍛え方</p></a></li>
<li><a href="https://www.biz-thinking-k.com/entry/next-workstyle/whattodo-to-get-high-income"class="recommend-entry" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/biz-thinking-K/20190901/20190901204546.jpg"class="recommend-img"/><p class="recommend-title">副業禁止の企業にいる人が収入を増やすためにやるべきこと【在職年収アップ・転職】</p></a></li>
<li><a href="https://www.biz-thinking-k.com/entry/blog-operation/blog-operation-with-aidma"class="recommend-entry" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/biz-thinking-K/20190622/20190622200050.png"class="recommend-img"/><p class="recommend-title">【AIDMA分析】ITコンサルタントの考えるブログ運営</p></a></li></ul></div>
自分のサイト用に編集ができたら、はてなブログの場合は以下の手順でコードを貼り付けます。
【ヘッダに貼る場合】
デザイン設定 ⇒ カスタマイズ ⇒ ヘッダ
【フッタに貼る場合】
デザイン設定 ⇒ カスタマイズ ⇒ フッタ
これで元となる情報の設定は完了。あとはデザインを整えます。
2.CSSのコピペ(横スクロール設定)
CSSのコードは以下のとおりです。
そのまま貼付けをすると当サイトと同じデザインで表示されますが、お好みで色などを変えてみてください。#から始まるカラーコードを差し替えれば色の変更ができます。
▽カラーコードはこちら
#top-editarea { width: 100%; margin: 0 auto 0 auto; }
.recommends {margin: 0;width: 100%;background: #eee;}
.recommends .carousel {list-style-type: none;padding: 12px; overflow-x: scroll; -webkit-overflow-scrolling: touch; white-space: nowrap; margin: 0;-ms-overflow-style: none;scrollbar-width: none; }
.recommends .carousel::-webkit-scrollbar{display:none;}
.recommends .recommends-title{text-align:center; font-size: 22px;font-weight: 500;color: #00b6b3;margin:0;}
.recommends .carousel li { background: #fff; margin: 10px; text-align: center; display: inline-block; word-break: break-all;}
.recommends a.recommend-entry { display: block; width: 250px; font-size: 1rem; font-weight: 600; background: #fbfbf0; box-shadow: 0px 0px 3px rgba(0,0,0,0.1); position: relative; line-height: 1.5;}
.recommends a.recommend-entry:hover { box-shadow: 0 15px 30px -5px rgba(0,0,0,.15),0 0 5px rgba(0,0,0,.1); transform: translateY(-4px); transition: 0.2s; background: #fbfbf0;}
.recommend-title { display:flex ; padding: 0.5em 0.5em; word-break: break-all;white-space: normal; text-align: left;margin: 0; min-height: 75px;background-color:#fbfbf0;}
.recommend-img{max-height:150px;width: 100%;}
.embed-footer img{display: none;}
</style>
▽HTMLとCSSの役割に関心がある人は
横スクロールするカルーセルはコピペ一発
PCで横幅の表示が収まる場合は以下のように表示されます。
ネット検索をすると、このようなコードをいろいろ見つけることができます。
他のサイトを見ていて便利そうなだ・お洒落だな、と思ったときには、検索をしてコピペで取り入れてみてはいかがでしょうか。