デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

WordPress ソーシャルボタンを追加

FacebookやTwitterなどのSNSとの連携は今のブログでは必須ですね。
私のブログにもソーシャルボタンを追加してみました。
やり方には色々あるみたいですが、
私はプラグイン「tweet, Like, Google+1 and share」を使いました。

スポンサーリンク

「tweet, Like, Google+1 and share」の設定

プラグイン「tweet, Like, Google+1 and share」を
インストールしたら、WordPress管理画面の
「設定」⇒「Tweet Like Plusone」に入り、ソーシャルボタンの設定を行います。
スクリーンショット 2016-03-29 10.17.37
「Tweet Like Plusone」画面は英語で表示されています。
以下で設定内容を見ていきます。

表示させたいソーシャルボタンの設定

Select Icons to display設定で
表示させたいソーシャルボタンをチェックします。
ソーシャルボタン設定1

サイズ・配置の設定

Size of Icons設定でアイコンのサイズ大(Large)・小(Small)を選択します。
大小で表示されるアイコンのデザインが異なります。(以下図)
Alignment設定で左寄せ、右寄せ、回り込み有無を設定します。

ソーシャルボタン設定2

Where to Display設定で、どのページに配置するか、コンテンツの上、下
に配置するかを決めます。
ソーシャルボタン設定3

ソーシャルボタンのサイドバーの設定

さて、Tweet Like Plusone設定画面には、Vertical Scrolling sidebar
という設定があります。
Display Vertical sidebarにチェックを入れると、
以下図のようなブログの脇にソーシャルボタンのサイドバーを表示することができます。
ソーシャルボタン設定4

ソーシャルボタンの微調整

設定後、実際にページを見てみます。

コンテンツに配置したソーシャルボタン

スクリーンショット 2016-03-29 12.13.09
ツイートボタンの位置を他のボタンと揃えたかったので、
CSSでレイアウト調整します。

ソーシャルボタンのCSS調整は、Tweet Like Plusone設定画面の
Insert Custom CSSで行います。
ツイートボタンの上マージンに41pxの余白を入れて調整しました。
ソーシャルボタン設定7

以下のように、ツイートボタンを他のボタンの位置と揃えることができました。
ソーシャルボタン設定5

ソーシャルボタンのサイドバー

スクリーンショット 2016-03-29 12.13.23

ソーシャルボタンのサイドバーを見てみると、
表示の右端が切れてしまっています。
これもCSSを追加して表示の微調整を行いました。
ソーシャルボックスの枠と
いいねのフレームの横幅を広げました。(以下追加したCSS)
ソーシャルボタン設定8

ちゃんと枠内に収まってくれました。
ソーシャルボタン設定6

まとめ

以上、プラグイン「tweet, Like, Google+1 and share」を使った
ソーシャルボタンの設定方法でした。
参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン