Bloggerのテンプレート「Vaster」をカスタマイズ①、記事の文字や行間を設定しよう。


Bloggerをカスタマイズするときは、テンプレートから、HTMLの編集で行うのですが、ちょっとわかりずらいところがあります。なので、テンプレートをダウンロードしてテキストエディタで直接編集するのをオススメします。エディタはメモ帳でもいいのですが、Meryがシンプルで快適です。「Vaster」と「Mery」のダウンロード、Bloggerのファイルのアップロードは下記の過去記事からどうぞ。

Blogger日本語テンプレート「Vaster」を導入しました。
Bloggerのカスタマイズで必須の作業、データのバックアップ。
Meryはシンプル簡単操作、インストール不要で持ち歩ける無料のテキストエディタ。

トーマさんの記事を参考に「Vaster」初期設定をする。


「Vaster」のテンプレートを自分のBloggerのブログにアップロードしたら、トーマさんの記事を参考に初期設定を済ませます。

Vasterをダウンロードした後にやるべき初期設定4つ

初期設定が終わったら、「Vaster」をエディタで開けば、カスタマイズ開始です。

ブログのフォントをメイリオ、ヒラギノ角ゴに変更する。


フォントは使用してるブラウザの設定により変わりますが、通常ならMSゴシックを表示してます。それを日本語を見やすくするために作られた、メイリオとヒラギノ角ゴに変更します。「Vaster」はメイリオは設定されていますので、ヒラギノ角ゴを含めたスタイルシートにします。body部分の一行を変更するのみです。また、フォントのカラーも黒のままだとキツイ感じがするので、#333程度に、行間であるline-heightは数値を指定せずに、1.7に変更するのがオススメです。

変更前
body{ background-color: #fdfdff;  /*  全体の背景色  */ margin:0; font-size:16px; line-height:26px; font-family: "メイリオ", sans-serif; }

変更後
body{ background-color: #fff;  /*  全体の背景色  */ margin:0; font-size:16px; color:#333; line-height:1.7; font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif !important; }

記事のフォントや行間などのスタイルシートを作り、設定する。


これは自分が悪いのかもしれないのですが、なぜか何度やってもbodyでline-heightを指定しても反映されません。記事を書くときに毎回line-heightを指定するのは良くないので、スタイルシートを作成することにしました。スタイルシートはわかりやすい場所どこでもいいです。

/*  記事のフォント、行間、段落設定  */ .main-post{ color: #333; font-size:16px; line-height:1.7; text-align: justify; }

スタイルシートを反映させるために、HTMLに手を加えます。<!--記事ページの時-->を検索して、その下、14行目くらいある<data:post.body/>の前と後ろにタグを追加します。

<!--追加--> <div class='main-post'> <data:post.body/> <!--追加--> </div>

これで、記事ページの設定が完了です。文字色や大きさ、行間などはお好みにするだけです。まずは、このカスタマイズをやりながら、「Vaster」の編集に慣れるようにするといいです。

スポンサーリンク

スポンサーリンク

2 件のコメント :

  1. はじめまして。Vasterで行間を広げられずに悩んでいました。とても分かりやすく解説されていて助かりました。ありがとうございました。

    返信削除
  2. はじめまして。Vasterをカスタマイズするのに、とても助けられております。
    質問ですが、わたしのブログがトップページに3記事しか掲載されないのですが、
    どのようにカスタマイズすればよいでしょうか? もしよろしければ教えていただくと助かります。

    返信削除