Bloggerのフッターに設置したリンクを中央寄せにする方法

Bloggerでフッターにプライバシーポリシーやお問い合わせリンクを設置したとき、デフォルトでは左寄せで表示されることがあります。シンプルに見せたい場合は、中央寄せにするのがおすすめです。ここではフッターリンクを中央揃えにする方法をご紹介します。

ガジェットに追加するリンクコード

まず、フッターに「HTML / JavaScript」ガジェットを追加し、以下のように入力します(「プライバシーポリシーのURL」と「プライバシーポリシー」の部分はそれぞれ実際のURLとページタイトルに置き換えてください)。

<a href="プライバシーポリシーのURL">プライバシーポリシー</a>

これだけでリンクは表示されますが、通常は左寄せになります。

※ここまでの詳しい手順については、「Bloggerのフッターにプライバシーポリシー(固定ページ)へのリンクを設置する方法」を参照してください。

中央寄せにする方法

リンクを中央に寄せるには、リンクを <div> で囲んでスタイルを指定します。

方法A:インラインCSSを使う(簡単)

ガジェットに以下のように入力します(「プライバシーポリシーのURL」と「プライバシーポリシー」の部分はそれぞれ実際のURLとページタイトルに置き換えてください)。

<div style="text-align:center;">
  <a href="プライバシーポリシーのURL">プライバシーポリシー</a>
</div>

これでリンクが中央に配置されます。

リンクが中央に配置されました。


方法B:CSSを使う(きれいに管理したい場合)

  1. Blogger管理画面で「テーマ」→「カスタマイズ」→「詳細設定」→ドロップダウンメニュー(デフォルトでは「ページのテキスト」が選択されています)→「CSSを追加」を開きます。

  2. 以下を追加します。

.footer-links {
  text-align: center;
}
  1. HTMLガジェット側では、以下のようにクラス名を指定しておきます(「プライバシーポリシーのURL」と「プライバシーポリシー」の部分はそれぞれ実際のURLとページタイトルに置き換えてください)。

<div class="footer-links">
  <a href="プライバシーポリシーのURL">プライバシーポリシー</a>
</div>

この方法なら、複数リンクを置いたときも自動的に中央揃えになります。

二つのリンクを置いたときも中央揃えになりました。
|を入れることで区切りが明確になります(お好みで削除可)。


まとめ

  • 左寄せを中央寄せにするには text-align:center; を使う

  • 手軽にやりたいなら インラインCSS

  • デザインを整えていきたいなら 追加CSS+クラス指定

フッターはブログ全体の印象を決める大事な場所です。ぜひ中央揃えでスッキリと見せてみてください。

コメント

このブログの人気の投稿

スマホだけ!初心者でも簡単にできるLINEスタンプメーカーを使ったLINEスタンプの作り方ガイド

AIでラクラク!初心者でもできるChatGPTを使ったLINEスタンプの作り方完全ガイド

『アメリカ紀行』(千葉雅也著)レビュー