QooQのシェアボタンは軽量化のため、とてもシンプルになっています。
ただその反面、パッと見は分かりにくいかもしれません。
この軽量化されたシンプルなデザインのまま、分かりやすくできないか……と考え、一文を加える方法にしてみました。
本記事ではこの説明の一文を加える方法を解説します。
関連記事 ➡ QooQのシェアボタンのTwitterをXに変更する方法
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
シェアボタンに説明文を加える方法
HTML編集で<div class='single-share'>を検索します。
その直ぐ上に、以下のコードを貼り付けます。
<style>
.shareButtons-title {
text-align: center; /*中央寄せ*/
margin-top: 1em;/*上部の間隔*/
}
</style>
「この記事をシェアしませんか?」の部分はお好みの文面に変更してください。
長い文章だとスマホなどで複数行になってしまうので、簡潔な方が良いと思います。
上部下部の間隔は、数値を変更してください。
自分は上部だけ間隔を取っています。
これで説明の一文が加えることができます!
シェアボタンを分かりやすくしよう!
ちょっとの工夫で、少しだけ分かりやすくなったのではないでしょうか?
Bloggerは一文を加えるだけでもどこを変更すればいいか分からなかったりするので、参考にしてみてくださいね。




