注目の記事 PICK UP!

TCDのIZM買ったはいいけど携帯で表示した時だけ記事が左寄せになったりで色々厳しい

 

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動画の表示が右に突き抜けないようになります

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

TCDのIZMのカスタマイズ

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

恐らくこの記事に辿り着いた時点で既に使ってる状態だと思いますが、扱いきれずに不自由しているのであれば個人的にはAFFINGER6(アフィンガー)がお勧めです

AFFINGER6を見る

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

   
   


関連記事

  1.    ː̗̀(☉.☉)ː̖́<思考停止は衰退の始まりですよ

    ː̗̀(☉.☉)ː̖́<思考停止は衰退の始まりですよ

  2.    服400着貰ったからメルカリ始めたんだけど

    服400着貰ったからメルカリ始めたんだけど

  3.    パパ活女子の裏事情

    パパ活女子の裏事情

  4.    ランサーズでライター募集したら5人来てくれたけど

    ランサーズでライター募集したら5人来てくれたけど

  5.    多分コロナ延期するだろこれ。夜職女子はとりあえず在宅で働くしかないのでは

    多分コロナ延期するだろこれ。夜職女子はとりあえず在宅で働くしかないのでは

  6.    関係を続けるのがきつい人の特徴

    【経験論】関係を続けるのがきつい相手の特徴

  7.    姓名判断ってほんと胡散臭い

    姓名判断ってほんと胡散臭い

  8.    感情を抑える事が癖になりすぎると辛さは薄れるが

    感情を抑える事が癖になりすぎると辛さは薄れるが

  9.    【それも人生】それは誤解され続けてるんじゃなくて解り合えないだけなんだということ

    【それも人生】それは誤解され続けてるんじゃなくて解り合えないだけなんだということ

PAGE TOP