かわいいSNSシェアボタンの設置CSS、HTMLを簡単コピペで実装。(テーマHummingBird編)

SNSシェアボタン

こんにちわ、hanaです。

今回ちょっとブロガーらしい企画。シェアボタンの設置です。

当ブログはオープンケージ社のWordPressテーマ「ハミングバード」
を使っております。「ハミングバードの純正シェアボタン」もかわいいんですけど、やはりこだわりたい・・・。

そこで、純正をoffにしてあえて自分でコードを入れて反映させました。

たぶんSTORK19スワローなどほかのオープンケージ社のテーマなら反映されると思うので、ぜひ使ってください。

 

まず純正のSNSボタンをoffにしなきゃいけないため、外観>カスタマイズ>投稿・固定ページの設定へと進み、SNSボタンを表示しないにチェックを入れてください。

 

ちなみに参考にさせていただいたさいとはこちら。

カゲオさん、素敵!!ありがとう!!

CSSの設置

わたしはJETPACKを使っているため、カスタマイズの所に追加CSSが付け加えれるのでそこで調節しています。

無い方は、子テーマのテーマエディターからスタイルシートの一番下に貼り付けてください。

/* ボタン全体 */
.flowbtn12{
font-family:'Verdana',sans-serif;
border-radius: 4px;
display:inline-block;
width:90%;
font-size:20px;
transition:.4s;
text-decoration:none;
}
/* ボタン内テキストマウスホバー時 */
.flowbtn12:hover{
color:#fff!important;
text-decoration:none;
}
/* Twitter */
.flowbtn12.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn12.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Instagram */
.flowbtn12.insta_btn2{
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn12.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* ボタン内テキスト調整 */
.flowbtn12 span{
font-size:14px;
position:relative;
left:8px;
bottom:2px;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti2{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* ボタン同士の余白 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center !important;
}

/*新SNSボタン*/
/* ボタン全体 */
.flowbtn10{
display:inline-block;
font-size:35px;
text-decoration:none;
transition:.5s;
color:#444;
}
/* インスタ・pocket・ラインだけ少し大きく */
.flowbtn10 .fa-instagram,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-line{
font-size:38px;
}
/* Twitterマウスホバー時 */
.flowbtn10 .fa-twitter:hover{
color:#55acee;
}
/* Instagramマウスホバー時 */
.flowbtn10 .fa-instagram:hover{
color:#c6529a;
}
/* Facebookマウスホバー時 */
.flowbtn10 .fa-facebook-f:hover{
color:#3b5998;
}
/* Feedlyマウスホバー時 */
.flowbtn10 .fa-rss:hover{
color:#6cc655;
}
/* Pocketマウスホバー時 */
.flowbtn10 .fa-get-pocket:hover{
color:#ef3f56;
}
/* はてブマウスホバー時 */
.flowbtn10 .fa-bold:hover{
color:#1ba5dc;
}
/* YouTubeマウスホバー時 */
.flowbtn10 .fa-youtube:hover{
color:#fc0d1c;
}
/* LINEマウスホバー時 */
.flowbtn10 .fa-line:hover{
color:#00c300;
}
/* メールアイコンマウスホバー時 */
.flowbtn10 .fa-envelope:hover{
color:#f3981d;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* アイコン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
/* アイコン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}
/*点を消す*/
ul li:before {
width:0!important;
}

HTML

こちらはHTMLです。投稿のテキストに貼り付けると反映されます。

わたしはめんどくさいので、外観のウィジェットの記事下に貼り付けて、毎回表示されるようにしてあります。

<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn10"><i class="fab fa-twitter"></i></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn10"><i class="fab fa-instagram"></i></a></li>
<li><a href="FacebookページのURL" class="flowbtn10"><i class="fab fa-facebook-f"></i></a>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn10"><i class="fab fa-get-pocket"></i></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn10"><i class="fas fa-bold"></i></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn10"><i class="far fa-envelope"></i></a></li>
</ul>

ここの赤文字は消して、各SNSのIURLを調べて貼ってください。

各URLの調べ方

Twitter


Twitter」にログイン

プロフィール」をクリック

プロフィールページのURL」をコピペする(URLをダブルクリックしてhttps://もコピペしてください。)

“TwitterのプロフィールURL”の文字を消して、””の中にURLを貼り付け

instagram

Instagram」にログイン

人型のアイコン」をクリック

プロフィールページのURL」をピペする(URLをダブルクリックしてhttps://もコピペしてください。)

“InstagramのプロフィールURL”の文字を消して、””の中にURLを貼り付け

facebook

Facebook」にログイン

マイページ」を出す

FacebookページのURL」をピペする(URLをダブルクリックしてhttps://もコピペしてください。)

“facebookのプロフィールURL”の文字を消して、””の中にURLを貼り付け

注意

このコードは、リストの点を消すように書いてあるので、記事内の全部のリストの点が消えてしまいます。

なので、記事内のリストは番号のものを使う、もしくは記号の・を使うようにしてください。

 

以上、簡単なシェアボタンの実装でしたーーー。

ブログランキング・にほんブログ村へ

人気ブログランキング

 ご協力お願いします\(〇◆〇)/

また、チップもお待ちしております!! このページをチップで応援