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

2018/02/11

このページでは、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」で検索し、以下のコードの「＜Previous」を変更する

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>＜Previous</a>

【「Next>」の変更】

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

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Next＞</a>

※「<」は「＜」と入力しないと文字化けする（文字化けを防ぐ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:値;　/*　文字色　*/
}

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

Blogger Labo