そのままでも十分に使うことができる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」のカスタマイズ
記事リストの画像の縦横比を変えない方法 [Blogger / Vaster2]
参考にさせて頂いたブログ記事です。自分がやったこと以外にも、参考になることが多いと思います。他にやりたいことがあったり、自分の説明ではできないなどありましたら、是非参考に一度読んでみてください。
適当にいじってみて、ここが変わる！っていうのも楽しむのもいいものですよ。
0 件のコメント :
コメントを投稿