2022年3月12日土曜日

Bloggerの個別ページをLinktreeライクにする

TrickTreeを出す前に考えましたが
まぁできないこともないんです
まずは 新しいページ を作っておきます
パーマリンク を考えて 英字でタイトルを決めます(ページを削除すると1回きりなので注意)
タイトル を Linktree と入れると linktree.html の様になります
オプション で 閲覧者のコメント を 許可しない (コメントが欲しい場合は別)

head内に追加
(ページのURLは自分のを入れてください)
<b:if cond='data:blog.url == &quot;https://mod-template-minimal.blogspot.com/p/trick-tree.html&quot;'>
<style>
.sidebar {
display: none;
}

.post-wrapper {
width: 100%
}
.header {display:none;}
.tabs {display:none;}
.home-link {display:none;}
.post-title {display:none;}
.entry-title {display:none;}
.post-footer {display:none;}
</style>
</b:if>

今回のサンプルはMBT Modなので 投稿幅は画面一杯になりませんが、グリッドタイプのテンプレートなら画面幅一杯になるかと思います
消す要素は好みで
(.tabs はMBT Modにしかありません)

追加CSS
/* LinkTrick */
.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: 0px;
}
.tree a {
text-decoration: none;
color: black;
}
.bottom-text {
text-align: center;
margin-top: 40px;
font-size: 20px;
font-weight: bold;
}
.links:hover {
color: #fff;
background: #000;
}
まぁ被らない様にはなっていると思います

ページの HTML ビュー の中身
<!-- Profile picture-->
<div class='profile-picture'>
<img src='https://blogger.googleusercontent.com/img/a/AVvXsEhXrXngvYpfycBJHfocz-A1UdKy1SlTZrp2nOdSMdPEapWj_7Uq99YPAF_rWNOj_r-cr5rf5LZ1CIgnbqNvBl-dJtej4eQTHpoaopWmJiKW0KqhT9tlIB_nvyTmGMcHjoTdSvrsKRZHouuZhH7CjNtppy54Gofpaj5_yBNx9dr5YQS1fzflvI49cdBf_w=s2048-cc'/>
</div>
<!-- Profile name-->
<div class='profile-name'>@name</div>
<!-- Links-->
<div class='tree'>
<a class='links' href='#'>STORE</a>
<a class='links' href='#'>NEW ALBUM</a>
<a class='links' href='#'>IG</a>
<a class='links' href='#'>Twitter</a>
<a class='links' href='#'>YouTube</a>
</div>
<!-- Logo -->
<div class='bottom-text'>Tricktree</div>
プロフィール画像は今回はBlogger側で正円表示のパラメーターを付けています(-cc)

結果
https://mod-template-minimal.blogspot.com/p/trick-tree.html
まぁ面倒なので別にテンプレートを用意した方がいいのです

F(uriouz)

欲しいものリスト
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

0 comments:

コメントを投稿

スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。

注: コメントを投稿できるのは、このブログのメンバーだけです。

Recent Posts

 
"The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."