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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

2767閲覧

php javascript スライドショー 左に固定ボタン挿入

a_ya

総合スコア32

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2016/03/16 11:18

編集2016/03/18 05:28

質問お願いします。

今wordpressのテーマをカスタムし、画面いっぱいスライドショーの左半分に上下に2つボタンを配置したいのですがうまくいきません。
ボタンを挿入してもスライドが下に周り、右側に来てくれません。
どうしたら良いでしょうか?

スライドショーのhightも半分くらいの大きさにしたいのですがそこもできずに困っています。

よろしくお願いします

配置したいボタン2つのコード

html

1 <div class="fv_menu"> 2 <div class="mb5"> 3 <a href="contents/a.html"><img src="img/top_navi_01.gif" alt="エリア" width="320" height="170" /></a> 4 </div> 5 <a href="contents/b.html"><img src="img/top_navi_02.gif" alt="キーワード" width="320" height="170" /></a> 6 </div>

php

1<?php if((is_front_page())){ 2if(get_option('expression_slideshow_display')=='yes'){ 3?> 4<script type="text/javascript"> 5/* script for top slider */ 6 7jQuery(window).load(function() { 8 9//flexslider 10 11 jQuery('#top_slider').flexslider({ 12 animation: "<?php echo (get_option('expression_slideshow_type'))?get_option('expression_slideshow_type'):'slide'; ?>", 13 controlNav: true, 14 directionNav: <?php echo (is_smartphone())?'false':'true'; ?>, 15 animationLoop: true, 16 slideshow: true, 17 smoothHeight: true, 18 slideshowSpeed: <?php echo (get_option('expression_slideshow_time'))?get_option('expression_slideshow_time'):'2000'; ?>, 19 animationSpeed: <?php echo (is_smartphone())?'800':'1800';?> 20 }); 21 22}); 23</script> 24 25<div class="slider-wrapper theme-default"> 26 27/* =ここに上記htmlを追加しました-------------------------------------------------------------- */ 28 29<div class="slider-back"> 30<div id="top_slider" class="flexslider"> 31<ul class="slides"> 32 33<?php 34$i = 1; 35for($i=1 ; $i<7 ; $i++){ 36 37if(get_option('expression_slideshow_'.$i) != ''){ 38$link = get_option('expression_slideshow_link_'.$i); 39echo '<li>'; 40if($link != '')echo '<a href="'.$link.'">'; 41if(!is_smartphone()){ 42echo '<img src="'. get_option('expression_slideshow_'.$i).'" alt="" />'; 43}else{ 44$aid = get_id_from_filename(get_option('expression_slideshow_'.$i)); 45$arr = wp_get_attachment_image_src( $aid, 'large'); 46echo '<img src="'. $arr[0].'" alt="" />'; 47} 48echo (get_option('expression_slideshow_cap_'.$i))?'<div class="slide_cap">'.get_option('expression_slideshow_cap_'.$i).'</div>':''; 49if($link != '')echo '</a>'; 50echo '</li>'; 51} 52 53} 54?> 55</ul> 56</div> 57</div> 58</div> 59<?php 60} 61} 62?>

css

1#top_slider.flexslider { 2 margin:0 0 60px; 3 background:#fff; 4 border-top:none; 5 border-bottom:4px solid #eee; 6 border-left: none; 7 border-right: none; 8 position:relative; 9 10 border-radius:0px; 11 -webkit-box-shadow:none; 12 -moz-box-shadow:none; 13 -o-box-shadow:none; 14 box-shadow:none; 15 zoom:1 16} 17 18#top_slider .flex-viewport { 19 max-height:2000px; 20 margin:2px 0px 2px; 21 -webkit-transition:all 1s ease; 22 -moz-transition:all 1s ease; 23 -o-transition:all 1s ease; 24 transition:all 1s ease 25} 26 27#top_slider .loading .flex-viewport { 28 max-height:300px 29} 30 31#top_slider .flexslider .slides { 32 zoom:1 33} 34 35#top_slider .carousel li { 36 margin-right:5px 37} 38 39 40 41 42/* carousel_fudo_top_slider */ 43.carousel_inner{ 44 width: 99% !important; 45}

jQuery

1<?php if((is_front_page())){ 2if(get_option('expression_slideshow_display')=='yes'){ 3?> 4<script type="text/javascript"> 5/* script for top slider */ 6 7jQuery(window).load(function() { 8 9//flexslider 10 11 jQuery('#top_slider').flexslider({ 12 animation: "<?php echo (get_option('expression_slideshow_type'))?get_option('expression_slideshow_type'):'slide'; ?>", 13 controlNav: true, 14 directionNav: <?php echo (is_smartphone())?'false':'true'; ?>, 15 animationLoop: true, 16 slideshow: true, 17 smoothHeight: true, 18 slideshowSpeed: <?php echo (get_option('expression_slideshow_time'))?get_option('expression_slideshow_time'):'2000'; ?>, 19 animationSpeed: <?php echo (is_smartphone())?'800':'1800';?> 20 }); 21 22}); 23</script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

とりあえず、スライドショーのボックスとボタン部分のボックスをfloat:leftで浮かしてみてはどうでしょうか?でもfloatは高さを失うので、うまくやらないと崩れます。

こういうのは部分的に抜き出されても全体が見えず回答できませんし、全体を載せたら長文になって、見るほうも「うげー」ってなりますし、難しいところですね。(丸投げって言われてしまいますしね)
問題をもっと単純化したらいいと思います。スライドショー部分とボタン部分の仮のHTMLを作ってみるとか。

実際に稼働しているものを示していただくと、ソースを見て指摘できるんですけどね・・・

投稿2016/03/18 06:37

shi_ue

総合スコア4437

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

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

a_ya

2016/03/18 11:46

回答ありがとうございます。 仮のhtml作ってしてみようかと思います。 また質問させていただくかもしれませんが何とか試してみます。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問