ニートを目指して三千里 ひねくれ女子の小言日記

ニートを目指すひねくれ者が日々のうっぷんを書いたり書かなかったりするやつ

「フォローボタン」「SNSシャアボタン」をカスタマイズ

 「ブログをいい感じにするぞ!」強化月間、9日目です。

開設からの歩みはこちらにまとめているので、よかったら!

 

 

はじめに

ブログを書くようになってから、

ブログを読むようになりました。

すると、多くのブログでよく見るものが・・・

 

サイドバーに現れる、フォローボタン

 

記事のはじめや終わりに現れる、SNSシェアボタン

 

私もやりたい!!!!!

 

ということで、重い腰を上げて、

やってみることにしました!

 

Before/After

なお修正前は、

はてなブログにデフォルトで備わっているものだったり、

デザインはさておき、RSSの設置をしたものでした。

 

フォローボタン 

- フォローボタン(サイドバー) Before-

 

- フォローボタン(サイドバー) After -

  

シェアボタン

- 修正前シェアボタン(記事下) Before-

 - 修正前シェアボタン(記事した) After -

 

いい感じにできました!

手順というほどでもないですが、

以下の流れで設定しました。

 

デザインを決める

というわけで、まずデザインを決めます。

ありがたいごとに先人様は、

様々なボタンのカスタマイズを惜しげなく公開してくださっています。

 

デザインをまとめている記事がありました。

フォローボタン、シェアボタンそれぞれのデザインを決めます。

【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - BACKFLOW (バックフロウ)

 

デザインの決め方

個人的には、フォローボタンとSNSシェアボタンは、

同じ系統の異なるデザイン

がいいかなと思います。

 

統一性をもたせつつ、

フォローとシェアの役割を視覚的に分けたほうが、

わかりやすいかなって。

私はボタンの種類は同じで、背景色有り無しで違いをつけました。

 

なにはともあれ、

好きなデザインが一番だと思います!

 

カスタマイズを行う

選んだデザインの各記事の指示に従って、

htmlやcssを所定の場所にコピペしていきます。

 

頑張ろう。一回設定すれば素敵になる。

 

ちなみに、私がお世話になったのはこちらです。

 

フォローボタン

http://www.yukihy.com/entry/hatenablog-follow-botton-customize

 

私が設置したのは、2箇所です。

1つ目は、

デザイン -> カスタマイズ -> サイドバー -> +モジュール追加 -> HTML

から、「フォローする」というタイトルを作り、

プロフィール下にボックスを設定しました。

 デフォルトの読者ボタンや、Twitterのボタンは無くしました。

 

2つ目は、

デザイン -> カスタマイズ -> 記事 -> 記事下です。

 

シャアボタン

http://www.yukihy.com/entry/vol2-hatenablog-share-btn-custom

 

こちらは

 デザイン -> カスタマイズ -> 記事 -> 記事下

に設置しました。

それに伴い、

 デザイン -> カスタマイズ -> 記事 ->ソーシャルパーツ

のチェックは全てはずしました。

 

動作確認

動作確認をして、問題なければおしまいです!!!

お疲れ様でした!!!

私はリンクに不備があったり、ところどころ躓きましたが、

無事設定できてよかったー。

 

残タスク:スマフォのカスタマイズ

スマフォのカスタマイズは、はてなProじゃないと実施できないので、

今後の課題ですね。

Proにする野望はあるのでその時に忘れず設定したい。