TCDのデモサイトでIZMを見て『1万2000円でこのクオリティならいいな』と思って買ったはいいけど、最初からあのレイアウトなわけじゃないから注意したい

管理人

最初からあのデザインだと思ってた

しかもTCDが公開してる解決法も2016年とかでそれでは解決できず、仕事帰りに睡眠削ってようやく解決したんで同じような内容で困ってる人用に載せときます

携帯で見た時だけ
本文が勝手にリサイズされて
パカパカなる

タイトルにあるやつ

携帯で見ると本来記事自体が綺麗に中央寄せになってるはずが勝手に左側に寄せられて膨張と縮小を繰り返して訳わからん状態になるので

解決策としてはheader.phpの

<meta name="viewport" content="width=device-width">

これを

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

これに変える

で、CSSに

body {
-webkit-text-size-adjust: 100%;
}

これを記述すれば多分直ると思う（俺は直った）

もし出来ない場合は↓を1回試してみてください

	/*グラグラを消す*/
body {
    overflow-x: hidden!important;
}

携帯にもサイドバーを
表示させる方法

TCDの他のテーマは分からんけどIZMは非表示がデフォらしいんで、index.phpの

<?php if( !is_mobile() || is_no_resposive() ) { ?>
<?php get_template_part(''); ?>
<?php if($options['layout'] == 'type3'||$options['layout'] == 'type4') { get_template_part('sidebar2'); }; ?>
<?php }; ?>

↑これを

<?php get_template_part(''); ?>
<?php if($options['layout'] == 'type3'||$options['layout'] == 'type4') { get_template_part('sidebar2'); }; ?>

これに変えて、その下に

<?php get_sidebar('sidebar'); ?>
<?php get_sidebar('sidebar2'); ?>

これを追記する

PCで見た時だけ
ヘッダー画像がでかい

CSSに↓これ

/*PCにだけヘッダー画像サイズ変更を適用させる*/
@media screen and (min-width: 980px) {
.image {
height: 400px;
}
}　

高さ（height）は好きなように調節すればいいんじゃないかな

スマホで見た時にスライダー画像を
綺麗に表示させる

PCだとレイアウトに何の問題もないけど、スマホで見るとヘッダー下のスライダー画像が長方形になって嫌な人は

/*携帯で見た時のスライダー画像のサイズ変更*/
@media (max-width: 768px){
.recommend_slider .image img {
    width: 100%;
    height: auto;
	}
	}

これで正方形に変更できます

記事内のアイキャッチを
非表示にする
（謎の空欄も残らない）

普通なら

#post_image img { display: none; }

これでアイキャッチが消えて空欄も残らないはずなんだけど何故か空欄が残るので、single.phpの

<?php if(has_post_thumbnail() && $page=='1') { ?>
  <?php if($options['show_thumbnail']) { ?>
  <div id="post_image">
   <?php if ($options['layout'] == 'type1' || $options['layout'] == 'type2') { the_post_thumbnail('size6'); } else { the_post_thumbnail('size5'); }; ?>
  </div>
  <?php }; ?>
  <?php }; ?>

↑この中の

<div id="post_image">
   <?php if ($options['layout'] == 'type1' || $options['layout'] == 'type2') { the_post_thumbnail('size6'); } else { the_post_thumbnail('size5'); }; ?>
  </div>

この部分だけ削除すれば空欄が残らずにアイキャッチ画像も出てこない

見出し（h2,h3）を
カスタマイズ

普通ならそのままh2とかh3で指定すればいいんだけどIZMの場合はデフォルトの状態でクラスが指定されてるんで、これだけだと何も変わらないようになってます

なのでカスタマイズの仕方としては、記事投稿画面のHTMLの方には

<h2 class="style2a">ここに見出しのタイトル</h2>

これを書いて、CSSの方に

/* h2見出し */
.post_content .style2a { 	
ここにコード入れる
}

このクラスで指定すればいけます

h3の場合は

<h3 class="style3a">ここに見出しのタイトル</h3>

/* h3見出し */
.post_content .style3a { 
ここにコード入れる
}

これ

youtubeのレスポンシブ化

/*youtubeレスポンシブ*/
.youtube iframe{
  width: 100%;
}

これをやっておけば携帯でyoutube動画の表示が右に突き抜けないようになる

これだけやっとけば形にはなる

IZMに限らずTCDのテーマはデザインとかレイアウトはかなりクオリティが高いんだけど、ちょっとクセがあるから正直初心者向きではないとは思う

この記事に辿り着いた時点で既に使ってる状態かもしれないが、カスタマイズがしんどいなら個人的にはAFFINGER6（アフィンガー）がお勧め

管理人

クセがなくて数倍簡単

AFFINGER6を見る