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サイトのURL'」を
a href="https://feedly.com/i/subscription/feed/サイトのURL/feed"」に書き換える

LINEボタンを追加する


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

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

休日の空間