注目の記事 PICK UP!

【解決済】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%;
}

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

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

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'); ?>

これを追記する(index.phpの中に)

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

CSSに↓これ

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

高さ(height)は好みで

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

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

/*携帯で見た時のスライダー画像のサイズ変更*/
@media (max-width: 770px){
.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%;
}

これやっとけば右に突き抜けて表示されない

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

TCDのIZMのカスタマイズ

デザインとかレイアウトはかなりクオリティ高め
無料テーマで1から自分でここまでやろうと思うと普通に数ヶ月かかるレベルなんで、効率良くやりたい人にはいいと思う

1万2000円なんて1日働けばペイできるからね

IZMを見てみる

コメント

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

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

   


関連記事

  1.    まさか自分がコロナのPCR検査を受ける事になるとは

    まさか自分がコロナのPCR検査を受ける事になるとは

  2.    バレンタイン

    死のバレンタイン

  3.    

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

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

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

  5.    

    鬼滅めっちゃ流行ってるけど

  6.    

    パパ活女子の裏事情

  7.    

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

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

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

  9.    クリッパーナクレ

    昨日楽しかったね←わかる

PAGE TOP