キャリア分岐


ピンチによる拡大縮小が出来ない
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

ピンチによる拡大縮小を出来るようにする
<meta name="viewport" content="width=device-width,initial-scale=1.0">


※レスポンシブで画面がガタガタする場合の解決方法！
画面右側に空白が出来る場合は、画面全体にoverflow: hidden;をかける

article{
		overflow: hidden;
}

※PC画面でwidthを指定したら一緒に　max-width: 100%;　を指定してあげる。これで画面が小さくなると一緒に小さくなる！


img{
	border:none;
	display:block;
	max-width: 100%;
	width:100%;
	height: auto;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

※imgにmax-width: 100%;とwidth:100%;　で画面幅に収まるようにする！
※box-sizing: 　paddingが中に余白をつくるようになる！便利

/* --------------------------

     小型タブレット端末（スマホのみに適応）

-------------------------- */

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

} 


/* --------------------------

     PC端末とタブレッド端末

-------------------------- */ 

@media screen and (min-width: 482px) {

}


min-width　→　○px以上だと〜〜という設定にする

max-width　→　○px以下だと〜〜という設定にする


スマホの縦向きと横向きで指定する場合の設定
@media screen and (max-width: 745px)  { }//スマホ用
@media screen and (min-width: 746px) { }//PC用
@media (orientation: landscape){ }//デバイスが横向きの場合
▲このページのTOPに戻る▲

/* --------------------------

     全端末共通のCSS

-------------------------- */
aside,section,article{display:block;}

img{
	border:none;
	display:block;
	max-width: 100%;
    height: auto;
}





body{
	color:#000000;
	font-family:"Century Gothic",Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size:14px;
	font-weight:normal;
	text-align:center;
	line-height:180%;
	-webkit-text-size-adjust:100%;
}


html{
	overflow-y: scroll;
	overflow-x: hidden;
}

html,body{
	width: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

textarea,input{ max-width: 95%; }

input[type="submit"],input[type="image"],
input[type="reset"],input[type="button"],
input[type="file"]{ max-width: none; }


/*--------------------------------------------------------
コンテンツ全体
--------------------------------------------------------*/
section{text-align:left;}
section p{
	width: 98%!important;
	margin: 0 1% 30px 1%!important;この一文で画面が中央による！！すごい！！
}

.fbig01{font-size:17px; line-height:190%; font-weight:bold;}
.fbig02{font-size:20px; line-height:190%; font-weight:bold;}
.fbig03{font-size:25px; line-height:190%; font-weight:bold;}


/*--------------------------------------------------------
aタグのリンク範囲
--------------------------------------------------------*/
a{-webkit-tap-highlight-color: #fc6;}


/*--------------------------------------------------------
paddingの余白に依存しない
--------------------------------------------------------*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
▲このページのTOPに戻る▲

★ＰＣ版
/*Youtube動画*/
.youtube iframe{
	width:560px;
	height:350px;
	margin:0 auto;
}



★スマホ版
/*Youtube動画*/
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
▲このページのTOPに戻る▲

WordPressでは「wp_is_mobile();」を使用することでスマートフォン・PCでの出力タグを切り替えることができる。


★スマートフォンでのみ表示
<?php if ( wp_is_mobile() ) {
    スマートフォンで表示させるコンテンツ
} ?>


★反対にスマートフォン以外で表示
<?php if ( !wp_is_mobile() ) {
    スマートフォン【以外】で表示させるコンテンツ
} ?>

★上記を踏まえてif文で振り分け
<?php if (is_mobile()) : ?>
  // スマートフォン用コンテンツ
<?php else: ?>
  // PC・タブレット用コンテンツ
<?php endif; ?>


これにfunctions.phpにスマホとPC・タブレットのみに条件分岐できるように記述する。
function is_mobile() {
  $useragents = array(
    'iPhone',          // iPhone
    'iPod',            // iPod touch
    'Android',         // 1.5+ Android
    'dream',           // Pre 1.5 Android
    'CUPCAKE',         // 1.5+ Android
    'blackberry9500',  // Storm
    'blackberry9530',  // Storm
    'blackberry9520',  // Storm v2
    'blackberry9550',  // Storm v2
    'blackberry9800',  // Torch
    'webOS',           // Palm Pre Experimental
    'incognito',       // Other iPhone browser
    'webmate'          // Other iPhone browser
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
▲このページのTOPに戻る▲