Vaster2のテンプレートをカスタマイズ

Vaster2のテンプレートをカスタマイズサムネイル

そのままでも十分に使うことができるVaster2ですが、使ってるうちに手を加えたくなってきたので、ご紹介兼忘れないように記録したいと思います。
※Vaster2とはBloggerブログで使えるテーマです。

ちなみに自分が使っているテーマはVaster2-テンプレートデザイナーの方です。最初は簡単にデザインが変更できるということから、初心者用のテーマを選んで始めました。今となっては、どっちでもいいかな?とも思いますが、せっかくなので簡単な方を使っています。

もし、同じように変更をしたい方がいらっしゃいましたら、ソースコードの /* の中の文字 */ 部分やclass、IDで検索して探してみてください。

※必ずバックアップを取ってから編集するようにしましょう。

Vaster2はこちら
Vaster2|レスポンシブ対応済みのblogger日本語テンプレート

自分好みにカスタマイズ

記事中のフォントサイズ、デザイン

/*  記事のフォント  */
.main-outer h1{
 font-size:22px;
 line-height:1.6em;
 padding:10px 0 10px 10px;
 border-left: 8px solid $(entryh3.border);
  color:$(entryh3.color);
 border-bottom:3px double $(entryh3.border);
  color:$(entryh3.color);
 margin-bottom: 40px;
}
.entry-content h2{
 font-size:22px;
 padding:10px 10px 5px 10px;
 border: 2px solid $(entryh3.border);
 color:$(entryh3.color);
 box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
 -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
 -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
 -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
 -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
 margin-top: 40px;
}
.entry-content h3{
 font-size:17px;
 padding:10px 0 10px 10px;
 border-left: 3px solid $(entryh3.border);
  color:$(entryh3.color);
}
.main-outer p{
 font-size:15px;
 line-height:1.7;
 padding-bottom:24px;
}

h1タグ、h2タグ、h3タグのデザインの変更及び各フォントサイズの変更をしました。

ブログの見出しデザインカラーを一つの項目ですべて変更可能

どうせ、ブログのイメージカラーは統一するだろうということで基本的なカラーリング変更を、Blogger テーマ デザイナー中見出し(h3)の左線中見出し(h3)の文字色で同時に選択できるようにしました。

Vaster2-テンプレートデザイナーを使っていることの利点ですね。

ヘッダーの余白

/*  ヘッダー  */
.Header{
 width:100%;
 background-color: $(header.background.color);
 padding-bottom: 30px;
 border-top:3px solid $(header.topborder.color);
}

上記、ヘッダーを編集するところで


 padding-bottom: 30px;
 border-top:3px solid $(header.topborder.color);

上記2文を削除して、ヘッダーにある空白と線を消しました。少しすっきりした感じになります。

記事ページの枠線

/*  記事ページ  */
.main-outer{
 float:left;
 width:710px;
 background:$(kizi.background);
 padding-left:20px;
 box-sizing:border-box;
border-left:1px solid #e6e6fa;/*  左線  */
}

記事ページ内での表示の際にPCから見た場合、左側に線がなく読むときに曖昧な感じがしたので、左側に薄い線を引くように「 border-left:1px solid #e6e6fa;/* 左線 */ 」を追加しました。

サムネイル画像

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

トップページで表示されるサムネイル画像ですが、デフォルトの状態だと記事最初に来る画像によっては、引き伸ばされて表示されてしまうことがあります。そこで、「 object-fit: cover; 」を追加して画像を引き伸ばすのではなく、中心でトリミングされるように設定しました。

パンくずリストの余白

/*  パンくずリスト  */
.breadcrumb-wrapper { 
 margin: 10px 0 15px;
}

パンくずリスト、上の余白を少し小さくしました。

ヘッダーナビリストの開閉廃止

デフォルトで上部に設置されているメニューは、スマートフォンでの閲覧時、ページ読み込み時に開いた状態になっていて、読み込み完了と同時に閉まるという、なんとも言えない、お粗末感漂うメニューとなってしまいます。メニュー自体はとても使いやすいと言うのに……

と言うことで、参考記事を用いて、メニューの開閉のみを廃止することにしました。

@media screen and (max-width: 768px){
 .button-toggle{
 display:none;

「display」を「none」に変更する。

 .header-nav li {
 border: 1px solid #666;
 margin: 1px;
 width: 48%;
 border-radius: 6px;
 text-align: center;
 }

レスポンシブデザインの「.header-nav li { 」の中身を上記に変更する。上記はスマートフォンで表示すると、3列表示になっているが2列にする場合、48%→32%にすること。

<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

head の script src=…… を切り取り、 /body の直前に貼り付ける。

参考にした記事

Bloggerの無料日本語レスポンシブテンプレート「Vaster2」のカスタマイズ

Vaster2でレスポンシブデザインにリニューアル

記事リストの画像の縦横比を変えない方法 [Blogger / Vaster2]

参考にさせて頂いたブログ記事です。自分がやったこと以外にも、参考になることが多いと思います。他にやりたいことがあったり、自分の説明ではできないなどありましたら、是非参考に一度読んでみてください。

適当にいじってみて、ここが変わる!っていうのも楽しむのもいいものですよ。

スポンサーリンク
スポンサーリンク

ふぉろみー

ブログ更新ツイッター作りました。スロット以外はこっちで告知されます。(フィギュアetc)
よかったらフォローしてください!
 

いろいろつぶやくアカウントはこちら
 

ブログランキング参加中

よかったら押してください!
ブログランキング・にほんブログ村へ

0 件のコメント :

コメントを投稿