最もカンタンな「SNSボタン整列方法」を紹介します!

最もカンタンな「SNSボタン整列方法」を紹介します!

輸出される自動車がきれいに並べられて船積みを待っている画像

 

「整然と並んで美しい・・」

 

 

「ツイッター」ボタンや「いいね」ボタンなど設置してみると、きれいに並ばなくて、「なんか見栄えが良くないな・・」なんてことはありませんでしたか?スタイルシートで微修正する方法がありますが、難しそうな気がしますよね。もっと簡単にボタンを整列させる方法がありますので、ここで紹介させていただきます。

 

 

 

SNSボタンをきれいに整列させるための もくじ

 

 

 

○ガタガタに並んだSNSボタンをきれいに並べたい

 

○カンタンなボタン設置方法を紹介します

 

  ・ローソンガジェットなら一瞬で設置できる

 

  ・カスタマイズ可能な忍者おまとめボタン

 

  ・SIRIUSではこんな方法もある

 

 

 

ガタガタに並んだSNSボタンをきれいに並べたい

 

 

 

平成26年3月9日

 

 

 

かなかうまくいかないな・・」

 

サイト運営する人にとって、フェイス
ブックやツイッターのようなSNSで広く
知られることの重要性が増してきて
います。

 

SNSのボタンを設置することは、まさに
その第一歩です。

 

しかし・・

 

SNSボタンを貼り付けて、並べて
みると、どうしてもガタガタにならんで
しまい、苦労されている方も多いと
思います。

 

 

<ガタガタに並んだSNSボタン・・見るに耐えません>

 

ソーシャルボタンをそれぞれ取得し、横に並べた画像

 

 

SNSボタンが整然と並んでいる
サイトは数多くあり、「うまい整列
方法が必ず存在するはず」と
考えて、調べてみました。

 

「SNSボタン設置 横並び」と
google検索してみると、数多くの
サイトで解説してあり、悩んでいる
も多いんだろうなと感じました。

 

たいていはCSS(スタイルシート)を
使った位置の微調整で対応する
ものでした。

 

貼り付けるたびに、個別にボタンの
コードをコピーして、位置調整する
作業にうんざりしました。

 

正直「めんどくさい」と感じました。

 

そこで、一番カンタンで楽な方法を
レポートさせていただくことにしました

 

 

 

カンタンなボタン設置方法を紹介します

 

 

 

ローソンガジェットなら一瞬で設置できる

 

 

 

定型のSNSボタンで良ければ
恐らく「ローソンガジェット」が
最も簡単な設置方法でしょう。

 

ローソンのホームページから入ります

 

 

ローソンガジェット

 

ローソンガジェットの紹介画面

 

 

「GADGET02 シェアして♪ガジェット」を
選ぶと、ガジェットの色を選択する画面
になります。

 

 

ローソンガジェットのコード取得画面

 

 

好きな色を選択して「ソースをコピーする」
ボタンを押して、好きな場所に貼り付ける
だけでボタンの設置ができます。

 

とてもカンタンですよね。

 

 

 

カスタマイズ可能な忍者おまとめボタン

 

 

 

つぎに、「忍者おまとめボタン」を
ご紹介します。

 

私のサイトでも使っている方法です。

 

100種類以上のボタンを選ぶこと
ができる上に、ボタンの順番の並び
替えなどカンタンに行えます。

 

忍者ツールズから入って、「忍者
おまとめボタン」を選択します。

 

 

忍者ツールズ

 

忍者ツールズの紹介画面

 

 

ボタンの種類がたくさんあることも
すごいですが、SNSからの訪問や
ボタンをクリックした数の解析も
行えます。

 

 

忍者おまとめボタンの特徴を説明した画像

 

 

ボタンは下のように並んでいます
ので、気に入ったものを選択して
ゆきます。

 

 

忍者おまとめボタンでソーシャルボタンが並んだ画像

 

 

気に入ったものを選択したら、
ドラッグして並べ替えすることも
簡単にできます。

 

 

忍者おまとめボタンでソーシャルボタンが並んだ画像

 

 

たてに並べることや、左寄せなど
を指定して完成です。

 

 

忍者おまとめボタンでソーシャルボタンが並んだ画像

 

 

管理画面からコードを取得して
あなたのサイトに貼り付けます。

 

 

様々な種類のボタンがカンタンに
貼り付けできますね。
↓↓↓

 

※もし「よかった」と思う記事がありましたら、あなたが使っておられる
 SNSで当サイトをご紹介ください。どうぞよろしくお願いします。

 

 

 

私が苦労した点

 

 

 

忍者おまとめボタンは手軽で便利
ですが、最初はコードを設置しても
表示されなかったので苦労しました。

 

忍者おまとめボタンから取得した
コードを<noReturn>〜</noReturn>
で囲むことで解決できましたので、
ご参考まで。

 

緑色で囲った部分が、忍者おまとめ
ボタンから取得したコードです。
はさむようにnoReturnで囲みました。

 

 

忍者おまとめボタンのコードを「noReturn」で囲った画像

 

 

 

SIRIUSではこんな方法もある

 

 

 

SIRIUSをお使いの方なら、ツイッター
とフェイスブックのボタンを簡単に設置
する方法があります。

 

 

siriusで右クリックして簡単にsnsボタンを設置する画像

 

 

ボタンを貼りたい場所で右クリック
「パーツ挿入」を選択すると、
フェイスブックとツイッターのボタンが
簡単に貼り付けできます。

 

 

こんな感じで設置できます。
↓↓↓
 

 

 

SNSボタンは2種類で十分と
お考えのあなたには、最も簡単な
設置方法です。

 

 

 

 

 

 

 

よく読まれる関連ページ

正しいrel=”nofollow”の使用方法へのリンク画像

正しいrel=”nofollow”の使用方法

今、私が本気で取り組んでいる文章力向上の手法へのリンク画像

今、私が本気で取り組んでいる文章力向上の手法

もう一度「読書」の意味を考える時が来たのかもしれないへのリンク画像

もう一度「読書」の意味を考える時が来たのかもしれない

よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)うへのリンク画像

よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う

 


Top相互リンクをいただいているサイトです。

簡単無料ホームページ

簡単に無料でホームページ作成。掲示板、ブログ、アルバム、携帯サイト、メールマガジン、お問合せフォーム、リンク集等の便利機能付き。商用利用もOKです




 
ブログパーツ
トップページ 目次 サイト公開までのプロセス プロフィール お問い合わせ