Q&A
WordPressで動画ポータルサイトの構築を行っています。
現在、トップページのデザインをスマートにするために、最初のビューではサムネイルのみが出現しているようなレイアウトにし、マウスオーバーしてはじめて、titleや任意のHTMLタグを付与したテキストが表示されるような仕様にできればと思っています。
#現在のトップページ
PHP
1<?php get_header(); ?> 2 3 4<div id="page"> 5 <div class="content"> 6 <article class="article"> 7 <div id="content_box"> 8 <h3>NEW </h3> 9 <div class="map"> 10 <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 11 12 <div class="post excerpt <?php echo (++$j % 3 == 0) ? 'last' : ''; ?>"> 13 <header> 14 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="nofollow" id="featured-thumbnail"> 15 <?php if ( has_post_thumbnail() ) { ?> 16 <?php echo '<div class="featured-thumbnail">'; the_post_thumbnail('homepage',array('title' => '')); echo '</div>'; ?> 17 <?php } else { ?> 18 <div class="featured-thumbnail"> 19 <img width="200" height="110" src="<?php echo get_template_directory_uri(); ?>/images/nothumb.png" class="attachment-featured wp-post-image" alt="<?php the_title(); ?>"> 20 </div> 21 <?php } ?> 22 </a> 23 <h2 class="title"> 24 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a> 25 </h2> 26 </header><!--.header--> 27 <?php $matches = null; 28 preg_match('#<span[^>]*>(.*)</span>#', get_the_content(), $matches); 29 echo $matches[1]; ?> 30 <div class="readMore"><div class="background"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php _e('インタビューを見る','mythemeshop'); ?></a></div></div> 31 32 </div><!--.post excerpt--> 33 <?php endwhile; else: ?> 34 <div class="post excerpt"> 35 <div class="no-results"> 36 <p><strong><?php _e('There has been an error.', 'mythemeshop'); ?></strong></p> 37 <p><?php _e('We apologize for any inconvenience, please hit back on your browser or use the search form below.', 'mythemeshop'); ?></p> 38 <?php get_search_form(); ?> 39 </div><!--noResults--> 40 </div> 41 <?php endif; ?> 42 <?php if ($options['mts_pagenavigation'] == '1') { ?> 43 <?php pagination($additional_loop->max_num_pages);?> 44 <?php } else { ?> 45 <div class="pnavigation2"> 46 <div class="nav-previous"><?php next_posts_link( __( '← '.'Older posts', 'mythemeshop' ) ); ?></div> 47 <div class="nav-next"><?php previous_posts_link( __( 'Newer posts'.' →', 'mythemeshop' ) ); ?></div> 48 </div> 49 <?php } ?> 50 </div> 51 </div> 52 </article> 53 54<?php get_footer(); ?>
#参考サイト
http://bunkai-kei.com/
このサイトのような挙動ができればと思っています。
もし、実装の経験がある方がいましたら、ぜひアドバイスお願いします。
回答1件
0
ベストアンサー
こんんちは！
サイトの中のソース見るのが一番かとは思いますが一応独自のやつを
(あなたのコードをまんま使ってないので良きに理解いただければと。。。)
css
1 ul{ 2 list-style: none; 3 font-size:0px; 4 } 5 li{ 6 display: inline-block; 7 box-shadow: 0px 0px 0px 1px #000000 inset; 8 width: 200px; 9 height:200px; 10 position: relative; 11 margin:2px; 12 } 13 a{ 14 display: block; 15 width: 100%; 16 height:100%; 17 } 18 .img{ 19 position: absolute; 20 background-color: #eeeeee; 21 width: 100%; 22 height:100%; 23 } 24 .txt{ 25 background-color: rgba(0,0,0,0.3); 26 position: absolute; 27 display: none; 28 top:0px; 29 left:0px; 30 color:#ffffff; 31 width: 100%; 32 height:100%; 33 font-size:16px; 34 text-align: center; 35 } 36 li:hover .txt{ 37 display: block; 38 }
html
1<ul> 2 <li> 3 <a href=""> 4 <div class="img"></div> 5 <div class="txt"> 6 <p>テストテストテスト</p> 7 <p>テストテストテスト</p> 8 <p>テストテストテスト</p> 9 <p>テストテストテスト</p> 10 </div> 11 </a> 12 </li> 13 <li> 14 <a href=""> 15 <div class="img"></div> 16 <div class="txt"> 17 <p>テストテストテスト</p> 18 <p>テストテストテスト</p> 19 <p>テストテストテスト</p> 20 <p>テストテストテスト</p> 21 </div> 22 </a> 23 </li> 24</ul>
css周りとかもっときれいにかけるのでいじってみてください。
liの箱の中で常時表示していた物、hover時に表示したい物を用意します。
そんで、大枠にhoverしてないときに表示させたくないものは
displayやopacityなどで消しといてliにhoverしたタイミングで表示されるようにcssに書いてあげます。
cssアニメーションとかと組み合わせてあげればもっとスタイリッシュな表示の切り替えになると思うのでがんばってください。
投稿2016/06/29 02:19
総合スコア299
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。