当ブログに設置しているシェアボタンは各SNSの公式（純正）ボタンなのですが、ボタン相互の縦方向の位置がズレていて見た目がガタガタしてカッコ悪かったんですよねぇ〜。
|
| 『いいね！』ボタンが上にずれています（ブログ画面） |
それを今回何とかしたので紹介します。
■【Blogger備忘録】シェアボタンの縦方向の位置を揃える（inline-block要素の使用）
目次[非表示]
●設定方法（inline-block）
今回は各シェアボタンをinline-block要素として設定して縦方向の位置を揃えるようにします。
以下の設定はBlogger編集画面の『テーマ』>『HTMLを編集』で行います。
以下ではBloggerのHTMLを編集します。編集する前に復旧できるように必ず忘れずにHTMLのバックアップを取ってから行ってください。
また、このHTMLの編集について本ブロブおよび筆者は一切の責任を負いません。参考にされる方は全て自己責任で実施してください。
・CSSの編集
- 設置するCSSコード
以下のコードをブログのCSSとして設置します。
.inline-block-center span {display: inline-block;vertical-align: top;height: 25px;}
- CSSコードを設置する場所
上記コードをCSSの設置場所である『]]></b:skin>』の前に設置すれば良い筈なのですが…。
なぜか上手くいきませんでした😥。
本ブログが採用しているBloggerのテンプレート『Simply
Simple』では、CSSの設置箇所が2箇所あります。
- <b:skin>
- <b:template-skin>
そこで2箇所目の『
]]></b:template-skin>』の前に設置したところ上手くいきました😋（理由は分かりませんが😅）。
|
| 本ブログの場合のCSSの設置場所（Blogger編集画面） |
良かった、良かった♪
・HTMLの編集
- 設置するHTMLコード
次にシェアボタンを設置する部分のソースコードを以下のように編集します。
<div class="inline-block-center"><span>（シェアボタン1のソースコード）</span><span>（シェアボタン2のソースコード）</span><span>（シェアボタン3のソースコード）</span><span>（シェアボタン4のソースコード）</span></div>
『（シェアボタンnのソースコード）』の部分には、シェアボタンボタンのソースコードを設定します。
- facebookのソースコードの書き換え
facebookのシェアボタンのソースコードは<div>で記載されているので<span>に書き換えて上記のコードの中に設置します。
|
●使用感
こんな感じです。縦方向の位置揃えはバッチリですね。
|
| ブログ画面 |
●改善要望点
- 今のところ特にありません😋。
●まとめ
inline-block要素の使用により、シェアボタンの縦方向の位置を揃えて見た目をスッキリさせることができました。
いやぁ～、良かった良かった😋。
