はてなブログに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」に貼り付けてください。

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

おわりに

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

当サービスお得情報紹介・5名限定モニター生募集

当サイトのサービスはサイト作成だけでなく修正・カスタム・アクセスアップだけに留まらず、初心者向けに副業・アフィリエイトのノウハウも紹介しております。少しでも購入者が満足できるようなサービス提供を提供中。

購入して終了ではなく….サービス終了後も定期的なやりとりを通じてお客様の相談・依頼をいただくことが一番重要だと思っております。長い付き合いになると思いますが、当サービスを利用して会社の利益アップ・脱ノウハウコレクターとなりませんか?

 

学生・主婦の方から社会人の方まで幅広くご依頼をいただいております。

上記のサービスはいずれも好評です。特にアフィエイトをしている人でなかなか成果の出ない人や初心者で何からすれば良いのかわからない人にはおすすめのサービスとなっております。

ライン募集

ライン公式アカウントでもサービス情報をお届けしております。お友達に追加頂いた方には現在有料情報を無料で提供しております。この機会に友達追加してはどうでしょうか?
友だち追加
サービスご依頼ご希望の方はサイト内に設置「お問い合わせ」フォームより依頼・または下記よりご連絡ください。当サービスはプロフィールにもありますよう「ココナラ」にて600件以上の販売実績と評価4.8以上であるプラチナ会員認定

ココナラ経由だともっと割引?

ココナラ経由でサービスをご利用頂きましたお客様には貴重な特典・割引価格で提供しております。このチャンスにぜひご検討ください。
アクセスアップ狙った1500記事+ツール販売します 20ジャンル全部で1500記事+ツール販売・PVアップ向け

ご依頼お待ちしております。

また、2020年にはあるモニター生が私のコンサルサポートを実施してココナラ での販売を開始しました。2020年7月末から8月末までの1ヶ月間での成果ですが。売り上げではなく、実際の収入見込みが22万達成できました。新規アカウントです。この調子で頑張って欲しいです。

上記のモニター生同様、ココナラ を使って副業サポートコンサル希望のモニター生を5名募集しております。

モニター価格は2種類あります。私が徹底的にサポートまたは定期的なアドバイスの2パターンあります。興味のある方は、こちらも合わせてお問い合わせよりご連絡ください。

ご依頼・ご質問等はコチラから。内容を確認次第、順次対応させて頂きます。

お名前
必須
メールアドレス
必須
サービス内容
メッセージ本文
 
最新情報をチェックしませんか?