借金は怖いですか?私はむしろ・・・○○なのですが。

【斬】アメブロにスクロール中ついてくるソーシャルボタンガジェットを設置してみる

アメブロに画面をスクロールしてもついてきてくれるソーシャルボタンを設置してみましょう。僕のアメブロの左についているこのガジェットです。ソーシャルボタンは、Google+、Bookmark、Twitterのツイート、Facebookのいいね!ボタンと連動しています。

1

2

ソーシャルボタンを設置するコードを取得

今回はソーシャルボタンが簡単に設置できる「忍者おまとめボタン」のWEBサービスを利用します。

3

【忍者おまとめボタン】

①「忍者おまとめボタンを新規作成」をクリック

4

②「新規ユーザー登録」をクリック

5

③「メールアドレス」を入力して「この内容を送信」をクリック

6

④メールBOXに送られて来るメールから「本登録URL」をクリック

7

⑤必要事項を入力して登録。

8

⑥「管理ページへ」ボタンクリック

9

⑦「忍者おまとめボタン」欄の「+追加する」をクリック

10

⑧「利用規約に同意して次へ」をクリック

11

⑨「その他ブログ」を選択

12

⑩「自分でカスタマイズして選ぶ」をクリック

13

⑪下記4種類のソーシャルボタを選択して「プレビュー&コードを取得する」をクリック

14

  • Google+1シェアボタン カウントありBOX
  • はてなブックマークボタンカウントあり大
  • ツイートボタン数あり大
  • いいね!ボタン大

⑫コードをコピーする

15

以上でGoogle+、Bookmark、Twitterのツイート、Facebookのいいね!ボタンの4種類のソーシャルボタンコードを取得完了です。

こちらのコードを、テキストエディットやメモ帳などに貼り付けておきます。

ソーシャルボタンをスクロール移動させるコードを設置する

ソーシャルボタンをスクロールしてもついてくるようにするための、HTMLとCSSを設置します。

スクロールを実現するためのHTMLとCSSは以下の通りです、HTMLの「忍者おまとめボタンで取得したコードを挿入」の部分には、さきほど取得したボタンのコードを貼り付けてください。

CSSの「margin-left:-100px;」「top:300px;」の部分はブログでの表示を確認しながら数値の調整を行なってください。

「margin-left:-100px;」の値を変更することで左右に、「top:300px;」の値を変更することで上下に、それぞれボタンの表示位置が移動します。

【HTML】

   <div id="social_box"> 
→ 忍者おまとめボタンで取得したコードを挿入
    </div>

【CSS】

#social_box{
    background:#fff;
    width:70px;
    padding:15px;
    margin-left:-100px;
    text-align:center;
    position:fixed;
    top:300px;
    list-style-type:none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

【HTML】のコードは、「マイページ」→「記事の編集」→「サイドバー」→「プラグインの追加」と進み、「フリープラグイン」にコードを貼り付けて保存を行なってください。

16

【CSS】のコードは、「デザインの変更」→「CSSの編集」と進み、すでにあるCSSのコードの末尾にコードを貼り付けて保存を行なってください。

ボタンの表示位置の調整は「表示を確認する」では、ボタンが表示されないため、一回一回ボタンの表示位置の値を変更し、保存を行ってから表示位置の調整を行なってください。

17

ボタンの表示位置の調整が完了したらスクロールしてもついてくるソーシャルボタンの設置は完了です!


banner-iki
あなたは借金が怖いですか?
私は死ぬまでに<1,000兆円>の借金をすることが夢なのですが…
このカテゴリーの関連記事

【斬】アメブロの最新記事一覧を15に変更してみる

アメブロのコンテンツ記事の量も少なく、読者も少なく、人気もほとんど無い初期の頃は、とにかく虚勢をはりましょう! テーマに沿う形

【斬】稼ぐより大切なこと(アメブロ篇)

アメブロのビジネス活用を考えた時、何から思い浮かべるでしょうか? Amazonや楽天のアフィリエイトリンクを入手して商品紹介を

【斬】アメブロで描くライフスタイル

今週の土日のどちらかでもいいので、一日何処にも行かないで下さい。そして全てのカーテンを締め切った状態で、小学校、中学校それぞれ

【斬】なぜこれまでアメブロをやらなかったのか?

なぜこれまで僕はアメブロを一度もやらなかったのか?巷では「アメーバ会員数が2,000万人を超えた!」などと騒がれていたにも関わ



dept