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

2021/01/26

ブログ





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

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

こんなかんじになります。(2021年1月現在のプロフィール)




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


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


下の3つのアイコン付きのリンクは、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="アイコン付きボックスのリンク1URL">

    <i class="fab fa-twitter"></i><br />

      <span class="innerlink-box-1">タイトル1</span></a>

  </div>

  

  <div class="pic_frame link-box-2">

  <a href="アイコン付きボックスのリンク2URL">

    <i class="fas fa-info-circle"></i><br />

    <span class="innerlink-box-2">タイトル2</span> </a>

  </div>

  

  <div class="pic_frame link-box-3">

    <a  href=" アイコン付きボックスのリンク3URL">

    <i class="fas fa-bookmark"></i><br />

    <span class="innerhatena">タイトル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{ color:#1da1f2;}

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

    

   .link-box-2{

    border: solid 1px#207bb4;

color:red;

    padding: 0.3em   0.8em;

    margin: 1em 0;

    }

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

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

    

   .link-box-3{

    border: solid 1px dimgray;

color:dimgray;

    padding: 0.3em  0.5em;

    margin: 1em 0;

    }

  .link-box-3 i{ color:dimgray;}

  .innerlink-box-3 { color:dimgray;} 

    </style>






↓feedlyで更新情報を受け取れます↓

follow us in feedly ひるねがやめられない - にほんブログ村

ブログ村参加中です

ブログランキング・にほんブログ村へ


Profile

10ごう
ニートから大学生になった人

・もっとアクティブになる(堕落しない)
・言葉にすること
を目的にブログをやっています。

Archives

QooQ