ルクセリタスのスマホ表示で２段２列ヘッダーカードを設置した方法

困っている人

スマホ表示で２段２列のヘッダーカードを作りたいなぁ

上記のお悩みを解決します。

本記事の内容

ルクセリタスで、２段２列のヘッダーカードを作った方法

こんな方におすすめ

スマホ表示で２段２列のヘッダーカード作りに悩まれている方

それでは、本題に入ります。

２段２列ヘッダーカードの作り方

ルクセリタスで、２段２列のヘッダーカードを作ってみました。

タブで切り替え可能

パソコン
スマホ

注意ポイント

パソコンでもスマホでも２段２列に表示されちゃうのでびみょ～ですね。

css記述はナシで、htmlだけで表現しました。（htmlにstyle記述をしているだけ）

<div style="display: flex; flex-wrap: wrap;">
<div style=" width: calc(50% - 2px); margin: 1px;">
<a style="" href="リンク先①">
<img alt="" style="width: 100%; height: auto; border-radius:20px 20px 20px 20px;border:1px solid #ddd;" src="画像URL①">
</a>
</div>
<div style=" width: calc(50% - 2px); margin: 1px;">
<a style="" href="リンク先②">
<img alt="" style="width: 100%; height: auto; border-radius:20px 20px 20px 20px;border:1px solid #ddd;" src="画像URL②">
</a>
</div>
<div style=" width: calc(50% - 2px); margin: 1px;">
<a style="" href="リンク先③">
<img alt="" style="width: 100%; height: auto; border-radius:20px 20px 20px 20px;border:1px solid #ddd;" src="画像URL③">
</a>
</div>
<div style=" width: calc(50% - 2px); margin: 1px;">
<a style="" href="リンク先④">
<img alt="" style="width: 100%; height: auto; border-radius:20px 20px 20px 20px;border:1px solid #ddd;" src="画像URL④">
</a>
</div>
</div>

ポイント

画像の上に文字を重ねようかと考えましたが、CANVAで済ませました（爆）。
パソコンで画像が引き伸ばされたときに、文字がにじまないのか心配でしたが一応大丈夫でした。

HTMLやCSSのことがよくわかっていない私にとってはコレが精一杯です。
精通している人は、もっと上手にするのでしょうね。

個人的には、CANVAのデザインが好きなのでコレで良しとします。
ちなみにですが、AFFINGER6のヘッダーカードはこんな感じ。

タブで切り替え可能

スマホ
パソコン