はてなブログにSNSフォローボタン(スマホのアプリ型デザイン)を設置する人気フラットカスタマイズ

f:id:buchibuchi4647:20170507220533j:plain

コピペで簡単!はてなブログのフォローボタンにタイトルをつけてカスタマイズしましょう。今回はスマホのアプリのようなデザインのフォローボタン。

フォローボタンは全部で(流行のinstagramを含んだ)6種類!記事上、または記事下に簡単にコピーして貼り付けるだけの簡単な作業ですので、ぜひお試しください。

フォローボタンをタイトルつけてカスタマイズ

フォローボタンに枠や背景をつけて目立たせているのはよく見かけます。今回はタイトルもつけることにより、いっそう目立つことを意識したカスタマイズです。また、スマホのアプリのような形のフォローボタンを作っていました。

基本的にレスポンシブ対応を意識して作っています。

実装後 

f:id:buchibuchi4647:20170507202856p:plain

「サイトタイトル」〜フォローボタン設置まですべてコピペで簡単にできますので、初心者の方でも可能なカスタマイズです。

また、各フォローボタンにマウスを近づけると色が変わるようにしています。フォローボタンは左から「はてなブックマーク、twitter,読者登録、facebook,インスタグラム、feedly」。6種類のフォローボタンがありますが、使わなければ削除してください。

設置手順1

上記のコードを管理画面の[設定]→[詳細設定]→[head に内容を追加]に貼り付けて下さい。フォントを読み込むコードになります。

注意

カスタマイズしていると、コードを2重に貼り付けることがあります。上記のコードをすでに貼り付けていないか確認してください。

設定手順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段目」を書き換えることによってタイトルを変更

1段目は「follow」や「フォローお願いします」と僕は書いていました。2段目は自分のブログタイトルや目を引くようなキャッチフレーズに変更してください。空欄にすることで、どちらか一方のみ表示も可能です。

設定手順3(cssを貼り付け)

最後にcssの設定です。今回は3種類のデザインを紹介します。気に入ったものを選んで貼り付けてください。

以下のコードを「デザインcss」に貼り付けてください。

基本的にレスポンシブデザインで作っていますので、スマホ設定はレスポンシブ対応に設定してください。

背景色を変更する

  • 70行目でタイトルの背景色を変更。81行目でフォローボタンの背景色を変更

現在の背景色は黒になっています。ブログに合わせて変更してください。

WEB色見本 原色大辞典 - HTMLカラーコード

横幅を調整

現在は6つのフォローボタンに合わせて横幅を設定しています。フォローボタンを削除することによってレイアウトが崩れることがあります。

  • 5行目、58行目の〜pxの数字の値を変更

数字の値を変更することによって横幅を変更できますので調整してください。

その他のフォローボタン

最後のフォローボタンを2種類紹介します。手順1,手順2は同様です。手順3のcssの貼り付けであなたの好みあったものを選んで選んで貼り付けてください。

アプリ型フォローボタン

スマホのホームボタンのアプリのようなフォローボタン。かわいいデザインです。

f:id:buchibuchi4647:20170507214509p:plain

以下のコードを「デザインcss」に貼り付けてください。

不要なフォローボタンを削除したときの横幅の設定は上記の「横幅の調整」と同じ方法です。

個性的なデザインのフォローボタン

もっと丸みのあるフォローボタンです。全体的に文字も大きくしました。

f:id:buchibuchi4647:20170507215624p:plain

 以下のコードを「デザインCSS」に貼り付けてください。

こちらも、不要なフォローボタンを削除したときの横幅の設定は上記の「横幅の調整」と同じ方法です。

おわりに

カスタマイズは楽しいです。今回の反響が良かったら、いろいろ紹介したいと思いますのでよろしくお願いします。

企業向けHP/個人向けブログ|無料制作サービス6月30日まで

ホームページ・ブログ制作依頼に高額料金を払っていませんか?

フリーランス・個人事業主だからこそ無料でできるサービス。もちろん、無料だからといって質の心配無用。多数の企業様とのご依頼経験を積んだプロによるサービス。

今回は指定のサーバーに契約していただ人のみ限定のサービスとなります。たったこれだけの条件でHPやブログを運営可能。

・おしゃれなHPで集客したい・お店の商品をネットで販売したいなど

・学生・主婦が隙間時間にブログで稼ぐのは当たり前の時代!コソッとバレずに副収入を稼ぐノウハウもご一緒にプレゼント!

今回の企画は6月30日までの期間限定となりますので、お早めのご依頼お待ちしております

※現在、多数のご依頼をいただいております。

依頼をご希望の方に関してはお問い合わせよりご連絡ください。基本即日対応させていただきますが、納期につきましては多少前後することがありますのでご了承ください。

※初めてホームページを依頼するという方も安心してご相談くださいませ。

初めてで分からないのはお客様皆様ご一緒です。まずはお気軽にお問い合わせくださいませ。

おすすめの記事