WordPressプラグイン【VA Social Buzz】のカスタマイズ備忘録。謎のスペースができる?!

2016年11月2日

WordPressテーマ【STINGER PLUS+】のカスタマイズをちまちまとやっているのですが、なにせド素人なものでいつもカスタマイズする際はあちこちのサイト様にお世話になっております。有り難き幸せでございます。

頻繁に(かつ勝手に)お世話になっているkanamii様のところで素敵なプラグイン【VA Social Buzz】&実装説明記事を発見したので早速インストールしてみました。

 

 

プラグイン【VA Social Buzz】を使ってみた!

使ってみてかわいい感じになり、大満足です。

 

kanamii様の【VA Social Buzz】のインストール、カスタマイズなどの詳細は下記リンク先からご覧ください。

「この記事が気に入ったらいいね!しよう」WordPressプラグイン【VA Social Buzz】のカスタマイズいろいろ

プラグインのカスタマイズも行ったのですが、何故かうまくいかない箇所があったので追記させていただきます。

 

 

謎のスペースができてしまった・・・

kanamii様のところカスタマイズが可愛かったので、記事通りにstyle.cssに記載したつもりなのですが、『facebook・twitterへ最新記事をお届けします!』という部分と『twitterでフォローする』という部分の間に謎のスペースができてしまうという謎現象がおきてしまいました。

 

2016.11.4 追記

margin-topの追記では、PC上(Chrome、firefox)では謎のスペースが見受けられなかったのですが、スマートフォンでは謎のスペースができていました。また、スマートフォンでは縦に表示させると謎のスペースができていましたが、横の表示にするとスペースができていませんでした。

どこかしらの表示設定の問題なのか現状ではわかりませんでした。また分かり次第追記でお知らせ致します。ちなみにmargin-topを-70など数値を大きくするとtwitter でフォローするの表示にかぶってしまったりするので、ひとまず-50のままで放置しておきます。

2016.11.10  追記

参考にさせて頂いておりましたKanami様がスペースができた謎を解いてくださいました!!

今回起きた謎のスペースは、single.phpに記載する際に全角スペースが入っていた為に起きた現象でした。半角ではなく全角スペースが入るとエラーが起きてしまうのだそうです。要注意ですね!大変勉強になりました。

ということで、single.phpの全角スペースをなくした正しい記載に変更したら謎のスペースが消えてくれました。

Kanami様、貴重なお時間を使って謎を解いてくださり、本当にありがとうございました。改めてお礼申し上げます。

※以下に記載してある「margin-topの追記」はいらないので無視してください。笑

 

 

そんな謎のスペースを消すべく色々いじくっていたら、ようやく謎が解けました。

 

実際の謎スペースはこんな感じでした。↓

%e3%82%b9%e3%83%9a%e3%83%bc%e3%82%b9%e3%82%92%e5%9f%8b%e3%82%81%e3%81%9f%e3%81%84

上記のように変なスペースができて分かりづらいしレイアウトがおかしなことに・・・。

 

下記が初めにstyle.cssに書き込んだコードです。

/*最新記事お届けメッセージ*/
.otodoke-m p {
  background-color:#eee;
  font-size: 15px;
  color: #707070;
  line-height: 30px;
  text-align: center;
}

↑このままだと、『facebook・twitterへ最新記事をお届けします!』という部分と『twitterでフォローする』という部分の間にスペースができてしまったので、

 margin-top:-50px;

という一文を追加しました。

 

こんな感じ↓です。

/*最新記事お届けメッセージ*/
.otodoke-m p {
  background-color:#eee;
  font-size: 15px;
  color: #707070;
  line-height: 30px;
  text-align: center;
  padding-bottom:5px;
  margin-top:-50px;
}

 

この一文を追加すると・・・

 

%e3%82%b9%e3%83%9a%e3%83%bc%e3%82%b9%e5%9f%8b%e3%82%81%e3%82%8c%e3%81%9f

これで謎のスペースが埋まりました!

 

ちなみに『 margin』とは・・・

下図のボックスモデルというものがあるのですが、marginはコンテンツの外側の余白サイズを管理することができます。

上下左右(top,bottom,left,right)調整が可能です。

%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%83%a2%e3%83%87%e3%83%ab

 

 

marginについて詳しく書いてあるサイト様があったので参考に貼っておきます。

http://open.shonan.bunkyo.ac.jp/~ohtan/kouza/css-margin.html

 

 

まとめ

初めはstyle.cssに書き込む場所が悪かったのかと何度か試してみたのですがそれではなかったようですね。

私の場合はmarginの調節で解決できました。

もしうまくいかないことがあれば、一度お試しください。