Blogger：テンプレート編集(7)投稿セクションでアイテムの並び替えが反映されない

前の関連記事：Blogger：テンプレート編集(6)モバイルサイトの表示

テンプレート編集をすると並び替え設定が反映されない？

投稿の下にでる「時刻」や「ラベル」の表示の部分を移動させることができるわかりました。

これを投稿タイトルの下にもっていきたいです。
管理画面→レイアウト


「ブログの投稿」ガジェットの「編集」をクリック。

一番下に出てくる「アイテムの並び替え」のなかでアイテムをドラッグすると並び替えができます。


デフォルトでは上のようになっています。これを下のように変更しました。


「時刻」と「ラベル」を投稿本文に上にもってきました。

ところがブログには全く反映されません。

Blog１のウィジェットテンプレートに戻すと反映されるが、、、

テストブログで試行錯誤してみました。

管理画面→テンプレート、で「ウィジェットテンプレートをデフォルトに戻す」を実行すると反映されました。

Blog1をデフォルトに戻すだけでいけました。

ただここのウィジェットをいじった記憶がないので気持ち悪いです。

デフォルトのテンプレートで該当する部分を探す

デフォルトのテンプレートのHTML編集画面をBlog1で検索をかけます。


Blogger：テンプレート編集(3)セクションはページ内の領域を表すでみたようにレイアウト通りにmainセクションに入っていますね。


Blog1のウィジェットを展開します。

インクルードが並んでいます。

Blogger：テンプレート編集(2)インクルードincludeは関数に相当でみたようにmainのインクルードが最初に呼び出されるのでそのなかを見ていきます。

ラベルや投稿時刻などの情報は投稿（posts）に含まれる情報と推測されます。

ずっとソースを呼んでいくとloopがありその中に <b:include data='post' name='post'/>がありました。

これが各投稿を表示させているインクルードでしょう。

こんどはそこで呼び出されている<b:includable id='post' var='post'>のなかを見ます。

data:post.timestampがでてきます。この部分が投稿日時の表示部分でしょう。

一区切りを抜き出すとこんな感じです。

<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
</span>

これは <div class='post-footer-line post-footer-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' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

これらは<div class='post-footer-line post-footer-line-2'>のなかにあります。


デフォルトの配置はこうなっているので'post-footer-line post-footer-line-1'と'post-footer-line post-footer-line-2'はそれぞれ時刻とラベルのアイテムが入っている行とわかります。

ということは投稿タイトルと投稿本文の間にはさまれた部分に似た名前があるはずです。

    <div class='post-header-line-1'/>
    </div>

これですね。すぐに見つかりました。

HTML編集でアイテムの並び替えをする

場所がわかればHTMLを直接編集してアイテムの並び替えをやってしまいます。

直接編集の前にテンプレートのバックアップをとっておきましょう。

バックアップの復元以外に元に戻す方法はないです。

Blog1のウィジェットへの移動はHTML編集画面の上の「ウィジェットへ移動」というリストメニューから簡単にできます。

Blog1ウィジェットの中のpostインクルードの中の<div class='post-header-line-1'/>を探します。

レイアウトで編集したアイテムの並び替えは全く反映されていませんね。

 <div class='post-footer-line post-footer-line-1'>の中から<span class='post-timestamp'>を

<div class='post-footer-line post-footer-line-2'>の中から <span class='post-labels'>を

<div class='post-header-line-1'/>の中へカット＆ペーストします。

テンプレートを保存してブログを見てみます。


ちゃんと反映されていますね。

表示位置の変更はレイアウト画面から反映されませんがオプションの名称はレイアウト画面でやれば反映されます。

私のBloggerでは時刻とラベルの順番を逆にすると文字が重なってしまいます。

表示位置をもう少し右側にずらしたい

公開時刻が投稿タイトルより左側に飛び出てしまっているのでもう少し右側にずらしたいですね。

<div class='post-header-line-1'/>で検索するとmobile-postインクルードでも使われています。

こっちも同じように<div class='post-footer-line post-footer-line-1'>から<span class='post-timestamp'>を移動させます。

<span class='post-labels'>はmobile-postインクルードの中にはなかったのでpostインクルードからコピーしました。


ちゃんと表示されましたがこちらも公開時刻の左側が飛び出していますね。

これはどこを修正すればよいのでしょう？

post-header-line-1で検索してもmobile-postとpostインクルードの中に使われているだけで修飾を定義したものがでてきません。

投稿エディタで記事を作ってHTMLモードで

<div class='post-header-line-1'/>あああ</div>

と入力してこれを右にずらす方法を考えました。

作成モードにしてスペースを入れると

<div class="post-header-line-1">
　　　あああ</div>

となりました。→単にソースにスペースを入力するだけでした。

ということでテンプレートのHTMLソースで <div class='post-header-line-1'/>と<span class='post-timestamp'>の間にスペースを入力してみました。


おお、ちょろく解決してしまいました。

だいぶHTML編集がわかるようになってきました。

ラベル表示は投稿の最後にもないと自分が不自由しましたので<div class='post-footer-line post-footer-line-2'>にも <span class='post-labels'>は残すことにしました。

参考にしたサイト

レイアウトのブログの投稿編集でアイテムの並べ替えが機能しない - Google グループ
ウィジェットをデフォルトに戻すと機能するようになります。

次の関連記事：Blogger：テンプレート編集(8)投稿時刻表示のリンクを消す