Vaster2 の適用とカスタマイズ

ちょっと前に Blogger のテーマをレスポンシブ対応済みの日本語テンプレートとして無料で公開されている Vaster 2 に変更しました。 適用方法とカスタマイズについて簡単にまとめておきます。 （全てをまとめきれていませんが） ## ダウロード 以下で無料公開されているのでダウンロードします。 - http://toumaswitch.com/vaster2/ ## カスタマイズする前に ここは基本的にプログラマー向けのブログなので言っておきます。 必ずバージョン管理しておきましょう。 後で元に戻したくなったりとか、デザインを変えたくなった時にどこを変えればよかったんだっけ？と必ずなります。 Git がおすすめですが、SVN でも別に構いません。 ## 適用方法 1. Blogger のメニューから「テーマ」をクリックし、「HTMLの編集」をクリックします。 1. エディタの中身を全て消します。 1. `Vaster2-TD.xml` をテキストエディタで開き、中身を全てコピーします。 1. Blogger のエディタに貼り付けし、「テーマを保存」をクリックします。 ## モバイル用の設定を OFF にする Vaster 2 はレスポンシブ対応なので、モバイル用の設定は OFF にしておきます。 ## feedy の設定を変更 以下の箇所を探します。 ```html <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 ## 全体の背景色を変える 以下の箇所で変更できます。 ```css body{ font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif; background-color: #fff; /* 全体の背景色 */ margin:0; font-size:16px; line-height:1.6em; } ``` 場合によっては以下も変更する必要があります。 ```css .main-outer{ float:left; width:710px; background:#ffffff; box-sizing:border-box; } ``` ## ヘッダーの色とか大きさを変える 以下の箇所を探します。 ```css .Header{ width:100%; border-top:7px solid #008ec2; background-color:#fff; padding-bottom: 30px; } ``` - `border-top` で画面上部のボーダーを変更できます。 - `background-color` でヘッダーの背景色を変更できます。 - `padding-bottom` でヘッダーとページリストとの余白を調整できます。 テキストの色は以下の箇所で変更できます。 ```css .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` で背景色を変更できます。 ```css .PageList{ width:100%; background-color:#4b99b5; } ``` テキストの色は以下の箇所で変更できます。 ```css .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; } ``` ## フォントの変更 以下の箇所で変更できます。 ***変更前*** ```css font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif; ``` **変更後*** ```css font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif; ``` ## 月別アーカイブのリストの上下の間隔を狭くする `archive-list ul` の `padding` を変更します。 ```css .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; } ``` ## 画像サムネイルの変更 デフォルトだとトップページの画像のサムネイルのアスペクト比が維持されず、拡大縮小も自動で行われてしまうので、以下のように変更します。 **変更前** ```css .article-list img{ float:left; width:300px; height:185px; padding-right:20px; } ``` **変更後** ```css .article-list img{ float:left; max-width:200px; max-height:200px; padding-right:20px; object-fit: cover; } ``` ## マークダウンで記事を書けるようにする [こちらの記事](https://kuttsun.blogspot.jp/2017/06/markdown-blogger.html) を参照してください。 Vaster 2 とは関係ありませんが・・・。 ## シンタックスハイライトを設定する [こちらの記事](http://kuttsun.blogspot.jp/2017/07/blogger-highlightjs.html) を参照してください。 Vaster 2 とは関係ありませんが・・・。