2022年10月18日火曜日

「黎明鬼」テーマでLinktreeの様なリンクページを作成する(Tricktree)

カスタマイズ例:

新しいページを作成し、タイトルを「Tricktree」等とし
( /p/tricktree.html 等でリンクできるようにする為 )、
HTML ビューで以下のコードを入力し公開します

コード

<!-- Profile picture-->
<img src="https://lh3.googleusercontent.com/a/default-user=s100-c" alt="profile picture" class="profile-picture"> <!-- Profile name-->
<div class="profile-name">@justaname</div>
<!-- Links-->
<a href="#" class="links">SNEAKER STORE</a>
<a href="#" class="links">NEW ALBUM</a>
<a href="#" class="links">IG</a>
<a href="#" class="links">TWITTER</a>
<a href="#" class="links">YOUTUBE</a>
<!-- Logo -->
<div class="bottom-text"><a href="https://trick-tree.blogspot.com/" target="_blank">Tricktree</a></div>

<style type='text/css'>
#header, .Two-Equal, .home-link, .post-title {display:none}

body {
background: white;
color: #000;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
letter-spacing: 2px;
}
img {
border-radius: 50%;
}
.profile-picture {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
height: auto;
max-width: 100px;
}
.profile-name {
text-align: center;
padding: 30px;
}
.links {
text-align: center;
margin-top: 20px;
padding: 20px;
border: 1px solid black;
border-width: 2px;
width: 290px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 40px;
}
a {
text-decoration: none;
color: black;
transition: color 1s;
}
.bottom-text {
text-align: center;
margin-top: 40px;
font-size: 20px;
font-weight: bold;
}
.post-body a:hover {
color: #fff;
background: #000;
}
.bottom-text a:hover {
color: #000;
background: #fff;
}
a:visited {
color: #000;
}
</style>

公開後、タイトルを任意のものに変更します。

0 件のコメント:

コメントを投稿

連絡フォーム

名前

メール *

メッセージ *

黎明鬼」テーマ. Powered by Blogger.