天宮です。
今回はVaster2で記事下部に表示している
SNSシェアボタンの変更をしていきます。
まずは現状の表示を確認してみましょう。
最近の傾向でいうとLINEもあった方が良いような気がします。
SNSシェアボタンのサイズ変更
テーマを開き .sns li を検索
.sns ul {
list-style:none !important;
padding: initial !important;
}
.sns li {
float:left;
width:30%;
height:54px;
margin:20px 3px;
list-style:none !important;
}
.sns li span,.sns .fa{
font-size:30px !important;
}
.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;
}
下記の値に変更
width:13%;
height:42px;
次に
.sns li span,.sns .fa{
font-size: 30px !important;
}
下記の値に変更
font-size:20px !important;
次に
.sns li a{
font-size: 13px;
position: relative;
display: block;
padding: 8px;
transition: 0.3s;
font-weight: 700;
border-radius: 6px;
text-align: center;
text-decoration: none;
}
下記の値に変更
font-size:13px;
編集をまとめると
.sns ul{
list-style: none !important;
padding: initial !important;
}
.sns li{
float: left;
width:13%;
height:42px;
margin: 20px 3px;
list-style: none !important;
}
.sns li span,.sns .fa{
font-size: 20px !important;
}
.sns li a{
font-size: 13px;
position: relative;
display: block;
padding: 8px;
transition: 0.3s;
font-weight: 700;
border-radius: 6px;
text-align: center;
text-decoration: none;
}
表示を確認してみましょう。
横一列に並びましたね、
うーん、なんか気になるボタンが…
うーん、なんか気になるボタンが…
はてブのフォントを変更
はてブの文字が細くて見栄えが悪いので
フォントを変更します。
.hatebu a:hover を検索
.hatebu a:hover{
background-color: #5d8ac1;
color: #fff;
}
この下に下記を追加
.fa-hatena:before {
content: "B!";
font-family: Verdana;
font-weight: bold;
}
.hatebu a:hover{
background-color: #5d8ac1;
color: #fff;
}
.fa-hatena:before {
content: "B!";
font-family: Verdana;
font-weight: bold;
}
/* feedly */
<i class='fa'>B!</i> を検索
下記に変更
<i class="fa fa-hatena"></i>
<li class='hatebu'><a expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.canonicalUrl + "&" + data:post.title + "｜" + data:blog.title' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'><i class="fa fa-hatena"></i><br/>はてブ</a></li>
表示を確認してみましょう。
コチラの方が見栄えが良いですね。
LINEボタンを追加
.pocket a:hover を検索
.pocket a:hover{
background-color: #f03e51;
color: #fff;
}
この後に下記を追加
/* LINE */
.line a {
background:#fff;
color:#00c300;
border:2px solid #00c300;
}
.line a:hover {
background:#00c300;
color:#fff;
}
.pocket a:hover{
background-color: #f03e51;
color: #fff;
}
/* LINE */
.line a{
background:#fff;
color:#00c300;
border:2px solid #00c300;
}
.line a:hover{
background:#00c300;
color:#fff;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
/* シェアボタン見出し */
<li class='feedly'> を検索
feedlyの</li>の後に下記を追加
<li class='line'><a expr:href='"http://line.me/R/msg/text/?" +data:post.title + "｜"+ data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=600');return false;' target='_blank'><i class='fa fa-comment-o'/><br/>LINE</a></li>
<li class='feedly'>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2FブログのURL' target='blank'><i class='fa fa-rss'/><br/>Feedly</a>
</li>
<li class='line'><a expr:href='"http://line.me/R/msg/text/?" +data:post.title + "｜"+ data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=600');return false;' target='_blank'><i class='fa fa-comment-o'/><br/>LINE</a></li>
なお、feedlyの
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2FブログのURL' target='blank'><i class='fa fa-rss'/><br/>Feedly</a>
ブログのURLの部分に自分のブログURLを
入力するのを忘れないようにしてください。
入力するのを忘れないようにしてください。
表示を確認してみましょう。
LINEのボタンが追加されました。
レスポンシブ スマホ表示の調整
width:47%; を検索
@media only screen and (max-width: 780px) {
.sns li{
width:47%;
}
}
/* 記事ページのリンク
----------------------------------------------- */
width:31%; に値を変更
スマホ表示を確認してみましょう。
47％のときは2個づつ並んでいたのが
3個づつ並ぶようになりました。
幅の％値については、
実際にスマホで確認してみて調整してください。
3個づつ並ぶようになりました。
幅の％値については、
実際にスマホで確認してみて調整してください。
