モバイル表示では日付の位置が変でした。
私のテンプレートでは、
投稿日付が、投稿タイトルの上に表示されます。
これがモバイルだと、上のページタブに重なってしまい、
何とも不格好になります。
別に投稿日付はモバイル表示では要らないので
いっそはずしてしまいました。
要らないコンテンツは省いてしまう
実は、本来この日付の位置を下へずらそうとしたのです。
そうすれば、ページタブに乗っからないで
上手く表示されるからです。
これを何度も繰り返し修正したのですが、
結局できなかったという経緯があります。
おそらく、
date-header
はPCもモバイルも同じCSSを使っているのではないかと思います。
モバイルのみに指定をしようとしても、
うまくいきませんでした。
下の投稿内容の位置をずらすのは失敗したらこわいので
やりませんでした。
詳細は、結局わからずじまいです。
色々いじるより、
モバイルだけで非表示にすることにしました。
でははじめましょう。
まず、テンプレート編集へいきます。
以下のコードを探して下さい。
1つしかありませんので見つかると思います。
<b:includable id='mobile-post' var='post'>
<div class='date-outer'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<div class='date-posts'>
<div class='post-outer'>
この中の赤字部分が、
日付を表示させるコードです。
これをまるごと削除したのが以下です。
このように変更しました。
<b:includable id='mobile-post' var='post'>
<div class='date-outer'>
<div class='date-posts'>
<div class='post-outer'>
あっさり消してしましましたが、
テンプレートはキレイに表示されています。
気になる方は、この方法を試して見て下さい。
一度消してしまうと、後で追加する時大変なので、
必ずコードはバックアップを残しておきましょう。
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）
スポンサードリンク