【Blogger】オリジナルのポータルサイトを作ってみた

2024/10/302
アイキャッチ

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

ファビコンふじりんくす
ふじりんくすのサムネイル
ふじりんくす
ふじやん関連リンク一覧です
https://fujilinx.blogspot.com/

サイト名は ふじやん のリンク集ということで FujiLinx (ふじりんくす)。最後が x なのは Twitter 等で使ってる ID の fujiyanx にちなんでるからw

CONTENTS

自作した理由

外部サービスを色々物色してみたものの、どこも帯に短し襷に長し…

リンクツリーみたいなSNS複数リンクまとめサービス21選

なら自分で作っちゃえばいいじゃん!てなわけで Blogger で自作してみた次第です。新規にブログを作成してテーマをカスタマイズすれば、わざわざ外部サービスに頼らなくても無料でお手軽に実現できるのです。Blogger ってほんとすばらしい! ちなみにふじろじっくカスタムのカードジェネレータも独立したサイトとして運用していて、ふじりんくす はジェネレータサイト(※非公開)の HTML をベースにしてカスタマイズしています。

基本的なデザインに関しては、こちらの FPS さんがテンプレートの雛形を公開されていたので参考にさせていただきました。

ファビコンFPS(Furiouz Personal Side)
サムネイル
LinktreeライクなBloggerテーマ Tricktree をリリースしました
デモサイト https://trick-tree.blogspot.com/ こちらのコードがベースになっていますが How To Build A Custom Linktree Page With HTML & CSS (for Beginners) - DEV Commu...
https://furiouzps.blogspot.com/2022/01/Linktree-like-Blogger-Template.html

ふじやんによる独自カスタム

配色は ふじろじっく と同じ。明暗切り替えスクリプトも ふじろじっく から移植しました。

画面幅に応じて3 → 2 → 1列に変化します。

マルチディスプレイスクリーンショット

SEO 等も対応済で Lighthouse のスコアはほぼ満点です。

Lighthouse スコア

ふじやんカスタム版の XML

