フッターの編集

2026年6月2日 2026年6月3日

管理者

修正点

現在のフッターが

の状態で、これはWordPressのデザインテーマ「Lightning」の標準フッターです。

内容は、「著作権を示すコピーライト・WordPressとLightningを使用しています。」となっており、法的に明示が必要というわけではありません。

ですので、フッターをキミマチ好みに活用させていただこうと思います。

修正目標

フッターに表示したい内容は

プロフィール
プライバシーポリシー
コピーライト（右寄せ）

プロフィール と プライバシーポリシー は、それぞれのページへ飛べるようにリンクを付加しようと思います。

まず、一旦配置してみる。

WordPress管理画面から

外観　→　ウィジェット　→　フッターウィジェットエリア

フッターウィジェットエリアには 1~3 がありますが、簡単に言うとフッターを横に3分割して、

フッターウィジェットエリア 1 が左
フッターウィジェットエリア 2 が中央
フッターウィジェットエリア 3 が右

です。なので、

プロフィール と プライバシーポリシー は、フッターウィジェットエリア 2　へ

コピーライト は、フッターウィジェットエリア 3 へ

配置していきます。

作成方法は、カスタムHTML で

ここにそれぞれ、記述していきます。

最後に、ウィジェットページで「更新」ボタンを押し忘れないように気を付けてください。

一旦の配置でこの状態

ここからフォントサイズや位置調整のため、追加CSS で指定していきます。

WordPress管理画面から

外観　→　カスタマイズ　→　追加CSS　へ移動して

/* =========================
   Footer
========================= */
/* フォントサイズ */
.site-footer {
  font-size: 14px;
}

/* プロフィール ｜ プライバシーポリシー */
#block-13 {
  text-align: center;
}

/* コピーライト */
.col-lg-4:last-child,
.col-md-6:last-child {
  text-align: right;
}

フォントサイズと位置調整を行います。

特に位置調整は、移動させたいものを指定するために、右クリックから「検証」をして

指定先の名前を確認しました。

しかしまだ、

Lightning標準でついている謎の囲いの影や標準フッターが気になるので

これも、追加CSS で見えなくして

/* フッターウィジェット装飾削除 */
.site-footer .widget {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0;
  padding: 0;
}

/* Lightning標準コピーライト非表示 */
.site-footer-copyright {
  display: none;
}

結果

目標としていた形になりました。（プロフィールページは作成中のため、まだ飛べません。もう少々お待ちください。）

方法として、標準フッターを編集して形にする手段もあったのですが、毎回直接標準フッターのPHPを再記述し直すより、拡張しやすいウィジェットと追加CSS にしました。

今後、見た目での大きな変更がない限り、ウィジェットに追加すれば表示項目を増やせます。

おまけ

スマホでの表示では、それぞれの表示が近くなりすぎて綺麗ではないです。

ですので、コピーライトを中央に配置し、縦に並ぶように調整しました。

/* =========================
   スマホ
========================= */
@media (max-width: 768px) {

  #block-13 {
    text-align: center;
  }

  .col-lg-4:last-child,
  .col-md-6:last-child {
    text-align: center;
  }
}

形が崩れず表示されていることを確認。（追加CSSのスマホプレビュー）

修正（2026/06/03）

修正理由

ウィジェットに お問い合わせ を追加した際に、フッターウィジェットエリア 2 の横幅が足らず プライバシーポリシー が途中で改行されてしまう状況になりました。

修正方法

フッターウィジェットエリア 2 へ下記HTMLを上書き

<div class="footer-links">
  <a href="#">プロフィール</a> ｜ 
  <a href="#">お問い合わせ</a> ｜ 
  <a href="/privacy-policy/">プライバシーポリシー</a>
</div>

<div class="footer-copy">
  © 2026 キミマチラボ
</div>

追加CSS へ

/* =========================
   Footer
========================= */

/* フッター中央カラムを全幅化 */
@media (min-width: 992px) {

  .site-footer .col-lg-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

}

/* フッターリンク */
.footer-links {
  text-align: center;
  line-height: 1.8;
}

/* フッターリンク文字 */
.footer-links a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 14px !important;
}

/* コピーライト */
.footer-copy {
  text-align: right;
  font-size: 14px;
}

/* Lightning標準コピーライト非表示 */
.site-footer-copyright {
  display: none;
}

/* フッターウィジェット装飾削除 */
.site-footer .widget {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .footer-copy {
    text-align: center;
  }
}

と置換