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に注釈を加えたもの(必要な部分のみ)。

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

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

備考


改変サンプル1(サムネリンク・続きを読む・代替サムネイル追加ほか)


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; /* 右寄せ */
}

改変サンプル2(サンプル1+ラベルを下へ)


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

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

その上で記事タイトルを一番上にして、ラベルを一番下にするには下記の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;
}