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を使う(きれいに管理したい場合)
Blogger管理画面で「テーマ」→「カスタマイズ」→「詳細設定」→ドロップダウンメニュー(デフォルトでは「ページのテキスト」が選択されています)→「CSSを追加」を開きます。
以下を追加します。
.footer-links {
text-align: center;
}
HTMLガジェット側では、以下のようにクラス名を指定しておきます(「プライバシーポリシーのURL」と「プライバシーポリシー」の部分はそれぞれ実際のURLとページタイトルに置き換えてください)。
<div class="footer-links">
<a href="プライバシーポリシーのURL">プライバシーポリシー</a>
</div>
この方法なら、複数リンクを置いたときも自動的に中央揃えになります。
![]() |
二つのリンクを置いたときも中央揃えになりました。 |を入れることで区切りが明確になります(お好みで削除可)。 |
まとめ
左寄せを中央寄せにするには
text-align:center;
を使う手軽にやりたいなら インラインCSS
デザインを整えていきたいなら 追加CSS+クラス指定
フッターはブログ全体の印象を決める大事な場所です。ぜひ中央揃えでスッキリと見せてみてください。
コメント
コメントを投稿