【swell】2カラムフッターの割合を25%と75%にして表示する｜一番楽で安全な方法を解説

• 管理画面 → 外観 → ウィジェット
• 全てのコードをフッター「1列」にいれます。

ここが重要です。
2列のままだと二重構造になり、表示の崩れの原因になります。

HTMLコードの追加と、コード内の「表示したい内容」の部分に、自身が入れたいコードを入れます。

HTMLコードの追加

ウィジェットのフッターにカスタムHTMLを設置し以下のコードをコピペします。

<!-- フッター内に自作25%・75%グリッドを作成 -->
<div class="footer-grid">
  <div class="footer-left">
    <!-- 左25%に表示したい内容 -->
    例：プロフィール・運営者情報・固定リンク
  </div>

  <div class="footer-right">
    <!-- 右75%に表示したい内容 -->
    例：タグ一覧・人気記事・ナビゲーション
  </div>
</div>

ウィジェット用コード

コード説明
footer-grid が全体の枠です。
footer-left が25%領域。
footer-right が75%領域です。

「表示したい内容」の設定

大まかに３種類あります。呼び出しコード・ショートコード・リンク付きテキストや画像などがあります。
任意の呼び出しコードやショートコードはそのまま貼り付ければよいです。しかし、画像リンク付きのコードの作業は少し面倒です。
以下のコードに任意の画像と、それをクリックした先のURLをいれます。

リンク付きテキストのコード

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  ここに表示したいテキスト
</a>

リンク付き画像のコード

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  <img src="https://example.com/image.jpg" alt="画像の説明">
</a>

設定内容

• クリックした先のURL：「https://example.com」この部分に自分自身が指定する URL を入れる。
• 任意の画像：「https://example.com/image.jpg」ここには、貼り付けたい画像が置いてある URL を入れます。

コード説明

• target=”_blank” は、「新しいタブで開く」という意味です。
• rel=”noopener noreferrer” → セキュリティ向上（外部リンクでは推奨）
• alt=”画像の説明”→画像の説明。画像がうまく表示されなかったときに、その代わりに表示されます。読み上げ機能では、この文章が読み上げられます。検索エンジンも、この文章をヒントにして画像の内容を理解します。リンク付きテキストには不要です。

手順は、外観 → カスタマイズ → 追加CSS に以下のコードを貼ります。

/* フッター25%・75%レイアウト */
.footer-grid{
  display: grid;
  grid-template-columns: 1fr 3fr; /* 25% : 75% */
  gap: 40px; /* 列間の余白。広めにすると高級感が出る */
}

/* スマホ対応 */
@media (max-width: 768px){
  .footer-grid{
    grid-template-columns: 1fr; /* スマホでは1列表示 */
    gap: 24px;
  }
}

追加するCSSコード

コード説明
grid-template-columns: 1fr 3fr によって、25%・75%を実現します。
gapは余白です。左カラムと右カラムの間のスペース（列間） で、詰めすぎると素人感が出るため、PCでは、32px〜48pxがおすすめです。

表示したテキストやアイコンにアクションを加える

クリックしても、そのままリンク先に移るだけというのが物足りないなら、テキストや画像をクリック時に変化させる設定を行います。

下記がテキストと画像のアイコンのアクションのコードです。

/* ========================================== 
 * フッター1カラムの幅調整したアイコンをクリックで浮かせる ========================================== */ 
.footer-grid img{ transition: transform 0.3s ease, opacity 0.3s ease; } 

/* PC用（マウス） */
.footer-grid img:hover{ transform: scale(1.03); opacity: 0.9; } 

/* スマホ用（タップ中） */
.footer-grid a:active img{ transform: scale(0.97); opacity: 0.9; } 

/* ========================================== 
 * フッター1カラムの幅調整したテキストをクリック色 ========================================== */

/* PC */
.footer-grid a:hover{ color: #ff7a00; }

/* スマホ */
.footer-grid a:active{ color: #ff7a00; }

フッターをカスタマイズして、「PCではうまく表示されるのにスマホでは効かない」という現象が起きた場合、まず疑うべきはCSSコードそのものではありません。まずは「スマホ専用フッターが有効になっていないか」を確認することが重要です。

SWELLでは、PC用とスマホ用で別々にフッターを設定できます。そのため、PCとスマホで表示されている内容が違っている場合があります。その状態では、PCで設定した表示がスマホ側には反映されません。

つまり「CSSが効かない」のではなく、「表示されているフッター自体が違う」可能性があるということです。不具合が出たら、まずPCとスマホのフッター設定を確認する。この順番を守るだけで、無駄な修正を大きく減らせます。