Bloggerの共有ボタン（シェアボタン）は以下のようなアイコンです。
テーマにもよりますが、記事の本文の上下に差し込まれます。
この位置を左寄せ/中央寄せ/右寄せに変更する方法は、CSSの追加で行えます。
それに合わせて、共有ボタン上下の余白の幅を調整するHTMLの編集についても解説します。
共有ボタンの表示/非表示
共有ボタンは非表示にすることも可能です。
先ず左のメインメニューから【レイアウト】を選択し、ページの本文にある【ブログの投稿】の編集ボタンをクリックします
ブログ投稿の編集画面が開いたら、【共有ボタンを表示する】で表示非表示を選択できます。
この下に共有ボタンを記事中で移動させる機能がありますが、これは現在は使えない機能になっています。残念……。
共有ボタンを左寄せ/中央寄せ/右寄せにするCSS
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
追加するCSS
下記の３つのどれかをCSSに追加して位置を変更してください。
左寄せ
中央寄せ
右寄せ
共有ボタン上下の余白の幅を調整するHTMLの編集
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
HTMLの編集で数値変更
先ず.item-view .post-share-buttons{を検索します。
２カ所ありますが、変更するのは以下のコードです。
margin-bottom:が下の余白、margin-top:が上の余白になります。
この数値を上下することで余白の幅を変更できます。
当ブログでは下が広いと感じたので、以下のように数値を減らしています。
狭い広いと感じたら数値を上下させて、ブログを確認しながら数値を指定してください。
