質問お願いします。
今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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/03/18 11:46