フッターの画像はどのような方法でリンクを付けますか?

Topic summary

フッターのバナー画像にリンクを設定する方法についての質問と解決プロセス。

問題:
Refreshテーマのフッター画像にリンクを付けたいが、デフォルトではリンク挿入機能がない。

解決手順:

  1. 「コードをカスタマイズ」から「footer.liquid」ファイルを開く
  2. 430~450行目付近のtype="image"部分に以下のコードを追加:
{
 "type": "url",
 "id": "id_url",
 "label": "URLを入力"
}
  1. 140行目付近の<img>タグを<a>タグで囲む
  2. カスタマイズ画面でURLを入力する欄が表示されるので、リンク先URLを入力

追加機能:
新しいウィンドウで開く場合は、<a>タグ内にtarget="_blank"を追加する。

質問者は当初URLを入力していなかったため動作しなかったが、最終的に問題は解決した。

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.

ご質問拝見いたしました。

refreshはデフォルトの状態ですとフッターに画像を入れることは可能ですが、リンクは挿入できません。

なのでリンクを挿入するにはliquidファイルのコードの編集をする必要があります

以下が手順になります。

  1. カスタマイズのメニューからコードをカスタマイズを選択する。

  2. セクションファイルの中から「footer.liquid」を選択する。

  3. 下部の430~450行あたりにtype="image"の部分があるのでリンクを挿入するための以下コードを挿入する(参照画像添付)

{
 "type": "url", 
 "id": "id_url", 
 "label": "URLを入力"
},


4.リンクが挿入できるようになったので、画像と挿入したリンクを連動させるためのコードを編集します。(参照画像添付)

リンクは以下のタグを140行目あたりのimgタグを囲うようにしてコードを追加するとリンク付きの画像として使用できます


スクリーンショット 2024-02-02 15.47.31.png

以上で画像にリンクを挿入できるようになりますのでお試しください。

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

1 Like