月: 2024年12月

タブレット問題 iPad（10th Gen）820×1180 iPad Air　820×1180 iPad mini6　744×1133 https://www.genz.jp/useful_information/ipad_size_quickreferencematrix/

 

横にしたとき 10インチアイフォンで

ヘッダーメニューを1180までに収めないといけない

と思ったが、

タブレットの場合のみ、 ヘッダーが1300で全部見えるなら、 1300のビューポートにすることで対応

 

<?php if (is_mobile()) : ?>

<script type="text/javascript">
var meta = document.createElement('meta');
var link = document.createElement("link");
meta.setAttribute('name', 'viewport');
link.rel = "stylesheet";


//  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');


//これだと　モバイルフレンドリーテストが合格しにくいだから↑　そのまま

if (window.orientation !== 0) {
//meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
}
else{
meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
}  



document.getElementsByTagName('head')[0].appendChild(meta);
document.getElementsByTagName("head")[0].appendChild(link);
</script>

<?php elseif(wp_is_mobile())://タブレットのviewport ?> 
    <script type="text/javascript">
var meta = document.createElement('meta');
var link = document.createElement("link");
meta.setAttribute('name', 'viewport');
link.rel = "stylesheet";


    meta.setAttribute('content', 'width=1300px,maximum-scale=1.0');

 document.getElementsByTagName('head')[0].appendChild(meta);
document.getElementsByTagName("head")[0].appendChild(link);
</script>

<?php else: //pc ?>
<script type="text/javascript">
var meta = document.createElement('meta');
var link = document.createElement("link");
meta.setAttribute('name', 'viewport');
link.rel = "stylesheet";


    meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
// link.href = "<?php echo get_template_directory_uri(); ?>/style.css";

document.getElementsByTagName('head')[0].appendChild(meta);
document.getElementsByTagName("head")[0].appendChild(link);
</script>


<?php endif; ?>

<?php //メモ
//window.orientation == 0 回転していない

?>

 

 

 

なので、できるだけ、1200くらいで収まるように作ったほうがいいけど でもまあ 案件によるな

ただ親を出すだけの場合

<div  class="jirei_other_cat">
    <h4 class="h4_style title_class2 display_table">素材カテゴリ</h4>
 <ul class="single_foot_menu">
     <?php wp_list_categories(
 array(
 'title_li' => '',
 'hide_empty'         => 0,
'taxonomy' => 'built-cat',
'depth'              => 1 , //-1
'orderby' => 'menu_order',//順番は指定します
//'exclude'=> array(2,5)
)
); ?>
    
  </ul>  
    </div>

子も出す　記事がないカテゴリは非表示

    <?php ///////////////////////// 子も出す　//////////////////////////// ?>

<?php $trem = 'built-cat';

$hide_empty = 'true';

?>


      
    <div  class="jirei_other_cat">
    <h4 class="h4_style title_class2 display_table">車メーカー</h4>
 <ul class="single_foot_menu">
     <?php wp_list_categories(
 array(
 'title_li' => '',
 'hide_empty'         => $hide_empty,
'taxonomy' => $trem,
'depth'              => 1,
'orderby' => 'menu_order',//順番は指定します
//'exclude'=> array(2,5)
)
); ?>
    
  </ul>  
       
        





        <?php
        //wpリストカテゴリで子カテゴリがある場合、並び順を親の次に並ばせたいのでdeaps -1　では再現できなく、仕方なく、親のチルドレンを無理やり同じリストのように表示させると モバイル再現できず
        //なので
        //タクソノミーphpで タームに子があれば、親を取得して、リストを出す 一応なんとかこれで納得
$term_object = get_queried_object(); // タームオブジェクトを取得
        
//        	echo "<pre>";
//	print_r($term_object);
//	echo "</pre>";
        
   $parent_id =  $term_object->parent;   
    if($parent_id): 
?>
        
        <ul class="single_foot_menu">
     <?php wp_list_categories(
 array(
 'title_li' => '',
 'hide_empty'         => $hide_empty,
'taxonomy' => $trem,
'depth'              => 1,
'child_of'           => $parent_id,
'orderby' => 'menu_order',//順番は指定します
//'exclude'=> array(2,5)
)
); ?>
    
  </ul>  
        
        <?php endif;

//親ページで子のリストもだしたいなあ
//指定したIDの情報を返してくれる
 $term_id =  $term_object->term_id;  
$taxonomy_name =  $term_object->taxonomy; 
$term_child = get_term_children( $term_id, $taxonomy_name);
        
//        	echo "<pre>";
//	print_r($term_child);
//	echo "</pre>";	
        
     if($term_child): //子があれば
?>

<ul class="single_foot_menu">
     <?php wp_list_categories(
 array(
 'title_li' => '',
 'hide_empty'         => $hide_empty,
'taxonomy' => $trem,
'depth'              => 1,
'child_of'           => $term_id,
'orderby' => 'menu_order',//順番は指定します
//'exclude'=> array(2,5)
)
); ?>
    
  </ul>  
        
        <?php endif; ?>
        
<br><br>
    </div>	

 

実績ギャラリーで、②カラム化して、　これでいけなかったけど、

@media screen and (max-width: 1499px) {

    .flickSlider .flickView ul li img.car_big {
        width: auto;
        max-width:100%;
         //max-height:262px;
     }


}

$(function(){
    $(window).load(function(){
        var setWrap = $('.flickSlider'),//スライダー全体を囲うブロック要素名（IDでも可）
        setMainView = $('.flickView'),//メインビジュアル部分を囲うブロック要素名（IDでも可）
        setThumbNail = $('.flickThumb'),//サムネイル部分を囲うブロック要素名（IDでも可）
        setMaxWidth = 5000,//スライダー部分の最大幅
        setMinWidth = 320,//スライダー部分の最小幅
・・・


setMaxWidth = 5000,//スライダー部分の最大幅　
これを800にしたら800からワイド100%になることを発見

5000にすれば大概大丈夫

でも上記CSSもいるみたい。コンテンツ幅が1500MAX で作成してるから、

1500以下はイメージはオートだよってやつもいるみたいね。

だからってsetMaxWidth = 1500,//スライダー部分の最大幅

にすると、1500以上伸ばしたときに、 画像が今度はデカくなりすぎる