わたしをもてなす暮らし方

主体的な生き方を実践し自己肯定感を育てるミニマリストあさだのブログ

MENU

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

お気に入りのモノだけで生活したい

ストイックなミニマリストのアサダです(*^^)v

主体性のある生き方を模索していて、幸せであることを大切にしています。

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

 

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

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

 

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

 

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

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

 

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

 

 

完成イメージ

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

f:id:nyachiko07:20190419173547j:image

  • 読者登録
  • Twitter
  • feedly
  • LINE友達登録

 

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

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

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

 

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

 

※注意※

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

 

①コピペするコード

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

 <p>\ Follow Me! /</p>
<p><a href="読者登録のURL"><span class="blogicon-hatenablog" style="font-size: 34px;" aria-hidden="true"> </span></a>

<a href="TwitterのURL"><span class="blogicon-twitter" style="font-size: 34px;" aria-hidden="true"> </span></a>

<a href="https://feedly.com/i/subscription/feed/ブログのURL/feed"><span class="blogicon-rss" style="font-size: 34px;" aria-hidden="true"> </span></a>

<a href="LINE友達追加のURL"><span class="blogicon-group" style="font-size: 34px;" aria-hidden="true"> </span></a></p>
</center>

 

②コードの書き換え

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

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

 

※注意※

LINEの友達追加について

LINE@やってない方は、

<a href="LINE友達追加のURL"><span class="blogicon-group" style="font-size: 34px;" aria-hidden="true"> </span></a></p>

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

 

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

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

コレ→

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

 

②コードを貼る

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

 

使用例1:サイドバー

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

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

f:id:nyachiko07:20190419174648j:image

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

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

 

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

 

ご参考までに。

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

 

 

使用例2:フッター

フッターにも同じHTMLをコピペで使用しています。

f:id:nyachiko07:20190421204950p:plain

 

 

参考にした記事まとめ

はてなフォントアイコンの一覧をまとめた記事!

ありがたーい!

(少しずつ増えているみたいなので、「はてなフォントアイコン」でまずはググってみて、一番新しいそうな記事を参考にされるのが良いと思います。)

www.foxism.jp

www.royalnaught.com

 

下記はFont Awesomeの話ですが、参考になりました!

発想的には同じかな、と。

www.okuni.me

saruwakakun.com