Vaster2 の適用とカスタマイズ

2017/09/17

Vaster2 の適用とカスタマイズ

2017/09/16 15:18 Blogger

ちょっと前に Blogger のテーマをレスポンシブ対応済みの日本語テンプレートとして無料で公開されている Vaster 2 に変更しました。

適用方法とカスタマイズについて簡単にまとめておきます。
（全てをまとめきれていませんが）

ダウロード

以下で無料公開されているのでダウンロードします。

http://toumaswitch.com/vaster2/

カスタマイズする前に

ここは基本的にプログラマー向けのブログなので言っておきます。
必ずバージョン管理しておきましょう。
後で元に戻したくなったりとか、デザインを変えたくなった時にどこを変えればよかったんだっけ？と必ずなります。
Git がおすすめですが、SVN でも別に構いません。

適用方法

Blogger のメニューから「テーマ」をクリックし、「HTMLの編集」をクリックします。
エディタの中身を全て消します。
Vaster2-TD.xml をテキストエディタで開き、中身を全てコピーします。
Blogger のエディタに貼り付けし、「テーマを保存」をクリックします。

モバイル用の設定を OFF にする

Vaster 2 はレスポンシブ対応なので、モバイル用の設定は OFF にしておきます。

feedy の設定を変更

以下の箇所を探します。

<li class='feedly'>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2FブログのURL' target='blank'><i class='fa fa-rss'/><br/>Feedly</a>
    </li>

この中の「ブログのURL」と言う文字を、自分のブログのURLに置き換えます。（http://やURLの最後に/は不要です）

画像がない場合にデフォルトのサムネイルを表示させる

https://pooh2roh.blogspot.jp/2017/07/vaster2-9.html

全体の背景色を変える

以下の箇所で変更できます。

body{
     font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif;
   background-color: #fff;  /*  全体の背景色  */
   margin:0;
   font-size:16px;
   line-height:1.6em;
}

場合によっては以下も変更する必要があります。

.main-outer{
   float:left;
   width:710px;
   background:#ffffff;
   
   box-sizing:border-box;
   
}

ヘッダーの色とか大きさを変える

以下の箇所を探します。

.Header{
width:100%;
border-top:7px solid #008ec2;
background-color:#fff;
padding-bottom: 30px;
}

border-top で画面上部のボーダーを変更できます。
background-color でヘッダーの背景色を変更できます。
padding-bottom でヘッダーとページリストとの余白を調整できます。

テキストの色は以下の箇所で変更できます。

.header-title a{
   font-size:40px !important;
   font-weight:700;
   text-decoration:none;
   color:#000000;
   
}
.header-title a:hover{
   text-decoration:none;
}
.header-title a:visited{
   color:#000000;
}
/*   ブログ説明   */
.header-description p{
   font-size:13px;
   margin-top:5px;
}

ページリストの色を変える

以下の箇所を探し、background-color で背景色を変更できます。

.PageList{
width:100%;
background-color:#4b99b5;
}

テキストの色は以下の箇所で変更できます。

.header-nav{
padding:0 !important;
}
.header-nav li{
   float:left;
   list-style:none;
   font-size:14px;
padding:0;
}
.header-nav a{
   padding: 10px 20px;
  font-size: 14px;
    color: #fff;
    background: #4b99b5;
    text-decoration: none;
    display: block;
transition:.3s;
}
.header-nav a:hover{
  background-color:#008ec2;
   color:#fff;
text-decoration:none;
   
}

フォントの変更

以下の箇所で変更できます。

変更前

font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif;

変更後*

font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;

月別アーカイブのリストの上下の間隔を狭くする

archive-list ul の padding を変更します。

.archive-list ul{
   padding:0 0 20px 10px;
   list-style-type:none;
   line-height:1.5em;
}
.archive-list ul a{
   color:#2098a8;
}
.archive-list ul li{
   padding-bottom:7px;
}

画像サムネイルの変更

デフォルトだとトップページの画像のサムネイルのアスペクト比が維持されず、拡大縮小も自動で行われてしまうので、以下のように変更します。

変更前

.article-list img{
  float:left;
   width:300px;
   height:185px;
padding-right:20px;
}

変更後

.article-list img{
  float:left;
   max-width:200px;
   max-height:200px;
padding-right:20px;
object-fit: cover;
}

マークダウンで記事を書けるようにする

こちらの記事を参照してください。 Vaster 2 とは関係ありませんが・・・。

シンタックスハイライトを設定する

こちらの記事を参照してください。 Vaster 2 とは関係ありませんが・・・。

へっぽこプログラマーの備忘録

2017/09/17