2015年6月30日

トップページに記事が全部でちゃうので、一覧表示するようにテンプレートを変更しましょう



トップページに記事の全文が表示されるのは「私が考えているのと違う」とおもったかな。

トップページに記事が全部表示されないようにする方法を紹介します。

トップページに記事が全部表示されちゃうのはヤダ!


いまのトップページの状態はこんな感じに記事の内容が全部表示されちゃってますね。

トップページには各記事の一覧のように表示させたいと思いますがどうですか?



トップページを一覧(目次)のようにするにはテンプレートの変更が必要です。

テンプレートを変更します


今回のテンプレートの変更ですが、かなりメンドクサイ作業となります。

ちょっとだけですが、プログラム(表示の制御)を入れる作業も行いますので間違えるとブログが表示されなくなっちゃいます!

ですから、慎重に作業しましょう。

では、テンプレートを開きましょう



変更する場所は、<data:post.body/>の所(2箇所目の先に「関連記事」を追加した部分)です。

変更後のコード:黄色でマーキングした部分が追加したり変更した部分です。
<!-- タイトル(個別記事用) -->
    <b:if cond='data:blog.url == data:post.url'>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
    </b:if>
    </b:if>
<!-- タイトル(個別記事用)-->

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>
<!-- ここから本文 -->
    <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
<!-- トップページ:タイトル&インデックス -->
    <b:if cond='data:blog.url != data:post.url'>
      <div class='topindexContainer'>
      <!-- サムネイル画像 -->
      <b:if cond='data:post.thumbnailUrl'>
        <div class='topIndexThumbnail'>
          <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
            <a expr:href='data:post.link ? data:post.link : data:post.url'><img alt='サムネイル' expr:src='data:post.thumbnailUrl' /></a>
          </b:if>
        </div>
      <b:else />
        <div class='topIndexThumbnail'><img alt='画像なし' src='代替え画像URL' /></div>
      </b:if>
      <!-- タイトル -->
      <b:if cond='data:post.title'>
        <div class='topIndexTitle'>
        <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
          <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
          <p class='topIndexSnippet'><data:post.snippet/></p>
        <b:else />
          <h3 class='topIndexTitle' itempro='name'><data:post.title/></h3>
        </b:if>
        </div>
      </b:if>
      </div>
    <b:else />

      <data:post.body/>
<!-- 関連記事(ここから) -->
これだけ変更すると、トップページを表示した時に小さなアイコンとタイトル、抜粋が表示されるようになります。

CSSの追加


 アイコンとタイトルの表示を横並びになるようにして、文字サイズを変更するにはCSSを追加します。

/* Posts
----------------------------------------------- */
.topIndexThumbnail {
 float: left;
 width: 20%;
}
.topIndexTitle {
 font-size: 16px;
}
.topIndexSnippet {
 font-size: 12px;
}
<b:skin>〜</b:skin>を展開して Postsのところに追加しました。

表示の確認


トップページの表示はアイコンとタイトル、抜粋が表示されるようになりました。

これで、トップページが「ブログの目次」のような役割となりますね。

トップページの確認



個別記事の確認

表示が変わるようにテンプレートを変更しましたので、個別ページの表示が変わっていなことも確認しておきましょう。



個別記事の表示は変わっていませんね!

記事の書き方を少し変えましょう


今回の変更でトップページには記事の「抜粋」が表示されるようになりました。

抜粋は記事の最初の120文字程度が取り出されます。

これまでの記事の構造は:

・イメージ画像
・見出し
・本文

としましたが、トップページの抜粋に「概要」や「あらまし」として表示されるように記事の構造も考えて作成すると良いです。

・あらまし
・イメージ画像
・見出し
・本文


記事の作成をがんばりましょう!