【QooQカスタマイズ】オリジナルのプロフィールガジェット作ってみた

bloggerの元々の「自己紹介」のガジェットはあんまりアレンジが効かなくて、

ツイッターとAmazon欲しい物リストの他にもリンクをいろいろ貼りたかったので、自分好みのプロフィールをつくってみました。

こんなかんじになります。（2021年1月のプロフィール）

以下のコードをHTML/JavaScriptのガジェットのコンテンツのところに導入して使ってみてください🥰

自分のプロフィールアイコンにしたい画像は正方形で用意します

下の３つのアイコン付きのリンクは、Font　Awesomeという無料のアイコンを導入してアイコンを表示させています。

導入の仕方はたくさん記事がありますのでそれらを参考にしました。

他のアイコンにしたい場合はfFont　AwesomeでHTMLを調べて<i></i>のところを修正してください。

名前　
一言コメント　
普通のリンク　
アイコン付きのリンク

の順で構成しています。URLのところにはリンクのURLをコピーし、タイトルのところにはリンクの名前をいれてアレンジすると使えると思います。

プログラミング超初心者なのでちゃんとできてるか心配…


<img alt="" border="0" class="profile-iconn" data-original-height="783" data-original-width="785" src="ここにプロフィール画像のURL" width="80" />

<div class="profile-text">
  <span class="profile-my-name">ここに名前</span><br />
  <span class="profile-comment">ここに一言</span>
</div>

<p class="profile-link">
  <a href="ここにリンクひとつめURL">リンクのタイトル</a><br />
  <a href="ここにリンクふたつめURL">リンクのタイトル</a><br />
</p>

<div class="profile-link-box">
  <div class="pic_frame link-box-1">
    <a href="アイコン付きボックスのリンク１URL">
      <i class="fab fa-twitter"></i><br />
      <span class="innerlink-box-1">タイトル１</span>
    </a>
  </div>

  <div class="pic_frame link-box-2">
    <a href="アイコン付きボックスのリンク２URL">
      <i class="fas fa-info-circle"></i><br />
      <span class="innerlink-box-2">タイトル２</span>
    </a>
  </div>

  <div class="pic_frame link-box-3">
    <a href="アイコン付きボックスのリンク３URL">
      <i class="fas fa-bookmark"></i><br />
      <span class="innerlink-box-3">タイトル３</span>
    </a>
  </div>
</div>

<style>
.profile-iconn {
  float: left;
  margin: 10px 20px 10px 30px;
  border-radius: 50%;
  text-align: center;
}

.profile-my-name {
  text-align: center;
  font-size: 120%;
  font-weight: bold;
}

.profile-comment {
  text-align: center;
}

.profile-link {
  clear: both;
  text-align: center;
}

.profile-text {
  padding: 20px;
}

.pic_frame {
  display: inline-block;
  text-align: center;
}

.profile-link-box {
  text-align: center;
  clear: both;
}

.link-box-1 {
  border: solid 1px #1da1f2;
  padding: 0.3em 0.5em;
}

.link-box-1 i,
.innerlink-box-1 {
  color: #1da1f2;
}

.link-box-2 {
  border: solid 1px #207bb4;
  padding: 0.3em 0.8em;
  margin: 1em 0;
}

.link-box-2 i,
.innerlink-box-2 {
  color: #207bb4;
}

.link-box-3 {
  border: solid 1px dimgray;
  padding: 0.3em 0.5em;
  margin: 1em 0;
}

.link-box-3 i,
.innerlink-box-3 {
  color: dimgray;
}
</style>