TrickTreeを出す前に考えましたが
まぁできないこともないんです
まずは 新しいページ を作っておきます
パーマリンク を考えて 英字でタイトルを決めます(ページを削除すると1回きりなので注意)
タイトル を Linktree と入れると linktree.html の様になります
オプション で 閲覧者のコメント を 許可しない (コメントが欲しい場合は別)
head内に追加
(ページのURLは自分のを入れてください)
<b:if cond='data:blog.url == "https://mod-template-minimal.blogspot.com/p/trick-tree.html"'>
<style>
.sidebar {
display: none;
}
.post-wrapper {
width: 100%;
}
.header,
.tabs,
.home-link,
.post-title,
.entry-title,
.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
まぁ面倒なので別にテンプレートを用意した方がいいのです




0 comments:
スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。
注: コメントを投稿できるのは、このブログのメンバーだけです。