EDIT

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

2022/01/05 2

Blogger

アイキャッチ

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

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

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

自作した理由

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

リンクツリーみたいな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 してご自由にお使いくださいませ。

Tricktree(fuji-custom).xml (Google Drive)

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

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

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

ダウンロードはこちらから。
Tricktree(binuball-custom).xml (Google Drive)

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

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

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

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

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

ダウンロードリンクはこちら。(Last Update: 2021/01/10 16:34)
Tricktree(fujiyan-binuball-custom).xml (Google Drive)