SNSシェアボタンをWebアイコンフォントで表示

MovableType インターネット
Movable Typeの公式テンプレートで初期設定されていたSNSボタンを、画...

Movable Typeの公式テンプレートで初期設定されていたSNSボタンを、画像からWebアイコンフォントに変更。ついでに他リンクを追加。（参考サイト削除済み）

00922.png

Webアイコンフォント

FontAwesomeの無料版を使用。メールアドレスの登録が必要。利用者登録後、発行されたコードを<head>内に記述。

<script src="//kit.fontawesome.com/123456789.js" crossorigin="anonymous"></script>

テンプレート

<div class="sns">
<ul>
 
<li class="twitter"><a href="//twitter.com/share?url=<mt:CanonicalURL>&text=<mt:EntryTitle encode_html="1">" target="_blank" title="Twitter"><i class="fab fa-twitter"></i><span> Twitter</span></a></li>
 
<li class="facebook"><a href="//www.facebook.com/share.php?u=<mt:CanonicalURL>" target="_blank" title="Facebook"><i class="fab fa-facebook-square"></i><span> Facebook</span></a></li>
 
<li class="hatena"><a href="//b.hatena.ne.jp/add?mode=confirm&url=<mt:CanonicalURL>&title=<mt:EntryTitle encode_html="1">" target="_blank" title="はてなブックマーク"><b>B!</b><span> Hatena</span></a></li>
 
<li class="pocket"><a href="//getpocket.com/edit?url=<mt:CanonicalURL>" target="_blank" title="Pocket"><i class="fab fa-get-pocket"></i><span> Pocket</span></a></li>
 
<li class="line"><a href="//line.me/R/msg/text/?<mt:EntryTitle encode_html="1">%0D%0A<mt:CanonicalURL>" target="_blank" title="LINE"><i class="fab fa-line"></i><span> LINE</span></a></li>
 
<li class="feedly"><a href="//feedly.com/i/subscription/feed/https%3A%2F%2Fkaoriz.net%2Fatom.xml" target="_blank" title="Feedly 購読"><i class="fab fa-flipboard fa-rotate-315"></i><span> Feedly</span></a></li>
 
</ul>
</div>

<i class="fab fa-twitter"></i>など、<i>～</i>がWebアイコンフォント。はてなブックマークとFeedlyはフォントが無いが、はてなは「B!」を太字にして公式アイコンっぽく表現。

Feedlyは「flipboard」フォントに小細工し、公式カラーを合わせて誤魔化した。

<i class="fab fa-flipboard"></i>

↑この表記 を315度回転させると、こうなる→ 

<i class="fab fa-flipboard fa-rotate-315"></i>

「fa-rotate-315」という文字を追記した。

リンク中の <mt:EntryTitle encode_html="1"> はページタイトル、<mt:CanonicalURL> はページURL、lineの「%0D%0A」は改行コード、feedlyの「/feed/」後は購読用ファイル https://kaoriz.net/atom.xml をエンコードしたもの。

文字表記部分の<span>～</span>はパソコン表示時のサイドバー、タブレット、スマートフォンなど、狭い画面ではカットされるようにタグで挟み、スタイルシートで指定。

00921.png

スタイルシート

.sns ul{
display: flex;
flex-wrap: wrap;
text-align: center;
}
.sns ul li{
display: inline;
flex: 1;
margin: 2px;
padding: 5px;
}
.sns ul li a{
width: 100%;
display: inline-block;
color: #ffffff;
}
.facebook{
background: #3b579e;
}
.twitter{
background: #55adef;
}
.hatena{
background: #00a4de;
}
.pocket{
background: #f13d53;
}
.line{
background: #00c300;
}
.feedly{
background: #89c131;
}

パソコンなど2カラム表示画面のサイドバーで<span>の文字を消す場合の記述。

aside .sns span{
display: none;
}

タブレットやスマートフォンなど、狭い画面で<span>の文字を消す場合の記述。

@media(max-width:768px) {
 .sns span{
 display: none;
 }
}

画像に関する記述について、アイコン使用時はスタイルシートにて指定したが、今回はテンプレートに直接組み込む形を取った。

posted on August 9, 2021
-

related entries