EDIT

Tricktree FB カスタマイズ集 (随時追加予定)

2022/07/06 ｜2023/09/06 ｜2

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

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

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

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

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

以下のコード(バージョンによってコードが異なります)を検索で探し、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%;
  }
}

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

.linksWrap {
  width: 600px;
}

.links {
  flex-basis: 100%;
}

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

プロフィール画像の場合は img.profile-picture の border-radius の数値を小さくします。ボタンの場合は .links の border-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;
}

小さい背景を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 アイコンタグとサイト名を入れて保存します。

アイコンのタグの一例です。その他は 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;
}