2015年4月9日

投稿記事ページで、ヘッダー下の日付を非表示にする方法。モバイル表示で。

スポンサードリンク

 PC表示では気にならなかったのですが、
モバイル表示では日付の位置が変でした。

私のテンプレートでは、
投稿日付が、投稿タイトルの上に表示されます。

これがモバイルだと、上のページタブに重なってしまい、
何とも不格好になります。

別に投稿日付はモバイル表示では要らないので
いっそはずしてしまいました。


要らないコンテンツは省いてしまう


 実は、本来この日付の位置を下へずらそうとしたのです。
そうすれば、ページタブに乗っからないで
上手く表示されるからです。

これを何度も繰り返し修正したのですが、
結局できなかったという経緯があります。


 おそらく、

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'>


 あっさり消してしましましたが、
テンプレートはキレイに表示されています。


 気になる方は、この方法を試して見て下さい。
一度消してしまうと、後で追加する時大変なので、

必ずコードはバックアップを残しておきましょう。



 当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。


また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。(わからんから)


スポンサードリンク