以下の画像のようにトップページ記事一覧が記載されているブロックのクリック範囲を変えたいです。
現在は画像か文字の見出しをクリックしないといけないのですが、白い枠のブロックをどこでもクリックしたらページ以降する仕様にしたいです。できればccsで変えれればいいのですが、、、。
使用しているテンプレートは Simple Days です。
宜しくお願い致します。
以下コードでは画像と文字の間だけクリック範囲が広がりますがブロック全体には広がらないです。
ccs
1/*** クリック範囲 ***/ 2.entry_title:after{ 3 position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:rgba(0,0,0,0) 4}
ブロック部分の現在のhtmlとcss部分です。
html
1<article itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting" class="post_card f_box f_col box_shadow post-319 post type-post status-publish format-standard category-in-the-news"> 2 <header> 3 <meta itemprop="headline" content="hhbibilb;;;;;;;;;;;;;;;;"> 4<meta itemprop="datePublished" content="2019-04-13T17:16:08+09:00"> 5<meta itemprop="dateModified" content="2019-04-13T17:17:13+09:00"> 6<meta itemprop="url" content="http://raisu.com/2019/04/13/hhbibilb/"> 7<meta itemprop="thumbnailUrl" content="http://raisu.com/wp-content/themes/simple-days/assets/images/ogp.jpg"> 8 9<meta itemprop="image" content="http://raisu.com/wp-content/themes/simple-days/assets/images/ogp.jpg"> 10<div itemprop="author" itemscope="" itemtype="https://schema.org/Person"> 11 <meta itemprop="name" content="mynews"> 12</div> 13<div itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization"> 14 <div itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject"> 15 <meta itemprop="url" content="http://raisu.com/wp-content/themes/simple-days/assets/images/logo.png"> 16 </div> 17 <meta itemprop="name" content="raisu"> 18</div> 19<meta itemprop="mainEntityOfPage" content="http://raisu.com/2019/04/13/hhbibilb/"> 20 <meta itemprop="articleSection" content="RARARA"> 21 </header> 22 23 <div class="post_card_thum"> 24 <a href="http://raisu.com/2019/04/13/hhbibilb/" class="fit_box_img_wrap post_card_thum_img"> 25 <img src="https://pbs.twimg.com/media/D4BIM-iWwAAoeNY.jpg" width="640" height="480" class="scale_13 trans_10" alt="hhbibilb;;;;;;;;;;;;;;;;" title="hhbibilb;;;;;;;;;;;;;;;;"> </a> 26 </div> 27 28 <div class="post_card_meta w100 f_box f_col jc_sa"> 29 <h2 class="post_card_title"><a href="http://raisu.com/2019/04/13/hhbibilb/" class="entry_title" title="hhbibilb;;;;;;;;;;;;;;;;">hhbibilb;;;;;;;;;;;;;;;;</a></h2> 30 31 <div class="summary" itemprop="articleBody"> 32 33 </div> 34 35 36 </div> 37 38 </article>
css
1@media screen and (max-width: 700px) 2.grid_3 article { 3 margin-left: 20px; 4 margin-right: 20px; 5}
回答1件
あなたの回答
tips
プレビュー