Tricktree FB カスタマイズ集

2024/10/152
Tricktree FB カスタマイズ

Tricktree FB テンプレートのカスタマイズについて纏めます。基本的に初心者向けです。

相変わらずユーザーが少ないようで、あまり需要はないかもしれませんが、自己満で書きます(笑)

リクエストやご質問を頂ければ(難題でない限りは)随時追記していくつもりです。また、いいカスタマイズのアイデアを教えて頂ければ紹介させていただきます。

テーマ編集の前に XML のバックアップを取っておきましょう!

CONTENTS

リンクを新しいタブで開くようにする

以下のコード(バージョンによってコードが異なります)を検索で探し、target='_blank' を追加します。全てのリンクが新しいタブで開くようになります。

v3.2 以前

<a class='links' expr:href='data:link.target'><data:link.name/></a>
↓↓
<a class='links' expr:href='data:link.target' target='_blank'><data:link.name/></a>

v3.3 以降

<a class='links' expr:href='data:link.href'><data:link.title/></a>
↓↓
<a class='links' expr:href='data:link.href' target='_blank'><data:link.title/></a>

PC でも1列表示

Linktree などのように常時1列表示にします。

まず CSS の下記の部分を削除またはコメントアウト(/**/ で囲う)します。

@media (max-width: 1024px) {
.links {
flex-basis: 48%;
}
}
@media (max-width: 600px) {
.links {
flex-basis: 100%;
}
}

.linksWrapwidth.linksflex-basis の数値を以下のように変更します。width の数値 600px はお好みで調整してください。

.linksWrap {
width: 600px;
}
.links {
flex-basis: 100%;
}

プロフィール画像やボタンを四角くする

プロフィール画像の場合は img.profile-pictureborder-radius の数値を小さくします。ボタンの場合は .linksborder-radius です。

img.profile-picture {
border-radius: 5px;
}
.links {
border-radius: 5px;
}
四角いプロフ画像とボタン

背景画像を設定

body に以下のコードを追記します。

小さいパターン画像を模様のように並べて表示させる場合は、background-repeat: repeat; に変更してください。

画像を固定せずスクロールに追従させる場合は、background-attachment: scroll; に変更してください。

表示位置を調整したい場合は background-position というプロパティを使ってみてください。詳しくはこちらを参照→background-position-スタイルシートリファレンス

body {
background-image: url(ここに画像 URL);
background-repeat: no-repeat;
background-attachment: fixed;
}
背景付き ボタン1列
小さい背景をrepeatで付けてボタンを1列にした例

使用素材:マーガレットのパターン背景1 | 花、植物イラスト Flode illustration(フロデイラスト)

ダークモードとライトモードでそれぞれ違う画像を設定する場合

bodyライトモード配色ダークモード配色の所に以下のようなコードを追加します。

body {
background-image: var(--bg-img);
}
/*== ダークモード配色 ==*/
:root {
--bg-img: url(ダークモード用画像 URL);
}
/*== ライトモード配色 ==*/
:root[data-theme-mode="light"] {
--bg-img: url(ライトモード用画像 URL);
}

※ v2.2 及び v3.4 以前のバージョンをお使いの場合はこちらのコードになります。

body {
background-image: var(--bg-img);
}
/*== ライトモード配色 ==*/
:root {
--bg-img: url(ライトモード用画像 URL);
}
/*== ダークモード配色 ==*/
:root[data-theme-mode="dark"] {
--bg-img: url(ダークモード用画像 URL);
}
背景付きライトモード背景付きダークモード

2000×1500px の横長画像を background-position:center で配置。
使用画像:「風車」「コンビナート夜景

2022/07/07 追記: リンク名に Font Awesome アイコンを付ける

ふじりんくすのように左寄せで表示します。

手順1: コードの設置

まず <head> または <body> の下辺りに CDN リンクを設置します。

<link href='//use.fontawesome.com/releases/v6.1.1/css/all.css' rel='stylesheet' type='text/css'/>

レイアウト編集ページの「リンク編集」を開き、リンクリストの「サイト名」のところに Font Awesome アイコンタグとサイト名を入れて保存します。

リンクリスト編集1
リンクリスト編集2

アイコンのタグの一例です。その他は Font Awesome のサイトで調べてください。

Twitter
<i class='fa-brands fa-twitter'></i>
Instagram
<i class='fa-brands fa-instagram'></i>
YouTube
<i class='fa-brands fa-youtube'></i>
Blogger
<i class='fa-brands fa-blogger'></i>

手順2: CSS の追加

以下の CSS を /*]]>*/</style> の上に追加して完了です。

.links {
position: relative;
padding-left: 2.9em;
}
.links .fa-brands,
.links .fa-solid,
.links .fa-regular {
position: absolute;
left: .5em;
top: calc(50% - 16px);
font-size: 3rem;
}
アイコン付きリンク
リンク名が2列になっても
アイコンは中央を維持します

Tricktree FB について

これまで Tricktree FB custom という(適当に考えた)名前で呼んでいましたが、正式名称を Tricktree FB としました。ちなみに FB とはベースのテンプレート Tricktree を改造した私 Fujiyan と BINUBALL さんの頭文字です。

Tricktree FB 制作の経緯や詳細についてはこちらの記事を御覧ください。

ファビコンふじろじっく
サムネイル
【Blogger】オリジナルのポータルサイトを作ってみた
Blogger で Linktree もどきのサイトを作ってみた
https://fujilogic.blogspot.com/2022/01/fujiyan-original-portal-site.html

ダウンロードリンク (Google Drive)

画面右上の アイコンでダウンロードできます。xml ファイルのため警告画面に遷移しますが「このままダウンロード」して頂いて大丈夫です。

Tricktree-FB v2
Tricktree-FB v3 (固定ページ機能付き)

デモサイト

Tricktree FB demo