前の関連記事：Blogger:モバイルサイト(5)textareaの幅を自動調節されるようにする
モバイルサイトでも更新日時の表示をさせます。ヘッダーまわりも改造します。
(2016.11.27追記。Blogger:表示速度向上のためCSSとJavaScriptの置き場を考える:その4でdocument.write()を使わない方法に書き換えました。)
モバイルサイトのテンプレートを編集
現在こうなっているモバイルサイトのアイテムページのヘッダーを変更したいと思います。
日付ヘッダーは表示させない、公開日時、更新日時を投稿タイトル下に表示させる、その下にラベルを表示、をします。
モバイルサイトはPCサイトとは別のテンプレートで表示されていますのでそれを編集します。
管理画面→テンプレート→HTMLの編集、ウィジェットへ移動→Blog1でブログの投稿ウィジェットをみます。
日付ヘッダーを表示させない
モバイルサイトの投稿部分は<b:includable id='mobile-post' var='post'>にあります。
<!--<h2 class='date-header'><span><data:post.dateHeader/></span></h2>--><!--と-->で挟んでこの日付ヘッダー部分をコメントアウトします。
これでアイテムページの日付ヘッダーが表示されなくなりました。
モバイルサイトはインデックスページは別の部分で描かれているので、そこもついでに編集してしまいます。
<b:includable id='mobile-index-post' var='post'>の中です。
<!--<span><data:post.dateHeader/></span>-->同じように最初にでてくるdateHeaderをコメントアウト。
これで日付ヘッダーが表示されなくなりましたが、そこの空間が残ったままです。
さらにタイトルをもう少し幅いっぱいに表示させたいです。
Blogger:モバイルサイト(4)ChromeでモバイルサイトのナビボタンをカスタマイズでしたようにパソコンのChromeのUser AgentのOverridesをiOS5にしてCSSの変更点を探します。
①タイトルの幅は<h3 class="mobile-index-title entry-title" itemprop="name">にかかっている.mobile-index-titleのwidth:120pxを無効にすれば広がることがわかりました。
②タイトル上の空間は<div class="mobile-date-outer date-outer">にかかっている.date-outerのpadding-top:10px;を変更すればよいことがわかりました。
まず①から変更します。
<b:skin>の中をみても.mobile-index-titleのCSSがでてきません。
どこで定義されているのかわかりませんが、上書きするようにCSSを加えました。
右側にべったり張り付くのを防ぐためpadding-right: 10pxも加えました。
.mobile-index-title.entry-title{
width: auto;
padding-right: 10px;
}
②は以下でいけました。
.mobile-date-outer.date-outer{
padding-top: 0px !important;
}
こんなふうになりました。
公開日時、更新日時を投稿タイトル下に表示させる
まずはアイテムページである<b:includable id='mobile-post' var='post'>の中の<div class='post-header-line-1'/>をBlogger：レイアウト編集(9)各投稿の更新日時の表示をする（成功編）と同じように書き換えます。
モバイルサイトはインデックスページは異なるインクルードで描画しているのでここではアイテムページのコードのみにしています。
<div class='post-header-line-1'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "&max-results=5"' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
<!--公開更新日時の表示 開始-->
<div id='toko_nitiji' style='font-size: 0.9em;text-align: right;padding-bottom: 5px'/>
<script>
function date_shoshiki(feed_date){
return feed_date.slice(0,17).replace("-","年").replace("-","月").replace("T","日").replace(":","時").replace(":","分");
}
$.getJSON("http://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",
function(json){
var kokaibi =date_shoshiki(json.feed.entry[0].published.$t);
var koshinbi=date_shoshiki(json.feed.entry[0].updated.$t);
$("#toko_nitiji").html(kokaibi+"公開"+"<br>"+koshinbi+"更新"+"<br>");
});
</script>
<!--公開更新日時の表示 終了-->
</div>
こんどはインデックスページのタイトル下に公開日時を表示させます。
<b:includable id='mobile-index-post' var='post'>の中の <div class='mobile-index-arrow'>&rsaquo;</div>の上行に以下を追加します。
<div class='post-header' style='font-size: 0.9em;text-align: right;padding-bottom: 5px'>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var post_dateHeader = "<data:post.dateHeader/>"</script>
</b:if>
<script>
function date_shoshiki(feed_date){
return feed_date.slice(0,17).replace("-","年").replace("-","月").replace("T","日").replace(":","時").replace(":","分");
}
var feed_date=post_dateHeader+"T"+"<data:post.timestamp/>"+":";
var kokaibi=date_shoshiki(feed_date);
document.write(kokaibi+"公開"+"<br>");
</script>
</div>
フォントの色をアイテムページと同じにするためにclass='post-header'を追加しています。
投稿タイトルと公開日時の間が開きすぎですね。
さらに右向きの>と重なってしまうためにpadding-right: 30pxを追加しました。
投稿タイトルとの隙間は<h3 class="mobile-index-title entry-title" itemprop="name">のmargin-bottom、padding-bottomが入っていることがわかりました。
これはアイテムページでCSSを設定したところと同じなので以下のようにmargin-bottom: 0pxとpadding-bottom: 0pxを追加しました。
.mobile-index-title.entry-title{
width: auto;
padding-right: 10px;
margin-bottom: 0px;
padding-bottom: 0px;
}
最終的にこうなりました。
更新日時をモバイルサイトで表示させる方法（その他ヘッダーの改造も含む）：まとめ
日付ヘッダーの非表示。
<b:includable id='mobile-post' var='post'>にある以下をコメントアウト。
<!--<h2 class='date-header'><span><data:post.dateHeader/></span></h2>-->
<b:includable id='mobile-index-post' var='post'>の中にある以下もコメントアウト。
<!--<span><data:post.dateHeader/></span>-->]]></b:skin>の上行に以下のCSSを追加。
/* モバイルサイトのヘッダー部分のカスタマイズ開始-------- */
.mobile-index-title.entry-title{
width: auto;
padding-right: 10px;
margin-bottom: 0px;
padding-bottom: 0px;
}
.mobile-date-outer.date-outer{
padding-top: 0px !important;
}
/* モバイルサイトのヘッダー部分のカスタマイズ終了-------- */
<b:includable id='mobile-post' var='post'>の中の<div class='post-header-line-1'/>を以下に置き換え。 <div class='post-header-line-1'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "&max-results=5"' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
<!--公開更新日時の表示 開始-->
<div id='toko_nitiji' style='font-size: 0.9em;text-align: right;padding-bottom: 5px'/>
<script>
function date_shoshiki(feed_date){
return feed_date.slice(0,17).replace("-","年").replace("-","月").replace("T","日").replace(":","時").replace(":","分");
}
$.getJSON("http://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",
function(json){
var kokaibi =date_shoshiki(json.feed.entry[0].published.$t);
var koshinbi=date_shoshiki(json.feed.entry[0].updated.$t);
$("#toko_nitiji").html(kokaibi+"公開"+"<br>"+koshinbi+"更新"+"<br>");
});
</script>
<!--公開更新日時の表示 終了-->
</div>
<b:includable id='mobile-index-post' var='post'>の中の <div class='mobile-index-arrow'>&rsaquo;</div>の上行に以下を追加。<div class='post-header' style='font-size: 0.9em;text-align: right;padding-bottom: 5px;padding-right: 30px'>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var post_dateHeader = "<data:post.dateHeader/>"</script>
</b:if>
<script>
function date_shoshiki(feed_date){
return feed_date.slice(0,17).replace("-","年").replace("-","月").replace("T","日").replace(":","時").replace(":","分");
}
var feed_date=post_dateHeader+"T"+"<data:post.timestamp/>"+":";
var kokaibi=date_shoshiki(feed_date);
document.write(kokaibi+"公開"+"<br>");
</script>
</div>
これで完了ですが、PCサイトのカスタマイズ部分を含めてdate_shoshiki関数の定義が3箇所もテンプレート内に出現することになるのでこの部分は</head>の上にまとめるとよいかもしれません。
アイテムページではこんな感じに表示されます。
0 件のコメント:
コメントを投稿