- 修正: 2017/2/1 1:22 公開日時、更新日時をATOMフィードから作成、表示のhtml。
メインページの公開日時文字列が正しくなかった。作成ロジックを修正。
Bloggerのカスタマイズに翻弄されている頑張っているつきよみです。
かなりいい感じでカスタマイズが進んできました。今日も早速作業を進めていきましょう、今日も修復過程を記事にしていきす。
今日は「表をきれいに表示する」以外はHTMLテンプレートの修正が必要です。しっかりバックアップを取りつつ作業を進めます。(教訓!)
やってみよう
[実践] 表をきれいに表示
前回書いた記事の通り、下記CSSを追記します。
/* Decoration for a table
----------------------------------------------- */
.post-body table {
width: auto;
border-spacing: 0;
font-size:14px;
margin-left: auto;
margin-right: auto;
}
.post-body table th {
color: #fff;
padding: 4px 10px;
background: #258;
background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
font-weight: bold;
border-left:1px solid #258;
border-top:1px solid #258;
border-bottom:1px solid #258;
line-height: 110%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.post-body table th:first-child {
border-radius: 5px 0 0 0;
}
.post-body table th:last-child {
border-radius:0 5px 0 0;
border-right:1px solid #258;
box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}
.post-body table tr td {
padding: 0px 10px 0px 10px;
border-bottom: 1px solid #84b2e0;
border-left: 1px solid #84b2e0;
}
.post-body table tr td:last-child {
border-right: 1px solid #84b2e0;
box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.post-body table tr {
background: #fff;
}
.post-body table tr:nth-child(2n+1) {
background: #f1f6fc;
}
.post-body table tr:last-child td {
box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.post-body table tr:last-child td:first-child {
border-radius: 0 0 0 5px;
}
.post-body table tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}
.post-body table tr:hover {
background: #bbd4ee;
cursor:pointer;
}
あっさりできました!
[時刻: 9:52]
[絶対!] HTMLテンプレートのバックアップ
忘れずにバックアップをとっておきます。ファイル名は”template-(数字の羅列)-AfterChangedCSS
.xml”という名前に変更しました。
[時刻: 10:00]
[実践] 投稿者を記事タイトルの下に表示
Bloggerで「レイアウト」→「メイン」で「ブログの投稿」ガジェットの「編集」ボタンを押すと、本文部分のガジェット配置場所を変更する画面がでてきます。でも、ここでいくら順序を変更しても変わってくれませんでした。しかたがないので、ここからHTMLテンプレートのカスタマイズ作業です。
前回の記事を参考に作業を進めます。ただし、今回はちょっと変えてみたいと思います。
まずは表示場所を確認するため、クラス post-header の部分に以下を追記します。なお、このクラスはHTMLテンプレートではモバイル版とPC版の2ヶ所でてきます。モバイル版は該当場所の少し上に以下のような記述があります。
<b:includable id='mobile-post' var='post'>
PC版は以下の部分です。
<b:includable id='post' var='post'>
追記するのは次の文の下になります。
<div class='post-header'>
<div class='post-header-line-1'/>
以下のコードを貼り付けます。
<!-- make date strings for publish and update: start -->
<script>
function make_date_string(feed_date){
return feed_date.slice(0,17).replace('-','年').replace('-','月').replace('T','日 ').replace(':','時').replace(':','分');
}
</script>
<div class='custom_publish_date'>
<b:if cond='data:blog.pageType == "item"'><!-- for item page -->
<div id='custom_publish_date_block'/>
<script>
$.getJSON("https://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",
function(json){
var custom_pub_date_string =make_date_string(json.feed.entry[0].published.$t);
var custom_update_date_string=make_date_string(json.feed.entry[0].updated.$t);
$("#custom_publish_date_block").html("公開: "+custom_pub_date_string+"    更新: "+custom_update_date_string+"<br>");
$("#label_hyoji").css('padding-top','15px');
});
</script>
<b:else/><!-- for non item page -->
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var post_dateHeader = '<data:post.dateHeader/>'</script>
</b:if>
<script>
var custom_pub_date_string = post_dateHeader.replace(/.曜日/, ' ') + '<data:post.timestamp/>'.replace(':', '時').replace(/:.*$/,'分');
document.write('公開: '+custom_pub_date_string);
</script>
</b:if>
</div>
<!-- make date strings for publish and update: end -->
[時刻: 11:45]
[実践] 投稿日時、更新日時を記事タイトルの下に配置
私のように記事の更新が多いと最終更新日がわからなくなるので、それも表示したいです。ぐぐってみると、ほんとに私の要望とかぶりまくりのサイトを発見。かなり昔から当たり前のように皆さんやっているんですね。ちょっと読みこんじゃいました。
JQueryをインクルード
<head>に下のコードを追記します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
公開日時、最終更新日時をATOMフィードから作成、表示
自分のブログ用にコードを変更してみます。だいたい好みの範疇です。
- スタイルが埋め込まれているのでCSSに切り出す
- ATOMフィードをhttpsでリクエストする
- 日付のフォーマットを変更する
- 識別子を英語にしてわかりやすく
<!-- make date strings for publish and update: start -->
<script>
function make_date_string(feed_date){
return feed_date.slice(0,17).replace('-','年').replace('-','月').replace('T','日 ').replace(':','時').replace(':','分');
}
</script>
<div class='custom_publish_date'>
<b:if cond='data:blog.pageType == "item"'><!-- for item page -->
<div id='custom_publish_date_block'/>
<script>
$.getJSON("https://"+location.hostname+"/atom.xml?path="+location.pathname+"&alt=json-in-script&callback=?",
function(json){
var custom_pub_date_string =make_date_string(json.feed.entry[0].published.$t);
var custom_update_date_string=make_date_string(json.feed.entry[0].updated.$t);
$("#custom_publish_date_block").html("公開: "+custom_pub_date_string+"    更新: "+custom_update_date_string+"<br>");
$("#label_hyoji").css('padding-top','15px');
});
</script>
<b:else/><!-- for non item page -->
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var post_dateHeader = '<data:post.dateHeader/>'</script>
</b:if>
<script>
var custom_pub_date_string = post_dateHeader.replace(/.曜日/, ' ') + '<data:post.timestamp/>'.slice(0,5).replace(':', '時') + '分';
document.write('公開: '+custom_pub_date_string);
</script>
</b:if>
</div>
<!-- make date strings for publish and update: end -->
/* Publish and Update date
----------------------------------------------- */
#custom_post_author {
float: left;
margin-right: 20px;
}
.custom_publish_date {
font-size: 0.9em;
margin-left: 20px;
}
できました!
[時刻: 14:45] (お昼も食べたよ)
[実践] ラベルを記事タイトルの下に配置
ラベルは、ラベルを表示する部品をコピーし、クラス名を追加します。また「ラベル」という文字は不要なので、表示している部分を削除します。
<div class='custom_post_labels'>
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
これも簡単でしたね。
[実践] シェアアイコンを記事タイトルの下に配置
htmlとcssを追記します。
追加するhtmlは、シェアアイコンを表示する部品をコピーし、CSSでスタイルを決めるためにIDを追加しています。
<!-- share buttons -->
<div class='post-share-buttons goog-inline-block' id='custom_share_buttons'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>
<div style='clear: both;'/>
アイコンはラベルの右に右寄せで表示したいです。次のCSSを追加します。
/* Share Icons
----------------------------------------------- */
.custom_post_labels {
float: left;
}
#custom_share_buttons {
float: right;
margin-top: 0;
}
やっと思い通りの表示ができました!
[時刻: 15:52] - 休憩 - [時刻: 16:50]
[実践] 記事タイトルの上の日付を消す
このあたりまできたら記事の公開日に日付が入っているので、上にある日付も取っ払いたいですね。ちょっとBloggerの設定を見直してみると、「レイアウト」→「メイン」の「編集」から表示される画面で投稿ページのオプションの日付っていうのがあるじゃないですか。オフにしたらメインページからも、投稿ページからもさくっと消えました。
[時刻: 17:03]
[絶対!] そろそろバックアップを!
またバックアップをとっておきましょう。今度のファイル名は”template-(数字の羅列)-AfterChangedFrontStyle.xml”という名前に変更しました。
[時刻: 17:15]
[修正!] 記事タイトルの上の日付を消す
作業が終わって記事を読んで推敲していたら(ぉぃ、公開してから推敲かぁ? ( >.<)、なんと日付が表示されていません! どうやら設定画面で日付を表示しないようにすると日付データが届かず、表示されなくなるようです。
しかたない、htmlテンプレートを探してみましょう。するとクラス date-header が該当部分で、これを非表示にしてみます。
/* Undisplay date header
----------------------------------------------- */
.date-header {
display: none;
}
はい、さくっと消えました。いやー、確認重要ですね…
[時刻: 17:30]
まとめ
いったんここまでで一区切りにします。なかなかきれいに表示されるようになってきました。割りとBlogger臭が消えていませんか? (ぉぃ
まだ大物が残っていますので、このあとまた作業を進めていきたいと思います。
参考サイト
有用な記事を公開してくださっている方々、いつもありがとうございます。
Blogger：レイアウト編集(9)各投稿の更新日時の表示をする（成功編） (2016-11-27)
まさにやりたいことでした! もっとちゃんとぐぐってれば行き当たれたのに…。公開日と更新日、両方表示されてますね。私もこれをやりたかったんです。あと、関連記事とかきれいに表示されています。
また、色々と試した経過を含めて成功、失敗も記事にされていらっしゃいます。いやー、楽しいブログです! これからちょくちょく読みたいです。投稿数も半端ないですね。しっかり読んでみたい記事満載です。Google Hosted Libraries (2017-1-17)
Googleがホストしているライブラリ群。JavaScriptで書くときはいつもお世話になってます。XHTML5で実体参照を使う方法 (2012-01-22)
必死で空白を で書いてたんだけど、Bloggerにそんな参照ねーんだよ! と怒られまくって調べたらxhtml5では使えないんですね。知らなかった… 代わりに” ”を使いました。
気づいたこと、不具合、ご意見など、コメント待ってます!