Blogger Labo：【Tokyo】トップページの記事リストのカスタマイズ

このページでは「Tokyo」のトップページの記事リストのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

※初心者の方は「カスタマイズ基礎知識」などの「初心者向け記事」を参考にしてみてください


トップページの記事リストの設定について


CSSの内容


/****************************************
         list [トップページ記事リスト]
*****************************************/

 記事リストの設定 

.mylist{
padding: 1em; [記事リストの内側の余白]
border: solid 1px $(linecolor); [記事リストの枠線]
background-color: $(backgroundcolor); [記事リストの背景色]
margin-bottom: 2em; [記事リスト下の外側の余白（間隔）]
}

 記事リストの画像の設定 

.mylist img{
display: block;
width: 100%;
}

 記事タイトルの設定 

.mylist .mytitle{
border-bottom: 1px solid $(linecolor); [タイトル下の罫線]
margin-bottom: 1em; [タイトル下の外側の余白]
}

 ラベルの設定 

.mylist .mydate{
color: $(lightcolor); [文字色（影響なし？）]
display: inline-block;
margin-right: 1em; [ラベル左部の余白に影響]
}
.mylist .mycategory{
color: $(lightcolor);
display: inline-block;
}
.mylist .mycategory span{
padding: 0 0.5em; [ラベルの内側の余白]
border: solid 1px $(linecolor); [ラベルの枠線]
}

上記がTokyoのトップページの記事リストの設定に関するCSSに説明を加えたもの（必要な部分のみ）。

変更が必要な部分は「文字サイズ」「文字の太さ」などだと思う。

なので、下記に記したセレクタ・プロパティを参照にしてカスタマイズしてほしい。

各所のセレクタと変更に必要なプロパティ


セレクタ

・記事タイトル： .mylist .mytitle{～}
・ラベル： .mylist .mydate{～}

プロパティ

・文字サイズ： font-size:値;（例：font-size:24px;）
・文字の太さ： font-weight:値;（例：font-weight:bold;）

HTMLの内容


<!--記事リストのHTML開始-->
<div class='mylist'>
  <a expr:name='data:post.id'/>
  <p class='mydate'><script type='text/javascript'>document.write(jsdate)</script></p>
<!--記事リストのラベル開始-->
  <p class='mycategory'>
    <b:loop values='data:post.labels' var='label'>
      <span><a expr:href='data:label.url'><data:label.name/></a></span>
    </b:loop>
  </p>
<!--記事リストのラベル終了-->
<!--記事リストの記事タイトル開始-->
  <h3 class='mytitle post-title entry-title' itemprop='name'><a expr:href='data:post.url'><data:post.title/></a></h3>
<!--記事リストの記事タイトル終了-->
  <b:if cond='data:post.thumbnailUrl'><!--記事に画像がある場合-->
    <div class='grid-leave'>
      <div class='row20'><!--サムネイル部分-->
        <img expr:src='data:post.thumbnailUrl'/>
      </div>
      <div class='row80'><!--要約部分-->
        <p><data:post.snippet/></p>
      </div>
    </div>
  <b:else/><!--記事に画像がない場合-->
    <p><data:post.snippet/></p><!--要約部分-->
  </b:if>
</div>
<!--記事リストのHTML終了-->

上記がTokyoのトップページの記事リストの設定に関するHTMLに注釈を加えたもの（必要な部分のみ）。

色々なカスタマイズをするには少々コードを書き換える必要がある（上部のコードをコピペするとわかりやすい？）。

なので、その辺に関する情報は下記の「備考」にてまとめてみたいと思う。

備考


改変サンプル１（サムネリンク・続きを読む・代替サムネイル追加ほか）


Blogger Labo：【Tokyo】トップページの記事リストのカスタマイズ

とりあえず、個人的に使いやすいように上の画像のように変更してみた（変更点は以下の通り）。

・サムネイルに記事リンクを追加（HTMLの改変）
・続きを読む（記事リンク）を追加（HTML・CSSの追加）
・画像なし記事に代替サムネイルを追加（HTML・CSSの追加）※自分で画像を用意する
・要約を設定するCSSを追加（HTML・CSSの改変）

変更するには下記のHTML・CSSを貼り付ければよい。

HTML（HTMLそのものを上書きする）

<!--記事リストのHTML開始-->
<div class='mylist'>
  <a expr:name='data:post.id'/>
  <p class='mydate'><script type='text/javascript'>document.write(jsdate)</script></p>
