Facebook Like Boxをプラグインを使わずレスポンシブに設置する

スポンサーリンク

Facebook Like Boxは全然プラグインを使わなくても、あっさり設置できるんだなと思いました。

設置手順を、メモしておきます。HTML5の場合の方法です。
(以下は、2014年9月29日時点の情報です)

まだ、Facebookページを作っていない場合は、先に作っておきましょう。

Continue reading “Facebook Like Boxをプラグインを使わずレスポンシブに設置する”

いいね!ボタン上の余白を消しソーシャルボタンを横に綺麗に並べる

今すぐ使えるかんたんmini LINE&Twitter&Facebook基本&便利技

ソーシャルボタンを横に並べるCSSをようやくスマートに書けるようになってきたしまぷー(@Shimapoo_jp)です。

できあがったCSSは、

.social-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.social-buttons:after {
  overflow: hidden;
}
.social-buttons li {
  float: left;
  margin: 0 10px 10px 0;
  padding: 0;
}
iframe.twitter-share-button {
  width: 90px !important;
  margin-bottom: 0;
}
iframe.hatena-bookmark-button-frame {
  margin-bottom: 0;
}
div#___plusone_0 {
  width: 60px !important;
}
.fb-like {
  line-height: 1;
}

こんな感じです。

特にうれしかったのが、

.fb-like {
  line-height: 1;
}

の指定。
こうすることで、「いいね!」ボタンの上にできていた余白を無くすことができました。
分からなかったことが分かった瞬間って、うれしくてたまらないですね。

Continue reading “いいね!ボタン上の余白を消しソーシャルボタンを横に綺麗に並べる”

class名のないliタグに囲まれたソーシャルボタンの位置を微調整する

10日でおぼえるCSS/CSS3入門教室

class名のないliタグを指定する方法

liタグにclass名をつけずに表示位置をかえる方法はないのかなと思って調べてみたしまぷー(@Shimapoo_jp)です。

2014年9月25日追記:CSSの書き方がだいぶ分かってきたので、新しい記事を書きました。CSSでソーシャルボタンを横に並べる方法は、「いいね!」ボタンの上の余白を消してソーシャルボタンを横にきれいに並べる方法 | WordPressを参考にしていただいたほうがいいかと思います。

昨日は、ソーシャルボタンのliタグにclass名をつけて、位置を微調整しました。

ソーシャルボタンの表示位置をスタイルシートで微調整 | WordPress

でも、liタグ1つ1つにclass名をつけるのは大変。

「何か方法は」と思っていろいろ試してみたら、class名をつけなくても動かすことができました。

では、さっそくメモしておきます。

Continue reading “class名のないliタグに囲まれたソーシャルボタンの位置を微調整する”

ソーシャルボタンの表示位置をスタイルシートで微調整

よくわかるHTML5+CSS3の教科書【第2版】 (教科書シリーズ)

はてなブックマークボタンや「いいね!」ボタンの位置を調整したいなと思ったしまぷー(@Shimapoo_jp)です。

スタイルシートを使って、さっそくやってみます。

ソーシャルボタンの位置調整

2014年9月25日追記:CSSの書き方がだいぶ分かってきたので、新しい記事を書きました。CSSでソーシャルボタンを横に並べる方法は、「いいね!」ボタンの上の余白を消してソーシャルボタンを横にきれいに並べる方法 | WordPressを参考にしていただいたほうがいいかと思います。
Continue reading “ソーシャルボタンの表示位置をスタイルシートで微調整”

ソーシャルボタンが横に並ぶようにスタイルシートで設定する

ソーシャルボタンを横に並べる

ソーシャルボタンがだいぶ充実してきたので、スタイルシートを使って横に並べてみましょう。

social-button.phpといったファイルを作って、記事の上や下にすでにソーシャルボタンは表示できているというところから話は進めていきます。

まだの方は、この記事の前の何ページかにソーシャルボタンの個別の記事ページへの表示方法について書いています。
参考にしていただければ幸いです。

では、さっそくやってみましょう。

2014年9月25日追記:CSSの書き方がだいぶ分かってきたので、新しい記事を書きました。CSSでソーシャルボタンを横に並べる方法は、「いいね!」ボタンの上の余白を消してソーシャルボタンを横にきれいに並べる方法 | WordPressを参考にしていただいたほうがいいかと思います。

Continue reading “ソーシャルボタンが横に並ぶようにスタイルシートで設定する”