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

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

Vaster2を考えた超天才の人

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

Vaster2編集イメージ

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

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

あかりlog

休日の空間(こちらは1ページにマトメて書かれています。)
メモロウ(1ページにマトメて書かれています。)
  1. 「前へ」の前と「次へ」の後ろに半角スペース入れた。
  2. 「新しい記事」「古い記事」に変更
Vaster2カスタムブログ

父ちゃんの日々ブログ
プゥ次郎さんの日記
※どこかでワイドを100%にしたような?
Blogger Labo

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

その他の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;
}
--------------------------

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

  1. border-top:0px solid $(header.topborder.color);
  2. 30pxを0pxに(上の線を消す)
  3. height:150px;
  4. 今回の画像サイズだと高さ150pxが丁度良かった。
  5. padding-top:60px;
  6. この数値で画像の縦幅表示を調整。数字が大きいほどタイトルが下に行き画像の縦幅表示も広がる
  7. background-image: url(" 背景画像のURL ");
その他:
  • 画像をアップするだけの「新しい記事」を作成しHTMLから画像のURLを貼り付ける
  • 画像イメージサイズ:1040px*181pxでやった。
  • padding-bottom: 5px;ヘッダー画像とその下部分のマージン。この数値を大きくし幅を広げてもヘッダー画像には影響しない。
  • 背景イメージは左寄りになるためメインに見せたい部分を左に置くといい。今回は左に画像を置き背景は右に行くほど薄くなるイメージで。
パソコンでのイメージ

スマホでのイメージ

------
参考にさせていただいた皆様ありがとうございました!勝手にリンクを貼っておりますがご迷惑でしたらお手数ですがご連絡ください。直ぐに対処いたします。
------Ψ

1 件のコメント :

  1. h2下の空白が狭い

    タイトル下と写真の空白が広い

    この記事をシェアするの下の空白が狭い

    トップページ タイトルの大きさ

    スマホのトップの写真のサイズ(正方形に)

    トップページの枠線がズレてる

    広告のスペース

    返信削除