<!--記事リストのラベル開始-->
  <p class='mycategory'>
    <b:loop values='data:post.labels' var='label'>
      <span><a expr:href='data:label.url'><data:label.name/></a></span>
    </b:loop>
  </p>
<!--記事リストのラベル終了-->
<!--記事リストの記事タイトル開始-->
  <h3 class='mytitle post-title entry-title' itemprop='name'><a expr:href='data:post.url'><data:post.title/></a></h3>
<!--記事リストの記事タイトル終了-->
<!--サムネイルと要約開始-->
  <b:if cond='data:post.thumbnailUrl'><!--記事に画像がある場合-->
    <div class='grid-leave'>
      <div class='row20'><!--サムネイル部分-->
        <a expr:href='data:post.url'><img expr:src='data:post.thumbnailUrl'/></a>
      </div>
      <div class='row80'><!--要約部分-->
        <p class='snippet'><data:post.snippet/></p>
        <a class='next' expr:href='data:post.url'>続きを読む</a>
      </div>
    </div>
  <b:else/><!--記事に画像がない場合-->
    <div class='grid-leave'>
      <div class='row20'><!--代替サムネイル部分-->
        <a expr:href='data:post.url'><img src='※任意の画像URL（代替サムネをアップして画像URLに書き換える）'/><!--代替サムネイル--></a>
      </div>
      <div class='row80'><!--要約部分-->
    <p class='snippet'><data:post.snippet/></p>
        <a class='next' expr:href='data:post.url'>続きを読む</a>
    </div>
　</div>
<!--サムネイルと要約終了-->
  </b:if>
</div>
<!--記事リストのHTML終了-->

CSS（「list」の下の方に追記する）

/* 要約部分の設定 */

 .snippet{
height:auto;
}

 /* 続きを読むの設定 */

 .next{
float:right; /* 右寄せ */
}

改変サンプル２（サンプル１＋ラベルを下へ）


Blogger Labo：【Tokyo】トップページの記事リストのカスタマイズ

まず、上記の「サンプル１」を適応したことを前提にする。

その上で記事タイトルを一番上にして、ラベルを一番下にするには下記のHTML・CSSを貼り付ける。

HTML（HTMLそのものを上書きする）

<!--記事リストのHTML開始-->
<div class='mylist'>
  <a expr:name='data:post.id'/>
  <p class='mydate'><script type='text/javascript'>document.write(jsdate)</script></p>
<!--記事リストの記事タイトル開始-->
  <h3 class='mytitle post-title entry-title' itemprop='name'><a expr:href='data:post.url'><data:post.title/></a></h3>
<!--記事リストの記事タイトル終了-->
<!--サムネイルと要約開始-->
  <b:if cond='data:post.thumbnailUrl'><!--記事に画像がある場合-->
    <div class='grid-leave'>
      <div class='row20'><!--サムネイル部分-->
        <a expr:href='data:post.url'><img expr:src='data:post.thumbnailUrl'/></a>
      </div>
      <div class='row80'><!--要約部分-->
        <p class='snippet'><data:post.snippet/></p>
        <a class='next' expr:href='data:post.url'>続きを読む</a>
      </div>
    </div>
  <b:else/><!--記事に画像がない場合-->
    <div class='grid-leave'>
      <div class='row20'><!--代替サムネイル部分-->
        <a expr:href='data:post.url'><img src='※任意の画像URL（代替サムネをアップして画像URLに書き換える）'/><!--代替サムネイル--></a>
      </div>
      <div class='row80'><!--要約部分-->
    <p class='snippet'><data:post.snippet/></p>
        <a class='next' expr:href='data:post.url'>続きを読む</a>
    </div>
　</div>
<!--サムネイルと要約終了-->
  </b:if>
<!--記事リストのラベル開始-->
  <p class='mycategory'>
    <b:loop values='data:post.labels' var='label'>
      <span><a expr:href='data:label.url'><data:label.name/></a></span>
    </b:loop>
  </p>
<!--記事リストのラベル終了-->
</div>
<!--記事リストのHTML終了-->

CSS（「list」の「.mylist .mytitle{～}」を変更する）

.mylist .mytitle{
margin-top:-2em; /* 上部の余白を調整 */
border-bottom: 1px solid $(linecolor);
margin-bottom: 1em;
}