日: 2018年5月15日

CSSのみで変更可能

スマホサイズは

背景画像変更

@media screen and (max-width: 736px) {
.sl1{
	background-image: url(/wp-content/themes/D/d/img/slider/slide1s.jpg);
	}
	
	.sl2{
	background-image: url(/wp-content/themes/D/d/img/slider/slide2s.jpg);
	}
}

@media screen and (max-width: 736px) {
/*	スマホ別画像 */
#main_contents_top_fade:before,
.viewer ul:before {	
	    padding-top: 61%; /* 1200で400の高さ */
}

}

ちなみにこの場合は
スマホ
542 ×　333

https://teratail.com/questions/30219

$posttags = get_the_tags();
$count=0;
if ($posttags) { 
  foreach($posttags as $tag) {
    $count++;
    if ($count > 3) break; 
    echo '<a href="'. get_tag_link($tag->term_id) .'">'. $tag->name .' ('. $tag->count .")</a>\n";
  }
}

を参考

<div style="margin-bottom:-44px; padding-top:44px; font-size:12px;" class="d_tag">
 

 <?php 
 $posttags = get_the_tags();
$count=0;
if ($posttags) { 
  foreach($posttags as $tag) {
    $count++;
    if ($count == 42) : echo'<span class="tag_close">More..</span><div class="tag_close_con">'; endif;
    echo '<a href="'. get_tag_link($tag->term_id) .'">'. $tag->name 
		//.' ('. $tag->count 
		."</a>
	";
	  
	
  }
	  if ($count >= 42) : echo'</div>'; endif;
}
	
?>
 
  <?php// the_tags('タグ : ',' '); ?>
</div>

//ブログ　シングル

	.d_tag{
a ,.tag_close{
 font-size: 10px !important; /* 文字のサイズ */
 line-height: 1em;
 background: #ccc; /* 背景色 */
 color: #fff; /* 文字色 */
 display: inline-block;
 white-space: nowrap;
 padding: 8px 8px; /* 文字周りの余白 */
 margin-top: 3px; /* タグ同士の余白 */
 border-radius: 4px; /* 角を少し丸く */
 text-decoration: none;
}
a:hover ,.tag_close:hover{
 background: #f9d635; /* マウスホバー時の背景色 */
 color: #2098a8; /* マウスホバー時の文字色*/
}
	
	a:before {
font-family:'fontello';
content: '\e856';
 padding-right: 4px;
}
		
	.tag_close{
	cursor: pointer; display: inline-block;}
	.tag_close_con{display: none;}
	}

こいつはヘッダーに
roopに入れると記事全部読むでオープン・クローズが繰り返される

<!--タグのmore-->
 <script>
	$(function(){
		$(".tag_close").on("click", function() {
			$(this).next().slideToggle();
		});
	});
</script>