質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4689閲覧

スマホ等の画面サイズにスライドショー幅を可変したい

yoso

総合スコア27

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/04/04 06:15

編集2017/04/04 07:08

wordpress上でCSSを使用しスライドショーを作成しましています。
スライドショーは動くのですが、スマホ等のページ幅に可変せず困っています。

<div id="stage"> <div id="frame"> <div id="photo1"><img src="image1.jpg"></div> <div id="photo2"><img src="image2.jpg"></div> <div id="photo3"><img src="image3.jpg"></div> <div id="photo4"><img src="image4.jpg"></div> <div id="photo5"><img src="image5.jpg"></div> </div> </div>
<STYLE TYPE="text/css"> #stage { position: relative; width: 600px; height:338; margin: 0 auto; } #photo1,#photo2,#photo3,#photo4,#photo5 { position: absolute; width: 600px; height: 338px; } #photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img { opacity:0; -moz-animation: imgTrans 30s infinite; -webkit-animation: imgTrans 30s infinite; animation: imgTrans 30s infinite; } #photo1 img { -moz-animation-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s; } #photo2 img { -moz-animation-delay: 6s; -webkit-animation-delay: 6s; animation-delay: 6s; } #photo3 img { -moz-animation-delay: 12s; -webkit-animation-delay: 12s; animation-delay: 12s; } #photo4 img{ -moz-animation-delay: 18s; -webkit-animation-delay: 18s; animation-delay: 18s; } #photo5 img { -moz-animation-delay: 24s; -webkit-animation-delay: 24s; animation-delay: 24s; } #frame { width: 600px; height: 338px; position: relative; overflow: hidden; } @-webkit-keyframes imgTrans { 0% { opacity:0; } 5% { opacity:1; } 20% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; } } @-moz-keyframes imgTrans { 0% { opacity:0; } 5% { opacity:1; } 20% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; } } @keyframes imgTrans { 0% { opacity:0; } 5% { opacity:1; } 20% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; } } </style>

また、このスライドショー上に文字を配置することは可能でしょうか。
初歩的なこととは思いますが、ご教授願いますようお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

stageやframeやphoto1,photo2に、width 600pxが指定してしまっているので
縮めたときもそのサイズに固定されているのかと思いますが
下記のようにスマホのときのみ(下記では767以下にしてます)指定してはどうでしょうか?

css

1@media screen and (max-width: 767px) { 2 #stage { 3 width: auto; 4 height: auto; 5 } 6 #frame { 7 width: auto; 8 } 9 #photo1, #photo2, #photo3, #photo4, #photo5 { 10 width: auto; 11 } 12 img { 13 max-width: 100%; 14 } 15}

また、スライドショー上に文字を配置とのことですが、
各スライドショーに同じテキストで良いのであれば、テキストを上下中央にする場合は下記のような感じでいかがでしょうか?
希望どおりじゃなかったらすみません(´;ω;`)

html

1<div id="stage"> 2 <div id="frame"> 3 <div id="photo1"><img src="image1.jpg"></div> 4 <div id="photo2"><img src="image2.jpg"></div> 5 <div id="photo3"><img src="image3.jpg"></div> 6 <div id="photo4"><img src="image4.jpg"></div> 7 <div id="photo5"><img src="image5.jpg"></div> 8 <p>テキスト</p> 9 </div> 10</div>

css

1p { 2 position: absolute; 3 top: 50%; 4 -webkit-transform: translateY(-50%); 5 transform: translateY(-50%); 6 left: 0; 7 right: 0; 8 margin: 0; 9 text-align: center; 10}

投稿2017/04/04 08:07

編集2017/04/04 08:09
yukabyo

総合スコア135

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoso

2017/04/04 09:42

ありがとうございます! 無事に可変し、文字もスライドショーの上に設置できました。
yoso

2017/04/04 09:53

欲張って申し分けないのですが 「可変し表示サイズいっぱいいっぱいに表示」させる方法はありませんでしょうか? 別に質問を立てますので、もしご存知でしたらご教授お願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問