2017年1月31日火曜日

【朗報】Bloggerのカスタマイズ初期化したけどもとよりよくなってきた!


  • 修正: 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(&#39;-&#39;,&#39;年&#39;).replace(&#39;-&#39;,&#39;月&#39;).replace(&#39;T&#39;,&#39;日 &#39;).replace(&#39;:&#39;,&#39;時&#39;).replace(&#39;:&#39;,&#39;分&#39;);
    }
  </script>
  <div class='custom_publish_date'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'><!-- for item page -->
    <div id='custom_publish_date_block'/>
    <script>
      $.getJSON(&quot;https://&quot;+location.hostname+&quot;/atom.xml?path=&quot;+location.pathname+&quot;&amp;alt=json-in-script&amp;callback=?&quot;,
        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);
          $(&quot;#custom_publish_date_block&quot;).html(&quot;公開: &quot;+custom_pub_date_string+&quot; &#160;&#160;&#160;更新: &quot;+custom_update_date_string+&quot;&lt;br&gt;&quot;);
          $(&quot;#label_hyoji&quot;).css(&#39;padding-top&#39;,&#39;15px&#39;);
      });
    </script>
  <b:else/><!-- for non item page -->
    <b:if cond='data:post.dateHeader'> 
      <script type='text/javascript'>var post_dateHeader = &#39;<data:post.dateHeader/>&#39;</script> 
    </b:if> 
    <script>
      var custom_pub_date_string = post_dateHeader.replace(/.曜日/, &#39; &#39;) + &#39;<data:post.timestamp/>&#39;.replace(&#39;:&#39;, &#39;時&#39;).replace(/:.*$/,'分');
      document.write(&#39;公開: &#39;+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(&#39;-&#39;,&#39;年&#39;).replace(&#39;-&#39;,&#39;月&#39;).replace(&#39;T&#39;,&#39;日 &#39;).replace(&#39;:&#39;,&#39;時&#39;).replace(&#39;:&#39;,&#39;分&#39;);
    }
  </script>
  <div class='custom_publish_date'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'><!-- for item page -->
    <div id='custom_publish_date_block'/>
    <script>
      $.getJSON(&quot;https://&quot;+location.hostname+&quot;/atom.xml?path=&quot;+location.pathname+&quot;&amp;alt=json-in-script&amp;callback=?&quot;,
        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);
          $(&quot;#custom_publish_date_block&quot;).html(&quot;公開: &quot;+custom_pub_date_string+&quot; &#160;&#160;&#160;更新: &quot;+custom_update_date_string+&quot;&lt;br&gt;&quot;);
          $(&quot;#label_hyoji&quot;).css(&#39;padding-top&#39;,&#39;15px&#39;);
      });
    </script>
  <b:else/><!-- for non item page -->
    <b:if cond='data:post.dateHeader'> 
      <script type='text/javascript'>var post_dateHeader = &#39;<data:post.dateHeader/>&#39;</script> 
    </b:if> 
    <script>
      var custom_pub_date_string = post_dateHeader.replace(/.曜日/, &#39; &#39;) + &#39;<data:post.timestamp/>&#39;.slice(0,5).replace(&#39;:&#39;, &#39;時&#39;) + &#39;分&#39;;
      document.write(&#39;公開: &#39;+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)
    必死で空白を&nbsp;で書いてたんだけど、Bloggerにそんな参照ねーんだよ! と怒られまくって調べたらxhtml5では使えないんですね。知らなかった… 代わりに”&#160;”を使いました。

0 件のコメント:
コメントを投稿

気づいたこと、不具合、ご意見など、コメント待ってます!