リンク一覧をべったーで作りました

ピクスペのタグをいじるのを諦めたけど何かそれっぽい見た目の何かが欲しくて適当に作りました。↓みたいな感じになります。

画像1

PrivatterなどのHTMLが使えるページにコピペしてURLや紹介文部分を適宜書き換えていただければ使えると思います。基本的には自己責任でお願いします……。

以下、HTMLになります。

<div style="margin:0; text-align:center;">
embed://privatter.net/i/別のべったーのページに上げた画像へのリンク
<a href="募集ページ等の任意のURL" target="_blank" style="color: #ffffff; font-size: 1.6rem; font-weight: bold; background: #8db693; padding: 10px; text-decoration: none; position: relative; display: inline-block; width:100%;">P4P申込ご案内</a>
募集についての案内文

<a href="TwitterアカウントのURL" target="_blank" style="color: #ffffff; font-size: 1.6rem; font-weight: bold; background: #29617f; padding: 10px; text-decoration: none; position: relative; display: inline-block; width:100%;">Twitter</a>
Twitterアカウントの紹介文など

<a href="pixivのマイページURL" target="_blank" style="color: #ffffff; font-size: 1.6rem; font-weight: bold; background: #52accb; padding: 10px; text-decoration: none; position: relative; display: inline-block; width:100%;">pixiv</a>
pixivマイページについての紹介

<a href="BOOTHへのリンク" target="_blank" style="color: #ffffff; font-size: 1.6rem; font-weight: bold; background: #f4b3bf; padding: 10px; text-decoration: none; position: relative; display: inline-block; width:100%;">BOOTH</a>
配布物の案内等
</div>

以上になります。

backgroundでボタン部分の色指定、text-alignで文字の左右配置の設定などあれこれ調整できますので、お好みのデザインになるように試してみてください。

この記事が気に入ったらサポートをしてみませんか?