フッターセクションにロゴを追加する

開発
1

こんにちは。
私が管理しているフォーラムのスポンサーである大学のロゴを追加したいです。

一番下にあるように、ロゴを追加することはできましたが、以下の点を改善したいです。

  • 各ロゴにリンクを追加する
  • ロゴの間隔を調整する
  • ゴーティング大学のロゴの元の比率を維持する（何らかの理由で変更されてしまったため）

フッターには以下を記述しました。

<div class="custom-footer-image">
    <img src="upload://3lfj0glW4Qjc2cMHAC7dBVglghP.png" alt="Footer Image">

    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />

    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
</div>

CSSには以下を記述しました。

.custom-footer-image {
    display: flex;
    justify-content: center;

    img {
        max-width: 30%;
    }
}
2

このCSSを試してください。

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    img {
        max-width: 30%;
        height: 100%;
    }
}

リンクを追加するには、次のようにします。<a href="https://..."><img... /></a>

「いいね！」 2
3

CSS のトリックはうまくいきました、ありがとう！
まだリンクを管理できません

フッターで以下を試しましたが、うまくいきませんでした。（3番目のロゴでテストしています）

<div>
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />

    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />

    <a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>
「いいね！」 1
4

hmmm https:// を http:// の代わりに試してみてはどうでしょうか？ :thinking: でも、それは機能するはずのように見えますね

5

はい、正しいですが、CSSも調整する必要があるかもしれません。

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    a {
        max-width: 30%;
        height: 100%;
    }
}

リリーが言ったように https を使用し、最初の2つのリンクを変更してください。

<div class="custom-footer-image">
    <a href="https://" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>

    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>
「いいね！」 1
6

以下を挿入したところ、ロゴも表示されなくなりました。

<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-content: center; 
    gap: 1rem;
    
    a {
        max-width: 30%;
        height: 100%;
    }
}
「いいね！」 1
7

HTMLの画像タグの末尾にスペースやバックスラッシュがあるのはなぜですか？

8

すべての行の末尾、ロゴが呼び出される場所のことですか？よくわからないのですが、他の人のコードをコピー＆ペーストしただけです。

9

HTMLは正しいです。

<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

代わりにこちらのCSSをお試しください：

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-wrap: wrap;
    gap: 2rem;

    a {
        width: max(20vw, 220px);
        
        img {
            width: 100%;
        }
    }
}

image
image1700×385 88.6 KB

image
image620×389 43.1 KB

「いいね！」 1
10

このコードは私にとって機能し、テストも完了しました。

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 2rem;

    img {
        max-width: 20%;
        height: 100%;
    }
}

<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>

    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

ただし、画像サイズの部分は自分で調整する必要があります。

11

テーマが違うからかもしれませんが、画像のCSSが見栄え良くないです。:thinking:

私が見ているもの

image
image761×328 26 KB

「いいね！」 1
12

ぶっちゃけ、どれもあまり良く見えないな :grin:

もっと良いやり方があるはずだ… :thinking:

「いいね！」 1
13

テーマのフッターセクションにHTMLを配置するのではなく、なぜこの方法を選んだのか興味があります。

空のテーマの「フッター」セクションにこれを配置したところ、正常に動作しました。

CSS/HTMLの編集 フッター：

    <center>
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width=300>
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width=300>
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width=300>
    </a>
    </center>
14

申し訳ありませんが、何も機能しません…あなたのソリューションは機能すると思いますが、私が何か間違っているのだと思います。
コンポーネントセクションのフッター（HTMLコード）またはCSSセクションに文字通りコードをコピー＆ペーストしています。リンクのない基本的なソリューションでは問題なく動作しました…

@Lillyのアドバイスに従ってテーマのフッターセクションを変更しようとしましたが、私には機能しませんでした…

「いいね！」 1
15

あなたのフォーラムはプロフィールにあるリンクですか？見てみたいです。

「いいね！」 1
16

はい、そうです！

17

開発者ツールでリンクが機能するように修正しましたが、コードを適用すると、なぜか画像の寸法が変わってしまいます。しかし、前回の投稿で提供したコードをフッターコードに貼り付けると機能するはずです。CSSコード（divクラスを含む）は削除してください。CSS関連を削除したら、EDIT CSS/HTMLセクションのフッターセクションに提供したコードをコピー＆ペーストしてください。

テーマコンポーネントに移動するか（推奨）、私のように新しいものを作成してください。

IMG_3470
IMG_34701132×1441 123 KB

このコードをCSSタブとフッタータブセクションに正確に貼り付けてください。

CSSタブ：

.footer_align {
    display: flex;
    justify-content: center;
}

フッタータブ：

<div class="footer_align">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width="300">
    </a>
    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width="300">
    </a>
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width="300">
    </a>
</div>

IMG_3477
IMG_34771536×785 129 KB

IMG_3479
IMG_34791536×999 258 KB

これは私のフォーラムでの結果です。各画像が適切なURLにリンクされていることも独自に確認しました。

IMG_3468
IMG_34682048×814 207 KB

サイズを小さくしたい場合は、各画像の width="300" をより小さい値に変更してください。間隔を空けたい場合は、リンクされた画像のHTMLコードの間にHTMLの改行コード &nbsp; を使用できます。

18

非推奨のHTMLタグ<center>の使用は避け、代わりにtext-align: center;プロパティを持つ<div>に置き換えることをお勧めします。:slight_smile:

「いいね！」 1
19

サイトで動作するように、CSSなしでできるだけ簡単にしようとしていました。同意しますので、投稿を更新しました。ありがとうございます。:slight_smile:

20

サイズに合わせてスケーリングする際に問題があるようです。
画像は特定のサイズでしか表示されず、小さすぎます。より大きなサイズを試すと、画像が消えてしまいます。

Screenshot 2023-06-07 at 18.50.31
Screenshot 2023-06-07 at 18.50.312292×842 88.7 KB

Screenshot 2023-06-07 at 18.50.37
Screenshot 2023-06-07 at 18.50.372290×818 38.1 KB

Screenshot 2023-06-07 at 18.50.56
Screenshot 2023-06-07 at 18.50.562724×1352 164 KB