Pocketボタンの右横のスペース(マージン)を調節・削除する方法

どうも。葉です。

この記事では、Pocketボタンの右側にできてしまうスペースを削除・調節する方法を解説していきます。

1.この記事を読んでできるようになること

まずは、この記事を読んでできるようになることを確認してください。

Pocket for Publishers: Pocket Button」よりポケットボタンを作成し、他のソーシャルボタンと並べると、下図のようにPocketボタンの右側に大きなスペース(マージン)ができてしまいます。

Pocketの右マージンありの画像

他のソーシャルボタンは、均等に並んでいるのにPocketボタンの右側だけスペース(マージン)が大きいとかっこ悪いです。

そこで、CSSを編集して下図のようにPocketボタンの右側のスペース(マージン)も削除していきます。

pocketの右マージンなしの画像

2.Pocketボタンの右側のスペース(マージン)を削除

では、ここからは、CSSコードを編集して、Pocketボタンの右側のスペース(マージン)を削除していきます。

Pocketボタンの右側のスペースが大きくなる理由は、Pocketボタンが取っている横幅が広すぎるからです。この横幅をPocketボタンと同じサイズにすることで、右側のスペース(マージン)を削除できます。

では、実際の手順を解説してきます。

WordPress管理画面の左メニューより「外観→テーマの編集」をクリックしてください。

Pocketボタンの右側のスペース(マージン)を削除1

「base.css」をクリックして下さい。

Pocketボタンの右側のスペース(マージン)を削除2

開いた「base.css」の最下部に次のコードを貼り付けてください。


「ファイルを更新」をクリックしてください。

Pocketボタンの右側のスペース(マージン)を削除3

これで、「Pocketボタンの右側のスペース削除」のようにPocketボタンの右側のスペース(マージン)が変更・削除されたはずです。