Blogger Labo:【Vaster2】記事ページのカスタマイズ

このページでは、Vaster2の記事ページ全体と文章(標準文字)のカスタマイズ方法を説明する。

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

Vaster2のカスタマイズ方法はこちら


記事ページ全体のカスタマイズ


記事ページ

記事ページとは、投稿内容が表示されるページのこと(投稿ページとも)。

Vaster2のCSSで「記事ページ」となっているので、この名で呼ぶことにする。

記事ページの構成


記事ページの構成は「.main-outer{}」と「.date-outer {}」に分けられている。

画像で言えば赤枠が「.main-outer{}」青枠が「.date-outer {}」の設定部分にあたる(サイドバーは緑枠)。

幅や余白については「border」で一旦 枠線を引いてみると調整しやすくなると思う。

なお、赤枠部分に見える「Home > …」というのは「パンくずリスト」と呼ばれるものになる。

記事ページのCSS


 記事ページ全体の設定(赤枠部分) 

.main-outer{
   float:left; 左寄せ
   width:710px; 全体の横幅(710px)
   background:$(kizi.background); 背景色(テーマデザイナー設定)
   padding-left:20px; 左内側の余白
   box-sizing:border-box;
}

 記事表示部分の設定(青枠部分) 

.date-outer{
   border-right:1px solid #e4e4e4; 右側の区切り線
   padding-right:40px; 右内側の余白
}

※()内は初期値

上記が Vaster2の記事ページのCSSに説明を加えたもの。

基本的には「/*   記事ページ」で検索して中身を書き変えれば、好みに合わせて変更できる。

枠線をつける


【方法】

・「/*   記事ページ」で検索
・「.main-outer{}」もしくは「.date-outer{}」の中に「border:値;」を書き加える

備考:スタイルシートリファレンス(border)

枠線と影をつける


【方法】

・「/*   記事ページ」で検索
・「.main-outer{}」もしくは「.date-outer{}」の中に「border:値;」を書き加える
・「.main-outer{}」もしくは「.date-outer{}」の中に「box-shadow:値;」を書き加える

備考:スタイルシートリファレンス(box-shadow)

内側に余白を設定する


【方法】

・「/*   記事ページ」で検索
・「.main-outer{}」もしくは「.date-outer{}」の中に「padding:値;」を書き加える

備考:スタイルシートリファレンス(padding)

外側に余白を設定する


【方法】

・「/*   記事ページ」で検索
・「.main-outer{}」もしくは「.date-outer{}」の中に「margin:値;」を書き加える

備考:スタイルシートリファレンス(margin)

「<Previous」「Next>」の文字を変える


【「<Previous」の変更】

・「Previous」で検索し、以下のコードの「&#65308;Previous」を変更する

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#65308;Previous</a>

【「Next>」の変更】

・「Next」で検索し、以下のコードの「Next&#65310;」を変更する

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next&#65310;</a>

※「<」は「&#65308;」と入力しないと文字化けする(文字化けを防ぐUnicode変換ツールはこちら)

文章(標準文字)のカスタマイズ


ページ全体のCSS


 ページ全体の文字設定 

body{
   font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif; フォントの種類(游ゴシック体)
   margin:0;
   font-size:16px; 文字サイズ(16px)
   line-height:1.6em; 行間(1.6em)
}

※()内は初期値

上記が Vaster2のページ全体の文字設定のCSSに説明を加えたもの。

これが初期設定のブログ記事の文字設定になっている。

「body{」で検索して中身を書き換えれば、設定を変更することができる。

ただし、これは全体の設定なので、個別に設定したい場合は別にCSS内にコードを記述する。

「.main-outer{}」に記述した場合


・トップページの要約文に影響
・記事ページ全体に影響
・パンくずリスト・ページナビに影響

「.date-outer{}」に記述した場合


・トップページの要約文に影響
・記事ページ全体に影響

※「font-family(フォントの種類)」を設定すると違いが分かりやすい
※見出しなどには別にCSSが設定されているため、そちらが優先される

参考:font-familyの書き方まとめ(サルワカ)
備考:Font-familyメーカー

記事ページのみに設定する


記事の文章のみに設定するには、下記のようなCSSを追記する(数値には任意の値を書き込む)。

.post-body {
line-height:数値em; /* 行間 */
font-size:数値px; /* 文字サイズ */
color:値; /* 文字色 */
}

・記事ページ全体に影響
・トップ要約・パンくず・ページナビには影響しない