こういうサイトを作ってみたい、しかも ふじやん カスタムのテンプレートを使ってみたいって方いますかね?(^^;

FPSさんのオリジナル版はカスタマイズも再配布も可とのことなので、ほしい方はこちらに置いてある XML ファイルを DL してご自由にお使いくださいませ。

ふじやんカスタム版の注意点:
オリジナル版ではプロフ画像はレイアウト編集にてイメージガジェットでのアップが可能ですが、うちでは高速化に拘って Blogger 標準の JS を無効化し、イメージガジェットを外してあるためレイアウトでの編集ができません。従って画像は直接テーマ編集で <!-- プロフ画像 --> のところの <img> タグに URL を入れてください。

Tricktree(fuji-custom).xml (Google Drive)
こちらのふじやん版の配布は止めました、今後は↓で紹介した ふじやん & BINUBALLカスタム版をご利用ください。

追記: BINUBALLさんカスタム版テンプレート

BINUBALLさんが初心者向けに、レイアウト編集で画像やリンクを編集できる仕様にしたカスタムテンプレートを作られました! ふじやん版よりも使い勝手が向上してますのでこちらの方がオススメです。

それにしても BINUBALL さん、記事公開から1時間足らずでアップデートさせるとか仕事早すぎw

ダウンロードはこちらから。
Tricktree(binuball-custom).xml (Google Drive)
こちらのBINUBALL版の配布は止めました、今後は↓で紹介した ふじやん & BINUBALLカスタム版をご利用ください。

2022/01/06 追記: BINUBALLカスタム版をさらにアップデートしました。

ユーザー名及びフッター表記部分もレイアウト編集ページで編集出来るようにしました。これで基本設定はすべてレイアウト画面だけでまかなえることになります。

ユーザー名はイメージガジェットの「説明」欄で、フッター表記は HTML/JavaScript ガジェットで変更できます。説明欄のユーザー名も HTML タグが使用可能で <a> タグでリンクを付けたりもできます。

レイアウト編集
イメージガジェット設定

2022/07/31 追記: 固定ページ表示機能を追加しました(ver.3)

ふじりんくすお問い合わせページを作ってみようと思い立ち、ブログの投稿ウィジェットを設置してみたところ、問題なく使えそうな感じに出来たので、Tricktree FB にも機能を追加してみました。需要があるのかは分かりませんけど(^^;

ブログウィジェットもバージョン2を使用したのですが、2は1よりも多くの不要なコードがありまして、一つ一つ削除していたらエラい時間が掛かるところでしたが、こちらのさめさんが大変便利なツールを公開されていたお陰で効率よく作業できました。→
【Blogger】b:includable タグの中身一括削除ツール | mizusame

本家の Tricktree にもページ機能付きバージョンがありますが、だいぶ仕様が異なるようです。

用途や特徴

別に外部リンク集に拘らず、トップページをインデックスページにして、ボタンを全部固定ページのリンクにしちゃっても面白いかも? どんなページを作るかはあなたのアイデア次第です(笑)

尚、記事ページではありませんので不要な機能(コメントやシェアボタンや投稿日など)は外してあります。構成は基本的にページタイトルと本文のみです。デフォルトで本文の下にホームリンクを付けてあります。

ブログウィジェットはレイアウトページでは表示されないようになっています。(分岐タグを弄れば表示は可能ですが非推奨)

記事ページや存在しないページの URL にアクセスするとトップページが表示されます。

デモサイトとダウンロード

  • デモサイト
    Tricktree FB (v.3.5) demo

  • ダウンロードリンクはこちら (Google Drive)
    固定ページ機能付きの v3 は、機能なしの v2 とは置き場所が別ですので、旧版も引き続きDL可能です。
    画面右上の アイコンでダウンロードできます。xml ファイルのため警告画面に遷移しますが「このままダウンロード」して頂いて大丈夫です。

    Tricktree-FB_v2.2.xml
    Tricktree-FB_v3.5.xml (固定ページ機能付き)

テンプレート更新履歴

ver. 更新日 更新内容
3.5 2022/10/11
  • ライトモードでホームから固定ページにアクセスした際に一瞬ダークモードになってしまう場合があるため、明暗切替えコードの設置位置の変更で対応。
3.4
2.2
2022/10/08
  • 初回アクセス時は閲覧者のデバイスのダーク/ライトモードに合わせて正しく切り替わる用に CSS を修正。(変更箇所は v2/v3 共通)
    ※クッキーが無効になっている環境では常時ダークモードになります。
3.3 2022/09/15
  • 「リンクリスト」を「ページリスト」ガジェットに変更。
  • 初期化CSSを設定。
  • その他細部の修正。
3.2
2.1
2022/08/21
  • モードスイッチの HTML と CSS の改良。
3.1 2022/07/31
  • 固定ページにクイック編集pen機能追加。
3.0 2022/07/30
  • 固定ページ機能を追加。
2.0 2022/06/26
  • ウィジェットバージョンを2に変更。レイアウト画面でウィジェットの表示非表示の切り替えが可能に。
  • ボタンデザイン変更。
1.5 2022/04/22
  • デフォルトモードをライトに変更。
  • 配色を変更。
1.4 2022/04/09
  • html 更に最適化。
1.3 2022/03/14
  • レイアウト構造の変更。
1.2 2022/03/07
  • html 最適化。
1.1 2022/03/03
  • 自己紹介用タグ追加。
  • font-size を rem に変更。
1.0 2022/01/05 Initial Release

Tricktree FB ユーザー紹介

あトんさん

ボタンイフェクトが派手!

ファビコンLinkLeaf
LinkLeafのスクリーンショット
LinkLeaf
"あトん"のリンクリストです。
https://linkleaf.heavy-peat.com/

いししさん

配色やデザインがクール!

ファビコンおっさんリンク
おっさんリンクのスクリーンショット
おっさんリンク
https://o3link.blogspot.com/

djug さん

ファビコンdjug Links
djug Linksのスクリーンショット
djug Links
djugが登録している。ソーシャルアカウントを掲載している。リンクツリー的なサイトです。
https://djug-links.blogspot.com/

まつゆうさん

ファビコンMATSU Portal
MATSU Portalのサムネイル
MATSU Portal
50代を迎えてもまだまだ現役ゲーマーおじさんのプロフィールサイト。
https://r50gamer.blogspot.com/

GO さん

デザインが凝ってます。

ファビコンGOLinks
GOLinksのスクリーンショット
GOLinks
https://golinklist.blogspot.com/

chovi さん

背景の🐱キャラが可愛い!

ファビコンchovi Links
chovi Linksのスクリーンショット
chovi Links
https://chovilinks.blogspot.com/

2022/07/06 追記: Tricktree FB のカスタマイズ纏め記事を書きました

カスタマイズのご参考にどうぞ。

ファビコンふじろじっく
サムネイル
Tricktree FB カスタマイズ集 (随時追加予定)
Tricktree FB テンプレートのカスタマイズ例を纏めます
https://fujilogic.blogspot.com/2022/07/Tricktree-FB-customize-list.html