登録している SNS やサイト等の関連リンクが増えてきて、これらのリンクリストをどこかに纏めておきたくなったもんで、最近よく見かける Linktree 等のプロフリンクまとめサービスっぽい見た目のポータルサイトを作ってみました。(ブログの固定ページではなく、独立したサイトとして作りたかった)
ふじりんくすふじりんくすふじやん関連リンク一覧ですhttps://fujilinx.blogspot.com/
サイト名は ふじやん のリンク集ということで FujiLinx (ふじりんくす)。最後が x なのは Twitter 等で使ってる ID の fujiyanx にちなんでるからw
CONTENTS
自作した理由
外部サービスを色々物色してみたものの、どこも帯に短し襷に長し…
なら自分で作っちゃえばいいじゃん!てなわけで 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 のスコアはほぼ満点です。
ふじやんカスタム版の 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 |
|
3.3 | 2022/09/15 |
|
3.2 2.1 |
2022/08/21 |
|
3.1 | 2022/07/31 |
|
3.0 | 2022/07/30 |
|
2.0 | 2022/06/26 |
|
1.5 | 2022/04/22 |
|
1.4 | 2022/04/09 |
|
1.3 | 2022/03/14 |
|
1.2 | 2022/03/07 |
|
1.1 | 2022/03/03 |
|
1.0 | 2022/01/05 | Initial Release |
Tricktree FB ユーザー紹介
あトんさん
ボタンイフェクトが派手!
LinkLeafLinkLeaf"あトん"のリンクリストです。https://linkleaf.heavy-peat.com/
いししさん
配色やデザインがクール!
おっさんリンクおっさんリンクhttps://o3link.blogspot.com/
djug さん
djug Linksdjug Linksdjugが登録している。ソーシャルアカウントを掲載している。リンクツリー的なサイトです。https://djug-links.blogspot.com/
まつゆうさん
MATSU PortalMATSU Portal50代を迎えてもまだまだ現役ゲーマーおじさんのプロフィールサイト。https://r50gamer.blogspot.com/
GO さん
デザインが凝ってます。
GOLinksGOLinkshttps://golinklist.blogspot.com/
chovi さん
背景の🐱キャラが可愛い!
chovi Linkschovi Linkshttps://chovilinks.blogspot.com/
2022/07/06 追記: Tricktree FB のカスタマイズ纏め記事を書きました
カスタマイズのご参考にどうぞ。
ふじろじっくTricktree FB カスタマイズ集 (随時追加予定)Tricktree FB テンプレートのカスタマイズ例を纏めますhttps://fujilogic.blogspot.com/2022/07/Tricktree-FB-customize-list.html
コメントを投稿
別ページに移動します2 件のコメント (新着順)
ふじやん
BINUBALLさん、XML アップデートが早すぎます(笑)
実は私も LinkList を使うことも検討しましたが、高速化に拘ったため Blogger JS を無効化しました。
BINUBALL版の XML リンクも後ほど追記しておきますね。
BINUBALL
面白いテンプレートですね。
Bloggerを使って作成したので、Bloggerだけの機能を追加してみました。 レイアウト編集でリンクリスト(LinkList)を使用できるように編集しました。 初心者にもっと便利に使えるようになりました。
https://drive.google.com/file/d/1SA94wKF5XcxZ8dkwdKgTbv69fp2gudUm/view?usp=sharing