注目の記事 PICK UP!

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

当サイトにはPRが含まれています

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.    【それも人生】それは誤解され続けてるんじゃなくて解り合えないだけなんだということ

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

  3.    絶対に関わらない方がいい人種

    【経験談】関わると超絶しんどい人種4つ

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

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

  5.    mylord

    法人化してないからco.jp使えないんだったわ

  6.    キラキラ王子様系男子

    連れの王子がお前だけは白馬に乗せないって言ってた

  7.    パパ活女子の裏事情

    パパ活女子の裏事情

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

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

  9.    年収別手取り金額一覧

    年収と手取り、パパ活に使える予算はある程度予想しておこう

PAGE TOP