記事内に複数の広告を1行で横スクロールで見えるようにしたいです。
こんにちわ、冬色と申します。
ブログの広告についてご教授ください。
ブログはワードプレス・テーマ:SANGOで作成、記事はクラシックエディターを使用して書いています。
広告はA8.netにてebooksさんのアフェリエイトを使用させて貰っています。
ブログの記事に漫画の1巻から最新刊までの広告を挿入し、一行で横スクロールで見えるように表示させたいと考えています。
ですが色々と調べて試してみたのですが意図したように並べる事ができません。
他の方のブログですと私がやりたい形で広告を表示させている物があったので実現自体は可能と考えています。
私の力不足を自己解決できずに申し訳ないのですが、
どなたかお知恵を貸していただけないでしょうか。
また、インターネットで「ワードプレス」「複数行」「広告」などのキーワードで調べましたところ、近い物や一部を満たすものはありましたが、
こちらが望んだ結果を表示する事ができませんでした。
試した事
・広告間のコードの改行を削除する
インターネットで検索した所、広告のコードとコードの間の改行を削除して一行に複数の広告を記載するという物がありました。
これを試したところ確かにPC表示では横に並ぶのですが、一定数を超えると勝手に改行されてしまいます。
9つの広告ですと3行×3列で表示されてしまうと言えば伝わるでしょうか。
またモバイル表示では横幅が足りずに、広告一つ一つが改行されてしまい結局全て縦に並べた表示になってしまいました。
・ブロックエディターでカラムを使う。
私は普段ワードプレスのクラシックエディターを使用しているのですが、ブロックエディターのカラム機能を試してみました。
こちらも意図したように表示する事ができませんでした。
カラムで最大6個までコードを横に並べれるのですが、
広告のコードを一行にしたのと同様にPCでは横幅まで行くと改行、モバイルでは全て縦一列で表示されてしまいました。
添付画像で説明しますと、
赤い枠内に複数の漫画の広告(商品リンク)を並べ、
画面横幅からはみ出した分を横スクロールで表示させたいという事です。
以上、よろしくお願いします。

みんなのコメント 22件
ベストアンサー
こちらの記事に記載してある overflow-x:auto タグで囲う方法を試してみてください。
https://pianobeam.com/wordpress-scroll-bar/
質問の途中から反応できなくて申し訳ありません。
質問を行った5/27の途中から下記のエラーでブログ相談ドットコムさんに書き込むことができなくなっていました。
σ(^_^;)
■エラー
閲覧できません (Forbidden access)
指定したウェブページを表示することができません。
入力したURLや値が正しくない可能性がございますのでご確認ください。
The server refuse to browse the page.
The URL or value may not be correct. Please confirm the value.
長文と画像を添付するとエラーで書き込めないため、
短文の連投になりますがご容赦ください。
@j_jetstreamさん、回答ありがとうございます。
残念ながら教えて頂いた記事の内容では問題は解決しませんでした。
私としては1×9で表示させたいのですが、
広告が3×3の表示のまま下にスクロールバーが表示されるようになりました。
私はブラウザのGooglechromeを使用しているのですが、
ブラウザの横を狭めてみたところ、スクロールバーが表示されたまま縦表示になってしまいました。
お手数をおかけしますが、他に心当たりがあれば教えていただけると助かります。
以上、よろしくお願いします。
テキストだとわからないですね。
画像添付してください。
実際に使ったコードを貼り付けたいのですが、
だいなり、しょうなりの"かっこ"が悪いのかコメント欄にコードを書き込むことができません。
分かりにくい説明になってしまい申し訳ないです…
画像を添付
左の画像は下にスクロールバーが表示されていますが意味をなしていません。
ブラウザの横幅を狭めたのが右の画像です。
スクロールバーは表示されていても勝手に改行されていて、スクロールバーは添えられているだけですね。
とりあえず広告を table タグで囲いつつ、以下のサイトで紹介されている横スクロール CSS を利用することで実現できるはずです。
https://keizokuhachikara.info/table-scroll/
相変わらず長文の書き込みはブログ相談ドットコムさんのエラーが出て書き込めませんが、
文章が短ければ画像は添付できるようですね…
教えて頂いた方法でも上手くいきませんでした。
現状を投稿しますので何が気が付いた点など有ればご教授ください。
教えて頂いたページからスタイルシートへCSSのコードをコピーしました。
広告のコードを横スクロールのCSSとtableタグのみで囲いました。
これは上手くいきませんでした。
trタグもtableタグの内側に追加してみましたこれも同様の結果になりました。
広告のコードをtrタグthタグで挟んだ状態も試してみました。
こちらは上手くテーブル表示になり横スクロールが表示されましたが、
相変わらず広告が縮小されて横スクロールが意味をなしていません。
試しに横スクロールのCSSを削除した所、横スクロールバーは消えました。
CSSが全く機能していないという訳ではなさそうです。
以上です。
何が気が付いた点など有ればご教授頂ければと。
こっちのほうが簡単で良いかもしれません。
私の環境でも再現できました。
https://01blog.org/image-horizontal-scroll/
問題が解決しました。
@j_jetstreamさんありがとうございます。
divタグの中味を画像から広告に差し替えたところ、
スクロールバーが機能する事を確認しました。
追加で教えて頂いた方法を反映する時に気が付いたのですが、
使用しているワードプレスのテーマによって違うのかもしれませんが、
ワードプレスのCSSの追加先は外観の「テーマファイルエディター」ではなく、
外観の「カスタマイズ」にある「追加CSS」にCSSのコードを記載しないと、
正常に追加したCSSが機能しないようでした。
最初にCSSを編集した時には気が付いていませんでしたが、
テーマエディターを編集中にファイルの内容の上の方にCSSを変更する時の注意が出ており気が付きました。
σ(^_^;)
追加した方法ですと横幅が多かったため、
最初に教えて貰った案を再度試したところ意図した表示に成る事が確認できました。
CSS の追加は「追加 CSS」でもいいですし、テーマファイルの style.css に追記する方法でもどちらでもかまわないのですが、style.css の場合はテーマアップデートが行われると初期化されてしまうため、子テーマを利用している際に活用するのが通常ですよ。
今回、良い勉強になったかと思います。
私のCSSの追加先に問題があったようで、
二つ目に教えて頂いた案で良かったようです。
(>人<;)
@j_jetstreamさん、長々とお付き合い頂きありがとうございました。
m(_ _)m
あなたの経験や知識を共有しませんか?
ほかのユーザーの相談に、コメントで参加してみましょう。
ログインしてコメントするはじめての方は無料登録