忍者ツールズおすすめのセットスタイルを使ってサイトにSNSボタンを設置する方法!

忍者ツールズの新規登録が完了したら、サイトにSNSボタンを設置してみましょう。

まだ新規登録していない方は、下の記事を参照してください。

→ 忍者ツールズの新規ユーザー登録の方法!

ツールを作成しよう!

新規登録完了画面から「サービス一覧へ」ボタンをクリックします。

この画面が消えてしまった人は、新規登録完了メールを開き、ログイン画面から忍者ツールズの管理ページにアクセスしてください。

初めてのツール作成です。

「サービス一覧からツールを作成してみよう!」をクリック。

忍者ツールズの管理ページが開きます。

下の方へスクロールしましょう。

忍者おまとめボタンの「ツールを作成」をクリック。

利用規約をよく読み、「利用規約に同意して次へ」をクリック。

「WordPress」をクリック。

おすすめのセットのスタイルを利用してSNSボタンを設置しよう!

忍者ツールズおすすめのセットを使うと、同じ大きさのボタンなので統一感があっていいです。

気に入ったものにチェックをいれます。

「次へ」をクリック。

選択したボタンのプレビュー画面が表示されます。

上の黄色い枠のボタンがPC用で、下がスマホ用のプレビューです。

表示方法は縦並び・横並び、右寄せ・左寄せを選択できます。

スマートフォン表示は、レスポンシブ対応なら「オーバーレイ」を選びましょう。

表示位置、表示方法、画面下からの高さを設定することができます。

すべての設定が終わったら、下にhtmlのソースコードをコピーしてサイトまたはブログに貼り付けましょう。

「コードをコピーする」をクリック。

WordPressにボタンを設置しよう!

WordPressの「外観」から「テーマの編集」をクリック。

「個別投稿(single.php)」をクリック。

黄色い枠がGoogleアドセンス広告のコードです。

その下に忍者ツールズのSNSボタンのコードを貼り付けます。

さっきコピーした忍者ツールズのコードを貼り付けました。

ボタンの表示を確認しよう!

これがブログの個別ページの一番下のGoogleアドセンス広告です。

この下にボタンが設置されているかどうか、ブラウザを更新して確認してみましょう。

バッチリ表示されています。

・・・ただ、広告にぴったりとくっついているのが気になりますね。

押しやすくするためにも少し離した方が良さそうです。

ボタンの位置をCSSで調整しよう!

忍者ツールズボタンのコードには、「ninja_onebutton」というクラスがふられています。

これを使ってスタイルを追加しましょう。

「外観」→「カスタマイズ」をクリック。

「追加CSS」をクリック。

上に10PX余白をあけてみます。

CSSを記述したら「保存して公開」をクリック。

広告との間に余白ができてボタンを押しやすくなりました。

ボタンを押してSNSでフォローしたりいいねしたり共有したりできるかどうか確認してみてください。

忍者おまとめボタンのホーム画面でボタンの管理をすることができます。

解析のところにマウスオーバーすると、「変更」というボタンが現れるので、クリックします。

この画面でボタンに名前をつけたり、解析を無効にしたりすることができます。

ボタン名をつけます。

サイト名など、わかりやすい名前にしましょう。

私はGoogleアナリティクスで解析しているので、忍者ツールズの解析は無効にしておきます。

自分に合った設定をしてください。

「保存する」をクリック。

ボタン名がついて管理しやすくなりました。

解析は無効になっています。

ボタンはいつでも削除したり変更したりすることができます。

すぐにアクセスできるようにブックマークしておくことをお勧めします。


→ 忍者ツールズの新規ユーザー登録の方法!