すたすた式
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://lh3.googleusercontent.com/moFCD2qahJ0KAkm6X_d79Q8c3vby6WvpDSQRNicAVdVnu6LX3dxuV6ZeOUbSmznRak6mGYx64fVEoRJlad6_Icnd6aP2HKtJr8v4La64RugVn8fkyb1-YkZJ0LEMm09lNvZTArUJsZHJh09j-efBSNRd5NxFH75T3I2Q6VFvX7XABzpA2crpDDc5CmS-mqEGX6RW2FaAL2xwddNkZDtNjYzIoz0oxmaaiKWLriMfB0s9VjwZRj3uJEMCv4b5VBAeFcwUiVv8GAqyrvAq49Nj_YRZoNFcbynghgdfevD06eqSeixMxmR8AgOqqHVuWEnXS65FBxCRnd_ZRVAJKUk5N271RO3H1CnoZs4Mf5TCmgGOrydnf7rQ5Lg7jQCDDXDbH9VYZWL6qXP9ibuHMgkP4Ky0hYKDjj0KuSHKX-wOjMS0DyaPyrqGgn0k_47_pcaGqRwT4lY22xO86YybQZ1N8eUxYZPuVPPQGZ4xrDctGRMtv6iandO2Tk-g0xaJXSlUcFhVnC26e5Kv3wpKR-CsCaQ97LcYaBcqD6edo3Nb20MbT9Dhj04oE_R4egKsBxswH_ywjZKYcT-THcucLqn3M9jCgdSUft5B_J3pL-bWSnilIhnlKRxXPTOQVJ8C3Oo=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
コメントなし:
コメントを投稿