medium_2913018697

Facebook、Twitter、はてぶのボタンをまとめて設置!忍者おまとめボタンを WordPressへ。

FaceBook、SNSなどのソーシャルボタンをWordpressのプラグインである、「WP Social Bookmarking Light」で実現していた。だが、ソーシャルボタンが小さいのと、どうしてもボタンの間隔の調整が上手くいかない。

デザイン性もイマイチだ。理想としては、広告を左で、右に縦長にソーシャルボタンを設置したかった。

次のようなかんじにしたい)^o^(

 

ソーシャルボタン自体は、忍者おまとめボタンで簡単にできるが、WordPressへの組み込みにHTMLとCSSの知識が必要になる。このあたりもできるだけ詳しく説明したい。

ソーシャルボタンは忍者おまとめボタンでまとめて作る!

色々と探していたのだが、忍者おまとめボタンが最も簡単なのではと思う。忍者おまとめボタンは、さまざまなソーシャルボタンを色んなパターンで選ぶことができる。そして、横並び、縦並びも簡単にできる。

 

手順は、「新規ボタンを追加」でブログの種類を選択する。

 

おすすめセットは使わずに、「自分でカスタマイズして選ぶ」を選択する。

 

次のように大きいソーシャルボタンを選ぶことができる。

 

ソーシャルボタンをクリックすると下部に、追加される。

 

あとは、「プレビュー&コード取得」を押せばコード取得の画面になる。

 

このソーシャルボタンを縦で表現するには、「ならびかた」を「たて」にする。「僕は、「表示位置」は、「右寄せ」で統一している。

そして、下部にある「コードをコピーする」を押せばOKだ。

 

WordPressにコードを貼り付ける。

テーマによって貼り付ける場所がことなる。

僕は、proStyleというテーマを使っている。基本的には記事を出力する前に貼り付ける。

 

proStyleでは、post-single.phpで、関数the_content()にて記事を出力しているのでその上部へ貼り付ける。

 

float(フロート)で表示位置を整える。

HTMLは原則、縦に出力されていく。横並びに出力することはできない。

横並びにする場合は、「縦に出力されているのを、横にはね上げる(回り込む)必要がある」。この処理がfloat(フロート)になる。

僕の場合は、左上にGoogleAdsensで次にボタンツールとなるため、コードを貼り付けただけでは次のようになり、横に並ばない。

 

そこで、横並びにするために、Goole Adsensとボタンツールにfloatを設定する。

※floatにはleft(左方向)、right(右方向)があるが、今回のように次に出力されるものを左に並べるだけなら、left(左方向)だけでよい。

Google Adsensとボタンツールをdivタグのfloatで囲むことで、横に並ぶようにしている。

また、floatは指定したままだたと、次のコードまでfloatされてしまう。そのため、解除コード(style=”clear:both;”)を最後に挿入している。

 

忍者ボタンツールを横に展開して、記事の最後に整理する。

忍者おまとめボタンでRSSフィードも設定できるのでソーシャルボタンと合わせて配置してみた。

これでソーシャルボタンもはっきり分かるようになり、使いやすくなったのではないかと思う。

ソーシャルボタンを個々に設定すれば非常に面倒なのだが、忍者ボタンツールを使えば非常に簡単だ。

 

次の記事も書いています。

 

 

 


“Facebook、Twitter、はてぶのボタンをまとめて設置!忍者おまとめボタンを WordPressへ。” への1件のフィードバック

コメントは受け付けていません。