黒姫のお絵かき帳

黒姫朱理が描いたイラストと何か思いついた内容を綴ってゆく日記です。

シンプルなブログShereアイコンを作った。

f:id:yulime:20151124065127p:plain

見た目はこんな感じ、「はてなブックマーク」「Google+」「Twitter」「Pocket」しか作れてないけど欲しい方はコードをプレゼントします。

Version

2.1. 2015-11-30 公式ソーシャルパーツが残ってもデザイン崩れを起こさないように修正

2.0. 2015-11-28 Categoryで色が効かなくなる問題を修正しました。
( PC版のみ再インストールをお願いします。)

導入方法

まずはソーシャルパーツを全てチェックをOFFにしてください。
そうしないと公式ソーシャルパーツが出てしまいデザインが崩れます。

この下にあるはてなスターはチェックONで大丈夫です。

f:id:yulime:20151130134305p:plain

「編集 > 詳細設定 > header」に以下のコードを貼ってください。

1. この二つをそのままコピペする
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2.shere.jsの貼り方

<script type="text/javascript">
<!--

https://gist.github.com/KurohimeAkari/bedc721e015999fc6c1f#file-shere-js

( コピペしてこの<!-- と --> の間に導入してください この文は削除してください)

-->

</script>

3.shere.cssの貼り方

<style>

https://gist.github.com/KurohimeAkari/bedc721e015999fc6c1f#file-shere-css

(コピペしてこの<style> と </style> の間に導入してくださいこの文は削除してください)

</style>

借りているレンタルサーバーなどから呼び出したほうが見た目的には綺麗になります。

完成図

f:id:yulime:20151130140015p:plain

もしくは

f:id:yulime:20151130135609p:plain

分からなかったらコメントください!
モバイルのみ版はまた導入方法が違うので▼そちらをよろしくお願いします。

drow.opheliapm.com

作った理由

ソーシャルサイトの読み込みの遅さとTwitterのカウント廃止で別にカウンター要らないかな?という理由で制作しました。

利点

CSSとjQueryだけなので読み込みが軽い! 直ぐにWebが見れると思います。

欠点

カウンターが搭載していない。 別にいいよね!(o・ω・o)

広告を非表示にする