[Blogger] QooQのシェアボタンに説明文を加える方法

2025/10/08

Blogger HTML/CSS QooQ


QooQのシェアボタンは軽量化のため、とてもシンプルになっています。

ただその反面、パッと見は分かりにくいかもしれません。

この軽量化されたシンプルなデザインのまま、分かりやすくできないか……と考え、一文を加える方法にしてみました。


(別ブログ実例)


本記事ではこの説明の一文を加える方法を解説します。


関連記事 ➡ QooQのシェアボタンのTwitterをXに変更する方法


HTMLの編集手順

左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。

それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。



HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。

HTMLの編集が終わったらプレビュー画面で確認して、保存をします。



シェアボタンに説明文を加える方法

HTML編集で<div class='single-share'>を検索します。

その直ぐ上に、以下のコードを貼り付けます。


<!-- [START] シェアボタン説明文 -->
<div class='shareButtons-title'>この記事をシェアしませんか?</div>
<style>
.shareButtons-title {
text-align: center; /*中央寄せ*/
margin-top: 1em;/*上部の間隔*/
margin-bottom: 0em;/*下部の間隔*/
}
</style>
<!--[END] シェアボタン説明文 -->


「この記事をシェアしませんか?」の部分はお好みの文面に変更してください。

長い文章だとスマホなどで複数行になってしまうので、簡潔な方が良いと思います。


上部下部の間隔は、数値を変更してください。

自分は上部だけ間隔を取っています。



これで説明の一文が加えることができます!



シェアボタンを分かりやすくしよう!

ちょっとの工夫で、少しだけ分かりやすくなったのではないでしょうか?

Bloggerは一文を加えるだけでもどこを変更すればいいか分からなかったりするので、参考にしてみてくださいね。



にほんブログ村 ブログブログ ブログサービスへ にほんブログ村 ブログブログ ブログノウハウへ ブログノウハウランキング

このブログを検索

現在の使用テーマ

EmporioからQooQ list版に変更しました。(2025年11月)

お問い合わせ

名前

メール *

メッセージ *




QooQ