WordPressテーマSANGOの質問

人気記事を横スクロールできるようにしたい

アバター
はやしや

シンプルで可愛らしいデザインが気に入って愛用させていただいています。
ウィジェットで人気記事を表示させる際、できるだけ多くの記事を表示させたいので「関連記事」のように横スクロールで表示させたいと思っているのですが、出来るようでしたら教えていただきたいです。何卒よろしくお願いします。

【サルワカ風】トップページに人気記事を設置する方法
コメントへの回答
サルワカくん
サルワカくん
2017/12/10

できなくはないのですが「右側にサイドバーがある」PC表示の場合はどうするイメージでしょうか。
スマホなら良いのですが、PCでの隠し方に困りますね…。

アバター
はやしや
2017/12/11

返信ありがとうございます。
サイドバーに重ならない、サイドバーでは見えない形でメインカラム部分のみでの横スクロールをイメージしていました。これだと見た目がいまいちでしょうか…

サルワカくん
サルワカくん
2017/12/11

サイドバーの手前でブツンと切れてしまうのでは、見た目がイマイチかと思います。
(バグに見えてしまうかもしれません…)
スマホだけスクロールする…という形なら問題なさそうですが。

アバター
はやしや
2017/12/12

迅速丁寧な対応、本当にありがとうございます。
なるほど…それではスマホだけスクロール(もしくはトップページを固定ページ1カラム)の場合はどうすればよいでしょうか…?

サルワカくん
サルワカくん
2017/12/13

@media only screen and (max-width: 480px) {
.popular-posts.cardtype {
overflow-x: scroll;
white-space: nowrap;
display: block;
margin: 5px -15px 5px 0;
}

.popular-posts .cardtype__article {
width: 230px;
margin: 0 0 25px;
display: inline-block;
}
}/*消さない*/

上記のCSSをこの記事で貼ったコードのさらに下に貼り付けることで、できるのではないかと思います。
お試し頂けますか?

アバター
はやしや
2017/12/14

できました!親切な対応ありがとうございました!

サルワカくん へ返信する

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。