注目の記事 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.    絶対に関わらない方がいい人種

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

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

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

  3.    月100万じゃ全然足らないんですわ

    月100万じゃ全然足らないんですわ

  4.    

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

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

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

  6.    都合の良い女

    外見良ければ中身磨かなくていいなんてそんな都合の良い話ないから

  7.    今まで付き合った男が全員クズだったなんてことある?

    今まで付き合った男が全員クズだったなんてことある?

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

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

  9.    給付金

    【申請終わった】新型コロナウイルスの給付金の使い道

PAGE TOP