Blogger Labo：【Vaster2】SNSボタンのカスタマイズ

このページでは、Vaster2のSNSボタンのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら


SNSボタンの見出しのカスタマイズ


SNSボタンの見出し

SNSボタンの見出しのCSS


 SNSボタンの見出しの設定 

.share-title{
    padding: .5em .75em;　上下・左右の余白（文字の開始位置と帯の幅）
    margin-bottom: 30px;　下外側の余白（SNSボタンまでの間隔）
    background:$(entryh2.background);　背景色
    color:$(entryh2.color);　文字色
}

上記が Vaster2のSNSボタンの見出しのCSSに説明を加えたもの。

基本的には「.share-title{」で検索して上記CSSを書き変えれば、好みに合わせて変更できる。

ちなみに、SNSボタンの見出しを記事のh2と同じ設定にしても見た目にズレが生じる。

詳しい原因は分からないが、見た目を合わせるには数値をいじって微調整すればよい。

SNSボタンリストのカスタマイズ


SNSボタンリスト

SNSボタンリストのCSS


 SNSボタンリスト全体の設定 

.sns{
    margin:10px auto;　リストの上下・左右の外側の余白
    text-align:center;　リストの中央揃え
    width:100%;　リストの横幅
}

 SNSボタンリストの設定 

.sns ul {
    list-style:none !important;
    padding: initial !important;
}

 SNSボタンリスト内の設定 

.sns li {
    float:left;　左揃え
    width:30%;　ボタンの横幅
    height:54px;　ボタンの高さ
    margin:20px 3px;　ボタンの上下・左右の外側の余白
    list-style:none !important;
}

  SNSボタンアイコンの設定 

.sns li span,.sns .fa{
    font-size:30px !important;　アイコンのサイズ
}

 SNSボタンリストのリンクの設定 

.sns li a {
    font-size:18px;　ボタンの文字サイズ
    position:relative;
    display:block;
    padding:8px;　ボタン内側の余白
    transition:0.3s;　時間的変化
    font-weight: 700;　文字の太さ
    border-radius:6px;　ボタンの丸み
    text-align:center;　ボタン内の文字の中央揃え
    text-decoration: none;
}

上記が Vaster2のSNSボタンリストのCSSに説明を加えたもの。

基本的には「SNSボタンのカスタマイズ」で検索して上記CSSを書き変えれば、好みに合わせて変更できる。

SNSボタンのカスタマイズ


SNSボタン

TwitterボタンのCSS


 Twitterボタンの設定 

 .twitter a {
    color:#00acee;　文字色
    background:#fff;　背景色
    border:2px solid #00acee　枠線
}

 カーソル通過時のTwitterボタンの設定 

  .twitter a:hover {
    background:#00acee;　背景色
    color:#fff;　文字色
}

上記が Vaster2のTwitterボタンのCSSに説明を加えたもの（他のボタンもほぼ同じ内容）。

基本的には「SNSボタンのカスタマイズ」で検索して上記CSSを書き変えれば、好みに合わせて変更できる。

やっておきたい設定


Feedlyボタンの再設定


多分、初期設定のままだとFeedlyのボタンが上手く機能していないハズ。

上手く機能しない場合は、以下の方法でコードを書き換えておく必要がある。

【方法】

・「HTMLの変更」から「feedly」でコードを検索
・「a href='http://cloud.feedly.com/#subscription%2Ffeed%2FサイトのＵＲＬ'」を
「a href="https://feedly.com/i/subscription/feed/サイトのURL/feed"」に書き換える

LINEボタンを追加する


LINEボタンを追加する方法は、既に詳しく説明しているサイトがある。

下記リンクのサイトが分かりやすいと思うので、そちらで参照してほしい。

・休日の空間