Movable Typeの公式テンプレートで初期設定されていたSNSボタンを、画像からWebアイコンフォントに変更。ついでに他リンクを追加。（参考サイト削除済み）
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>はパソコン表示時のサイドバー、タブレット、スマートフォンなど、狭い画面ではカットされるようにタグで挟み、スタイルシートで指定。
スタイルシート
.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;
}
}
画像に関する記述について、アイコン使用時はスタイルシートにて指定したが、今回はテンプレートに直接組み込む形を取った。