HTMLコピペだけでSNSフォローボタンを作る【はてなカスタマイズ】

f:id:nyachiko07:20190421215906p:plain
HTMLでSNSのフォローボタン作りました！

コードのことは専門的にわからないけど、オシャレなカスタマイズしたい！

はてなブロガーさんのお役に立てれば幸いです。\( ˆoˆ )/

シンプルなフォローボタンを探していました。

CSSでデザインされているボタンをよく見かけますが、

自分が求めていたものは、もっと簡素でシンプルなボタン…

「もしかしたらはてなフォントアイコンを使用すれば、HTMLのみで作れるのでは？？」と思ってやってみました！

完成イメージ
①コピペするコード
②コードの書き換え
②コードを貼る
- 使用例1:サイドバー
- 使用例2:フッター
参考にした記事まとめ

完成イメージ

サイバーとフッターにフォローボタンを設置しています。

f:id:nyachiko07:20190419173547j:image

読者登録
Twitter
feedly
LINE友達登録

はてなブログのフォントアイコンを使用し、HTMLのみで表示をさせています。

アイコン部分は画像ではなく、フォントです。

文字をボタンにしていると思ってもらえれば。

下記の3ステップで導入可能です。

※注意※

はてな公式のフォントアイコンを使用するため、はてなブログのみで使用可能です。
他のテーマでは実装できない場合があるかも。検証していません。
元コードの控えを取るなどして、ご自身の責任で行ってください。
わたしも素人なのでできない場合のフォローはしかねます。悪しからずm(_ _)m

①コピペするコード

まずは下記をメモ帳などにコピペします。

\ Follow Me! /
<a href="読者登録のURL"> </a>

<a href="TwitterのURL"> </a>

<a href="https://feedly.com/i/subscription/feed/ブログのURL/feed"> </a>

<a href="LINE友達追加のURL"> </a>
</center>

②コードの書き換え

下記の文字を書き換えます。

読者登録のURL
TwitterのURL
ブログのURL
LINE友達追加のURL

※注意※

LINEの友達追加について

LINE＠やってない方は、

<a href="LINE友達追加のURL"> </a>

上記の部分を削除してください。

2019.4時点では、はてなフォントアイコンにLINEのアイコンがありませんでした（ガーン）

少しわかりずらいですが、わたしは人が2人並んだアイコンを採用してみました。

コレ→

Font Awesomeを使えば、LINEのアイコンを使用できると思います。が、わたしはややこしいのでやめました。

②コードを貼る

サイドバーやフッター、記事下など、お好みの場所に HTMLを張り付けたら完成！

使用例1:サイドバー

例えば、サイドバーに貼り付け可能です。

デザイン＞サイドバー＞モジュールの追加＞HTML＞先ほどのコードをコピペ

f:id:nyachiko07:20190419174648j:image

タイトルとアイコンは別のHTMLで組んで、

自己紹介文+フォローボタンは下記のHTMLを記述しています。

ほぼ同じ要領で、「詳しいプロフィール、「Amazonのほしいものリスト」、「CONTACT」にも、はてなフォントアイコンを使用しています。

ご参考までに。

ミニマリストのアサダです。自分の人生を生きるため、シンプルな暮らしを研究しています。
<a href="http://www.kero00.com/profile">
 詳しいプロフィール</a>
<a href="https://www.amazon.jp/hz/wishlist/ls/F3ESVA7PEDQW?ref_=wl_share"> Amazonほしいものリスト</a>
<a href="http://www.kero00.com/contact"> CONTACT</a>
 
<center>
\ Follow Me! /
<a href="https://blog.hatena.ne.jp/nyachiko07/nyachiko07.hatenablog.com/subscribe/iframe"> </a> <a href="https://twitter.com/le0mo0"> </a> <a href="https://feedly.com/i/subscription/feed/http://www.kero00.com/feed"> </a> <a href="https://line.me/R/ti/p/%40shp8355m"> </a>
</center>