Bloggerで作るLINK集

2024/07/24 ｜2024/09/09

おっ、これいいね

って事で、またふじやんさんがやってるのを頂いてきました

登録している SNS やサイト等の関連リンクが増えてきて、これらのリンクリストをどこかに纏めておきたくなったもんで、最近よく見かける Linktree 等のプロフリンクまとめサービスっぽい見た目のポータルサイトを作ってみました。(ブログの固定ページではなく、独立したサイトとして作りたかった)

自分はLinktreeは作ってませんが

lit.link は被リンクになるかな？と作ってました

んが、それ以下でもそれ以上でもなく

作ったもののどうでも良い存在、、、

で

Tricktree FB を見つけて自分もやろうと思った次第です

作ったのはX(Twitter)でウェブサイトに登録しました

他でも自己紹介の欄にリンク貼ってたら便利じゃないかな

Tricktree FB
カスタマイズ
枠変更のコード

Tricktree FB

ふじやんさんがX（Twitter）で仰ってますが
今後アップデート等は無いようです

まぁ、これ以上アップデートとか必要ないでしょ

アップデート等を期待する方は別のサービスを使うか自作してください

ダウンロードはふじやんさんのサイトに行ってください

その後、どう自分好みにいじるかだけの話しです

カスタマイズ

自分好みに色を変えて、、、

サイズも変えて、、、

アイコンも表示させて、、、

数が少ないから表示を１列にして、、、

それなりに自分好みに変えて完成！！

ライト・ダークモード

Contactは要らないかな、、、

と思ったけど４つだと寂しくて(^^;

これでいいんですが、、

ボタン（枠）を変えてやろうと、、、

GOLinks

なんか、、、
元の方が良かったかな、、、
まぁ、いいや、、、

枠変更のコード

基本的な使い方、カスタマイズ等はふじやんさんのサイトを見てください

変更した枠のコードはアップしときます

　.links {　の所を書き換えてください

.links {
 position: relative;
 text-align: center;
 font-size: 1.9rem;
 width: 90%;
 margin: 1em auto;
 padding: .8em 1em .8em 1.5em;
 color: #770000;/* 文字色 */
 background-color: #e8ddbd; /*枠背景色*/
 box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
}
.links::before {
 display: block;
 position: absolute;
 content: "";
 width: 100px;
 height: 30px;
 left: 35%;
 top: -16px;
 background-color: rgba(204, 186, 136,0.3);/*テープ色*/
 box-shadow: 0 0 3px rgba(0,0,0,0.1);
 transform: rotate( -3deg ); /*テープ角度*/
}

これが自分が使っている枠のコードです
ここをいじれば枠を変更できます