2018年3月16日金曜日まとめ天才の話

Vaster2のカスタマイズをしてる天才たちマトメ

このブログ（天才日記）は、Bloggerのテンプレートの中でも日本語でわかりやすくレスポンシブデザインになっている「Vaster2」を使用しています。ダウンロードしたのはいいのですが自分で「あーしたい、こーしたい」という欲望が出てくるのです。

Vaster2を考えた超天才の人

この「Vaster2」を作った「トーマスイッチ」様です。ココからダウンロードして色々とカスタマイズしていきました。（他の天才の皆さんの記事を参考にして）ボクはアレなので「Vaster2-テンプレートデザイナー」の方をダウンロードしました。

※Vaster2でココに来られた方へ、残念ですが現在ダウンロードができないみたいです。

様々なブログサービスもありますしオリジナルドメイン〇〇.comなどを取得し自分でカスタマイズするのもいいと思います。最近はWordPressも日本語で説明してるとこがイッパイです！レスポンシブの基本なら「OXY NOTES」様は、え！コレでレスポンシブできるの？という方法を教えてくれます。

Vaster2のカスタマイズ方法を考えた天才の人たち

様々なページで様々な天才の皆さんがVaster2のカスタマイズ方法を教えてくれます。ダウンロードして「レイアウト」から要らない項目を削除したりプラスしたりしても、なかなか思い通りに行きません。そこで以下の天才のどのページを参考にしたか書いていこうと思います。

あかりlog様

休日の空間様（こちらは1ページにマトメて書かれています。）

メモロウ様（1ページにマトメて書かれています。）

「Previous」と「Next」を「前へ」と「次へ」に変更
表示速度を速くする（まだやってない）

「前へ」の前と「次へ」の後ろに半角スペース入れた。
「新しい記事」「古い記事」に変更

Vaster2カスタムブログ様

父ちゃんの日々ブログ様

サイトがタブレットサイズにならない場合（解決策2）

プゥ次郎さんの日記様

スマホの時のメニューを「OPEN」「CLOSE」で便利に

※どこかでワイドを100％にしたような？
Blogger Labo様

その他、参考になりそうなページ

淡々と過ぎ行く日々様
Chiiii Blog様

その他のVaster2カスタマイズ

■feedlyのリンクエラーに対処

<li class='feedly'><a href='https://feedly.com/i/subscription/feed/https://kannbann.blogspot.jp/feeds/posts/default?alt=rss' target='blank'><i class='fa fa-rss'/> <br/>Feedly</a></li>

■本文の行間を設定（広く）
NeverEnought様http://neverenough777.blogspot.jp/2016/03/bloggervaster.html
■画像を中心に（Vaster2では画像が中央指定しても左位置に）

今まで640pxだとほぼ中央に来てたが、逆に少し右寄りに。それ以下のサイズだといい感じにセンターぽく見える。
他の方法もあったけどスマホで左右にブレるのとヘッダーのヘッダの背景画像が少し狭まる。

http://fft-0064.blogspot.jp/2017/07/bloggervaster2_6.html#chapter1

img, video, object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
display: block;
}

↑この下に↓コレを入れた。CSSに以下の内容を追加する。

.separator img{
margin-left: auto;
margin-right: auto;
}

■Vaster2 カスタマイズ「パンくずリスト」を階層構造っぽく表示させる
https://papanohibilog.blogspot.com/2017/09/vaster2-breadcrumb.html
css部分、font-size:90%;、「HOME」を3か所「ホーム」に
■lineの色を変えた　「#18BC03」
■iPhone5s（4インチ）でも「B!」が改行されないようにように、それぞれのSNSボタンのロゴサイズを20pxに
.sns li span,.sns .fa{
font-size:20px !important;
}
・SNSボタンサイズのワイドを12％に
■ヘッダーの背景画像を変更
/* ヘッダー --------------------------------------- */
.Header{
width:100%;
background-color: $(header.background.color);
padding-bottom: 5px;
border-top:0px solid $(header.topborder.color);　＜*1
}
#header-inner{
width:1040px;
height:150px;　＜*2
margin:0 auto;
padding-top:60px;　＜*3
background-image: url("　背景画像のURL　");　＜*4
background-size:cover;
}
.Header p{
margin:0;
}
.PageList{ width:100%;
background-color:$(headernavi.background.color);
}
.grobal-navi{
width:1040px;
margin:0 auto;
}
--------------------------

【ここから編集の説明】
「　/* ヘッダー　」で検索

border-top:0px solid $(header.topborder.color);
height:150px;
padding-top:60px;
background-image: url("　背景画像のURL　");

その他：