SNSボタンの表示についてです。
はてなブログでは、
デザイン →カスタマイズ →記事欄から、いろんなパーツ載せることできますが、、デザインがイマイチ・・・笑💦
ソーシャルボタンをカスタマイズするページはいくつも出てくる中で、参考にさせていただいたページをリンクしておきます。
ただ、多くの検索ページで
旧twitterが“Ｘ”でなく、twitterのままなアイコンで。。
なのでこの辺を今のアイコンにできるかどうか、、
これらを元に、
自身でFontAwesomeのアイコンページへ飛んでみます。さまざまなアイコンを取得できるサイトです。
アイコン設置のしかたが詳しいです ↓
FontAwesomeにはいろいろバージョンがあり。
反映させたいアイコンが、なるべく揃ってるバージョンを指定するほうがよく…。
ただいまのところ、
自分で反映させているのがバージョン7.0.0
スクリプトScript
設定 →詳細設定 →
<head>要素にメタデータを追加に以下を記入
<script defer src="https://use.fontawesome.com/releases/v7.0.0/js/all.js"></script>
HTML
続いて以下のコードを
デザイン →🔧カスタマイズ →
記事内の、下部分へ設置したいので
記事下HTMLへ記述します。
※“つゆきのこ”さんnoteサイトには
記事上用、記事下用と説明ありますので、参考になさってください。
<!--記事下へSNSシェアボタンの設置-->
<div class="sns-tag-cloud">
<!--<a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="sns-tag-cloud-hatenab" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加">
<em class="blogicon-bookmark lg"> </em> ブックマーク </a>-->
<a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" target="_blank" class="sns-tag-cloud-facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
<i class="fa-brands fa-square-facebook"></i> facebook </a>
<a href="https://x.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="sns-tag-cloud-twitter">
<i class="fa-brands fa-x-twitter"></i></a>
<a href="https://www.instagram.com/?ref=badge" target="_blank" class="sns-tag-cloud-instagram">
<i class="fa-brands fa-instagram"></i> Instagram </a>
<a href="https://www.pinterest.com//" target="_blank" class="sns-tag-cloud-pinterest">
<i class="fa-brands fa-pinterest"></i> Pinterest </a>
<!--<a href="https://getpocket.com/edit?url={URLEncodedPermalink}" target="_blank" class="sns-tag-cloud-pocket">
<em class="blogicon-chevron-down lg"> </em> ポケット </a>-->
<!--<a href="https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" target="_blank" class="sns-tag-cloud-line">
<i class="fa-brands fa-line"></i> LINE </a>-->
</div>
自分はfacebook、X、instagram、Pinterestの4つを表示してます。
SNSアイコンのリンクをどう得たか?
FontAwesomeの、
BRAND 515iconsって場所からリンク飛ぶと、表記のバージョンに即したアイコンが並びます。
使いたいアイコンが、
一堂に揃うバージョンを選べばokってことですね。
そこからコードをコピペして、
はてなのコードに反映させていく…という流れです。
<i class="fa-brands fa-x-twitter"></i>な部分がソレです。
（画面はfacebookですけど;）
実際やってみないとちと難しい~💧
とりあえずアイコンはこれで表記できるも、
それぞれ最初のログイン画面に飛ぶだけのアイコンとなります。
CSS
続いてボタンの体裁を整えるCSSを入力。
デザイン →🔧カスタマイズ →
{ }デザインCSSのところへ
/* 記事下ソーシャルボタン 下部の余白 */
.sns-tag-cloud-under {
margin: 0px 0 30px 0;
}
/* SNSシェアボタン */
/* 記事下ソーシャルボタン 上部の余白 */
.sns-tag-cloud {
margin: 30px 0 10px 0;
}
/* SNSシェアボタン */
.sns-tag-cloud {
padding-inline-start: 0px;
font-size: 12px;
font-weight: bold;
}
.sns-tag-cloud-under {
padding-inline-start: 0px;
font-size: 12px;
font-weight: bold;
text-align: center;
}
a.sns-tag-cloud-hatenab {
display: inline-block;
padding: 10px;
margin: 3px;
line-height: 1;
text-decoration: none;
color: #00a4de;
border: 1.5px solid;
border-color: #00a4de;
border-radius: 3px;
}
a.sns-tag-cloud-hatenab:hover {
background: #00a4de;
color: #fff;
}
a.sns-tag-cloud-facebook {
display: inline-block;
padding: 10px;
margin: 3px;
line-height: 1;
text-decoration: none;
color: #4064ac;
border: 1.5px solid;
border-color: #4064ac;
border-radius: 3px;
width: 100px;
}
a.sns-tag-cloud-facebook:hover {
background: #4064ac;
color: #fff;
}
a.sns-tag-cloud-twitter {
display: inline-block;
padding: 10px;
margin: 3px;
line-height: 1;
text-align: center;
text-decoration: none;
color: #000000;
border: 1.5px solid;
border-color: #000000;
border-radius: 3px;
width: 100px;
}
a.sns-tag-cloud-twitter:hover {
background: #000000;
color: #fff;
}
a.sns-tag-cloud-instagram {
display: inline-block;
padding: 10px;
margin: 3px;
line-height: 1;
text-decoration: none;
color: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
border: 1.5px solid;
border-color: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
border-radius: 3px;
}
a.sns-tag-cloud-instagram:hover {
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
color: #fff;
width: 100px;
}
a.sns-tag-cloud-pinterest {
display: inline-block;
padding: 10px;
margin: 3px;
line-height: 1;
text-decoration: none;
color: #bd081c;
border: 1.5px solid;
border-color: #bd081c;
border-radius: 3px;
width: 100px;
}
a.sns-tag-cloud-pinterest:hover {
background: #bd081c;
color: #fff;
}
a.sns-tag-cloud-pocket {
display: inline-block;
padding: 10px;
margin: 3px;
line-height: 1;
text-decoration: none;
color: #ef4056;
border: 1.5px solid;
border-color: #ef4056;
border-radius: 3px;
width: 100px;
}
a.sns-tag-cloud-pocket:hover {
background: #ef4056;
color: #fff;
}
a.sns-tag-cloud-line {
display: inline-block;
padding: 10px;
margin: 3px;
line-height: 1;
text-align: center;
text-decoration: none;
color: #21ba4e;
border: 1.5px solid;
border-color: #21ba4e;
border-radius: 3px;
width: 100px;
}
a.sns-tag-cloud-line:hover {
background: #21ba4e;
color: #fff;
}
変更を保存するをクリックして終了です。
＜PC版＞
＜スマホ版＞
インスタグラムのリンクカラーに苦心w😂
表示させたいSNSを、選んで反映されてみてください。
コメント