■やりたいこと
slickというプラグインを使ってピックアップ記事をスライダーにしたい
■問題点
画像とタイトルをクリックしたら記事詳細ページにいくように設定していたのだが、作業して見た目を整えていたらいつの間にかリンク先に飛べなくなっていた。
php
1<div class="mv-area"> 2 <div class="mv-container"> 3 <div class="slick"> 4 <?php 5 $args = array( 6 'posts_per_page' => 5, // 表示件数の指定 7 'tag' => 'pickup', 8 ); 9 $posts = get_posts($args); 10 foreach ($posts as $post) : 11 setup_postdata($post); // 記事データの取得 12 ?> 13 <div class="mv"> 14 <div class="mv__inner"> 15 <div class="mv__ph thumbnail"> 16 <a href="<?php the_permalink(); ?>"> 17 <img src="<?php the_post_thumbnail_url("post-full"); ?>" alt=""> 18 </a> 19 </div> 20 <div class="mv__txt"> 21 <div class="mv__txt__new"> 22 <h2 class="mv__txt__pickup">PICK UP</h2> 23 </div> 24 <?php 25 $category = get_the_category(); 26 $cat = $category[0]; 27 28 //カテゴリー名 29 $cat_name = $cat->name; 30 31 //カテゴリーID 32 $cat_id = $cat->cat_ID; 33 34 //カテゴリースラッグ 35 $cat_slug = $cat->slug; 36 ?> 37 <div class="mv__txt__info"> 38 <div class="mv__txt__info__cat cat-<?php echo $cat_slug; ?>"> 39 <?php echo $cat_name; ?> 40 </div> 41 <time class="mv__txt__info__data"><?php the_time('Y.m.d'); ?></time> 42 </div> 43 <h2 class="mv__txt__ttl"> 44 <a href="<?php the_permalink(); ?>"> 45 <?php the_title(); ?> 46 </a> 47 48 </h2> 49 </div> 50 </div> 51 </div> 52 <?php endforeach; 53 wp_reset_postdata(); ?> 54 </div> 55 </div> 56 57</div>
css
1.mv-area{ 2 max-width: 1024px; 3 margin: 0 auto; 4} 5 6.mv-container{ 7 background-color: #F8F9FA; 8 position: relative; 9 z-index: -1; 10 padding: 30px 0; 11} 12 13.mv__inner{ 14 display: flex; 15 justify-content: space-around; 16 17} 18 19.mv__ph{ 20 21} 22 23.thumbnail{ 24 display: block; 25 width: 500px; 26 margin-bottom: 20px; 27 border-radius: 4px; 28} 29 30.thumbnail a { 31 32 position: relative; 33 display: inline-block; 34 width: 500px; 35} 36 37.thumbnail a img{ 38 39 position: relative; 40 display: inline-block; 41 width: 500px; 42} 43 44.thumbnail a::after { 45 position: absolute; 46 display: block; 47 content: ""; 48 top: 0; 49 left: 0; 50 width: 100%; 51 height: 100%; 52 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 53 transform: rotate(3deg); /* 回転させる */ 54 z-index: -1; 55} 56 57.mv__txt__pickup{ 58 font-size: 2.5rem; 59} 60 61.mv__txt__info{ 62 display: flex; 63} 64 65.mv__txt{ 66 width: 45%; 67 padding-left: 20px; 68 margin-top: 40px; 69 position: relative; 70} 71.mv__txt__ttl { 72 margin-top: 10px; 73 font-size: 1.3em; 74 font-weight: normal; 75 line-height: 1.5; 76 color: #333; 77} 78 79.mv__txt__ttl a{ 80 color: #333; 81 82} 83 84.mv__txt__new { 85 margin-top: 20px; 86} 87 88.mv__txt__info { 89 margin-top: 20px; 90} 91 92.mv__txt__info__cat { 93 padding-top: 2px; 94 font-size: 1.2em; 95} 96 97.mv__txt__info__data { 98 margin-left: 6px; 99 padding-top: 4px; 100 font-size: 1em; 101 font-weight: 200; 102} 103 104.slick-dots{ 105 margin-left: 30px; 106}
js
1$(function () { 2 3 $('.slick').slick({ 4 autoplay: true, 5 autoplaySpeed: 6000, 6 dots: true, 7 fade: true, 8 arrows: false, 9 speed: 1000, 10 infinite: true 11 }); 12 13 14 15}); 16 17
■補足
デベロッパーツールで見たらリンク先は正常に取得できていてリンクをクリックしたら飛べました。
しかし画像とタイトルにカーソルを持っていってもマウスの形が変わらずクリックできないです。
あなたの回答
tips
プレビュー