2017年2月1日水曜日

Bloggerをカスタマイズしたけどまだ気になる…

,

Bloggerのテンプレートを壊しちゃった! と誤解してからはや三日。以前よりもきれいにできて満足なんですが、色々と確認しているとおかしいところや、変えたいところがいくつかでてきました。
今回はそんなところを修正してみたいと思います。

何が気になるの?

細かなことですが、だいたいこんな感じです。

  • [バグ] メインページの公開日時の分が表示されていない
  • [改善] ブログアーカイブの折り返し行が先頭行と揃っていない
  • [改善] ブログアーカイブを一番下に置きたい
  • [改善] サイト内検索を設置したい
  • [改善] 記事タイトルを先にウィンドウタイトルに表示したい

ではそれぞれ見ていきましょう。

直していこう

[問題] メインページの公開日時の「分」が表示されない

個別ページでは公開日時はちゃんと表示されていたんだけど、メインページでは分が表示されていなかったんですね。調べてみたらどうも日付のフォーマットが違っていて、同じ関数が使えなかったようです。なのでメインページの処理を書き換えました。コードは以下のようになりました。(以前のページも修正しておきました)

<!-- 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+"&amp;alt=json-in-script&amp;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+" &#160;&#160;&#160;更新: "+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 -->

[改善] ブログアーカイブの折り返し行が先頭行と揃っていない

インデントをかけなくてもいい要素にまでインデント指定がかかっていたので、それを取り消すCSSを追記しました。

/* Arrange for the indent space of the element li for BlogArchive 
----------------------------------------------- */
.BlogArchive #ArchiveList ul.posts li {
 text-indent: 0px;
}

これでブログアーカイブの折り返し行は先頭行と揃いました。

[改善] ブログアーカイブを一番下に置きたい

右にアーカイブが表示されているとごちゃごちゃしているように感じます。右サイドバーからは消して、下の方に表示してみます。

「レイアウト」→「footer-1」の「ガジェットを追加」で「ブログアーカイブ」を追加します。なかなかいい感じです。でもガジェットにはh2などの見出しタグが含まれるので、変更していきます。

ガジェットのタイトル「ブログアーカイブ」を探し、h2になっている部分をspanに書き換え、クラス custom_widget_title を追加します。

    <span class='custom_widget_title'><data:title/></span>

あとは右サイドバーからブログアーカイブを消しておきます。
「レイアウト」→「sidebar-right-1」の「ブログアーカイブ」の「編集」で開いた画面で「削除」ボタンを押します。かなり右がスッキリしました。これで色々とガジェットが置けるな、ぐふふ…

[改善] サイト内検索を設置したい

さっそく右サイドバーを埋めていきます。まずはサイト内検索を設置します。なんだか評判はあまりよくないようですが、ないよりいいでしょう?

「レイアウト」→「sidebar-right-1」の「ガジェットを追加」で「ブログ検索」を追加します。先ほどと同じようにh2が含まれるので変更していきます。

ガジェットのタイトル「このブログを検索」を探し、h2になっている部分をspanに書き換え、クラス custom_widget_title を追加します。

      <span class='custom_widget_title title'><data:title/></span>

[改善] 記事タイトルを先にウィンドウタイトルに表示したい

参考サイトをみながらやっていきます。参考サイトに書いてあるとおり、変更対象を検索し、下記を追記します。

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

本当に簡単でした。大助かりです!

参考サイト

大変参考になりました。本当にありがとうございます。

投稿者 時刻:
ラベル: ,
0 件のコメント:

コメントを投稿

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

登録: コメントの投稿 (Atom)