すたすた式
Vaster2
前に作ったバージョンから変更しました。
[Vaster2] 基本情報ガジェットをHTML/JavaScriptガジェットに変更しました-すたすた式
ガジェットを減らすためにやりました。
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
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