[Vaster2] [ロゴ画像追加] 基本情報ガジェットをHTML/JavaScriptガジェットに変更しました

ロゴをつけました。

前に作ったバージョンから変更しました。

[Vaster2] 基本情報ガジェットをHTML/JavaScriptガジェットに変更しました-すたすた式

ガジェットを減らすためにやりました。

sutasutashiki.blogspot.com

変更点

• ロゴ画像を追加
• display: table-cell;をつかってロゴ画像とテキストを横並びにしました。

<div class="author-box">
 <div class="author-img">
  <a href="移動するページのアドレス"><img src="ロゴ画像のアドレス" alt="author-logo">
 </a>
 </div>
     <div class="author-text">
  <ul>
   <li><a href="移動するページのアドレス">テキスト</a></li>
   <li><a href="移動するページのアドレス">テキスト</a></li>
  </ul>
  </div>
</div>
<style>
.author-box {
 display: table;
}
.author-box ul {
 list-style: none;
 padding-left: 1rem;
}
.author-img {
 display: table-cell;
 vertical-align: middle ;
  }
.author-text {
 display: table-cell;
 vertical-align: middle ;
 padding-top: 0.5rem;
}
.author-text li a {
 color:#666;
}
</style>

実際の貼り付けたコード

<div class="author-box">
 <div class="author-img">
  <a href="https://www.blogger.com/profile/03177892347424974206"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFMqn7_ndY4Mq5d1pKsvb8ZE2LKFIYiRudvmNmztMdzwHggn04HqXgXSYWQTk8TTgJBL0BdeYU-2O70pTQjX8u9dwk5DavM6G-jlpXHgsyYD8MsiyyKPK5Qwpgi7RNK9wKQ1-xc5-rDXTr/s32-no/" alt="author-logo" />
  </a>
 </div>
    <div class="author-text">
     <ul>
      <li><a href="https://www.blogger.com/profile/03177892347424974206">sutajp</a></li>
      <li><a href="https://sutasutashiki.blogspot.jp/p/blog-page_9.html">プライバシーポリシー</a></li>
  </ul>
 </div>
 </div>
<style>
.author-box {
 display: table;
}
.author-box ul {
 list-style: none;
 padding-left: 1rem;
}
.author-img {
 display: table-cell;
 vertical-align: middle ;
  }
.author-text {
 display: table-cell;
 vertical-align: middle ;
 padding-top: 0.5rem;
}
.author-text li a {
 color:#666;
}
</style>

追記：コードとアドレスを修正しました 2018.10.5