「Blogger」記事の下にSNSのシェアボタンを自作して配置したい【T】
 |
独自デザインによる拡散力の向上
ブログのテーマやカラーに合わせたシェアボタンを設置することは、サイトのプロフェッショナルな印象を強めるだけでなく、読者のクリック意欲を高める効果が期待できます。
標準機能に頼らず、HTMLとCSSを組み合わせてボタンを自作することで、配置場所やサイズを自由にコントロールし、記事を読み終えた読者へ自然に共有を促すことが可能になります。
以下の準備から進めていきましょう。
設置したいSNSの種類を決定します。
各SNSの共有用URLスキームを確認してください。
ボタンに使用するアイコンやテキストを考案します。
アドバイスとして、「Blogger」のテンプレートによっては既に共有機能が組み込まれている場合があるため、自作ボタンを追加する前に既存の設定をオフにしておくと、二重に表示されるのを防ぎつつスッキリとした見た目に仕上げることができます。
テンプレートへのコード挿入と配置の操作
自作したシェアボタンをすべての記事の下に一括で表示させるには、テーマのHTML編集画面から記事本文を出力するコードの直後に専用のタグを挿入します。
条件分岐のタグを活用することで、トップページやアーカイブページではなく、個別の投稿ページのみに限定してボタンを表示させるなど、細かな制御を行うことも容易です。
具体的な設置の手順は以下の通りです。
管理画面のテーマから「HTMLの編集」を選択します。
記事本文を示す「data:post.body」というコードを探してください。
その直後に用意したHTMLとCSSのコードを貼り付けます。
注意点として、テーマのソースコードを直接編集する作業は慎重に行う必要があり、一文字でも入力を間違えるとブログ全体が表示されなくなるリスクがあるため、作業前には必ず現在のテーマのバックアップを保存しておくことが重要です。
ユーザー体験の最適化と共有の促進
自作のボタンを配置した後は、実際にスマートフォンやパソコンから正しく動作するかを確認し、読者が迷わず操作できるかチェックすることが大切です。
ボタンの押しやすさや反応の速さを追求することは、単なる装飾以上の価値を生み出し、長期的なアクセスアップに貢献する大きなメリットをブログにもたらしてくれるでしょう。
完成後のチェックとして以下の項目を確認してください。
ボタンをクリックして正しい共有画面が開くかテストします。
モバイル端末でボタンが押しやすい大きさか確認してください。
ページ全体の読み込み速度に悪影響がないかを見極めます。
アドバイスとして、「Blogger」独自の変数を使用することで、記事のタイトルやURLを自動的に取得してツイート内容に含めることができるため、読者がわざわざ手入力する手間を省き、共有のハードルをさらに下げることができるかもしれません。
