コピペで簡単！はてなブログのフォローボタンにタイトルをつけてカスタマイズしましょう。今回はスマホのアプリのようなデザインのフォローボタン。
フォローボタンは全部で（流行のinstagramを含んだ）６種類！記事上、または記事下に簡単にコピーして貼り付けるだけの簡単な作業ですので、ぜひお試しください。
フォローボタンをタイトルつけてカスタマイズ
フォローボタンに枠や背景をつけて目立たせているのはよく見かけます。今回はタイトルもつけることにより、いっそう目立つことを意識したカスタマイズです。また、スマホのアプリのような形のフォローボタンを作っていました。
基本的にレスポンシブ対応を意識して作っています。
実装後
「サイトタイトル」〜フォローボタン設置まですべてコピペで簡単にできますので、初心者の方でも可能なカスタマイズです。
また、各フォローボタンにマウスを近づけると色が変わるようにしています。フォローボタンは左から「はてなブックマーク、twitter,読者登録、facebook,インスタグラム、feedly」。6種類のフォローボタンがありますが、使わなければ削除してください。
設置手順1
上記のコードを管理画面の［設定］→［詳細設定］→［head に内容を追加］に貼り付けて下さい。フォントを読み込むコードになります。
注意
カスタマイズしていると、コードを２重に貼り付けることがあります。上記のコードをすでに貼り付けていないか確認してください。
設定手順2（htmlを貼り付け）
htmlでリンクの貼り付けをしていきます。設置したい所（記事上、記事下）に以下のコードを貼り付けてください。
ここで少しコピペ以外に重要な作業が必要になります。コピペだけじゃないのって思った方はすいません。しかし、簡単な作業なので大丈夫です。
snsの情報を入力する
このまま設置してしまうと、すべて僕の情報ままのフォローボタンなので書き換えます。
- 6行目の「english-apple-diy.hatenablog.com」 を自分のブログURLに変更
- 7行目の「joyous4647」を自分のtwitterアカウントに変更
- 8行目の「buchibuchi4647/english-apple-diy.hatenablog.com」を自分のはてなID/自分のブログURLに変更
- 9行目の「english.awa」を自分のinstagramアカウントに変更
- 10行目の「http://english-apple-diy.hatenablog.com」を自分のブログURLに変更
打ち間違いがないか確認しましょう。また、ブログURLを入力するとき「http://」が必要なのはfeedlyのみです。必要のないsnsフォローボタンは不要な行を削除してください。
タイトルを入力する
- 2行目の「1段目」、「2段目」を書き換えることによってタイトルを変更
１段目は「follow」や「フォローお願いします」と僕は書いていました。2段目は自分のブログタイトルや目を引くようなキャッチフレーズに変更してください。空欄にすることで、どちらか一方のみ表示も可能です。
設定手順3(cssを貼り付け)
最後にcssの設定です。今回は3種類のデザインを紹介します。気に入ったものを選んで貼り付けてください。
以下のコードを「デザインcss」に貼り付けてください。
基本的にレスポンシブデザインで作っていますので、スマホ設定はレスポンシブ対応に設定してください。
背景色を変更する
- 70行目でタイトルの背景色を変更。81行目でフォローボタンの背景色を変更
現在の背景色は黒になっています。ブログに合わせて変更してください。
横幅を調整
現在は6つのフォローボタンに合わせて横幅を設定しています。フォローボタンを削除することによってレイアウトが崩れることがあります。
- ５行目、５８行目の〜pxの数字の値を変更
数字の値を変更することによって横幅を変更できますので調整してください。
その他のフォローボタン
最後のフォローボタンを2種類紹介します。手順1,手順2は同様です。手順3のcssの貼り付けであなたの好みあったものを選んで選んで貼り付けてください。
アプリ型フォローボタン
スマホのホームボタンのアプリのようなフォローボタン。かわいいデザインです。
以下のコードを「デザインcss」に貼り付けてください。
不要なフォローボタンを削除したときの横幅の設定は上記の「横幅の調整」と同じ方法です。
個性的なデザインのフォローボタン
もっと丸みのあるフォローボタンです。全体的に文字も大きくしました。
以下のコードを「デザインCSS」に貼り付けてください。
こちらも、不要なフォローボタンを削除したときの横幅の設定は上記の「横幅の調整」と同じ方法です。
おわりに
カスタマイズは楽しいです。今回の反響が良かったら、いろいろ紹介したいと思いますのでよろしくお願いします。
