ふじりんくすの最近のカスタマイズ

もうアップデートもカスタマイズネタの追加もするつもりのない Tricktree FB ですが、自分のサイト(ふじりんくす)は相変わらずちまちまといじってたりします😅

参考までにふじりんくすに最近施した主なカスタマイズについてまとめておきます。

尚、詳細な手順は書いていませんので、真似される方は CSS や HTML で追加の変更が必要になる場合もありますのでご注意ください。

サイト別にボタン背景を色分け

配色は2色で濃淡を付けたグラデーションですが、公式のブランドカラーではなく適当にそれっぽく見えるようにしています(笑) 特に Instagram はオリジナルが複雑なので再現は無理です😅

内部リンク(固定ページ)は白地に黒文字で統一しています。

CSS

CSS のセレクタはaタグのhref属性で指定しました。(リンク毎に異なるクラス名を付けるとかできないので)

[href*=”〇〇”] → 〇〇を含む URL
[href^=”〇〇”] → 〇〇で始まる URL
[href$=”〇〇”] → 〇〇で終わる URL
[href=”〇〇”] → 〇〇と完全一致の URL

という感じで判定されます。

[href$="blogspot.com"] {
  background:  linear-gradient(to bottom, darkorange, orange);
  color: #fff;
}
[href*="oneshotdiary"] {
  background:  linear-gradient(to bottom, orangered, darkorange);
  color: #fff;
}
[href*="x.com"] {
  background:  linear-gradient(to bottom, #111,#555);
  color: #fff;
}
[href*="twilog"] {
  background:  linear-gradient(to bottom, #0084b4,#0095cc);
  color: #fff;
}
[href*="instagram"] {
  background:  linear-gradient(to bottom, darkorchid, orangered);
  color: #fff;
}
[href*="bsky"] {
  background:  linear-gradient(to bottom, royalblue, dodgerblue);
  color: #fff;
}
[href*="contact"],
[href*="qr"] {
  background:  linear-gradient(to bottom, #ddd, #f5f5f5);
  color: #111;
}

全部部分一致のhref*にしても良さそうですが、blogspot.com に関しては、フッターのリンクも blogspot.com が含まれていて背景がついてしまうため後方一致にしました。

ちなみにクラス名 (.links) を付けてリンクボタンに限定するという方法もあります。

[href*="blogspot.com"].links {
  background:  linear-gradient(to bottom, darkorange, orange);
}

ボタンの下にサイトの説明文

各リンク先のキャプションを付けてみました。

凝ったデザインにしようかとも思いましたが、結局シンプルなレイアウトに落ち着きました。(また気まぐれで変えるかもしれませんが…)

ほんとは中央寄せにしたかったのですが、HTML の構造の関係で上手くいかなかったので左寄せで妥協してます😅

HTML

レイアウト編集でページ名の末尾に説明文用のタグを追加。

<svg タグ>サイト名<span class="link-text">ここに説明文</span>

CSS

.links {
  position: relative;
  margin-bottom: 4em;
}
.link-text {
  position: absolute;
  top: 4.2em;
  left: 0;
  text-align: left;
  color: var(--font);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 5px;
}

タイトル属性を付ける

実はキャプションを付ける前にタイトル属性をを付けることも試していたのですが、スマホだと見れないし、PCでも分かりづらいのでボツにしました😅

参考までに JavaScript を置いときます。(Blogger のリストウィジェットは編集でタイトル属性を付けられない)
自分で書いた無駄だらけの長ったらしいコードを ChatGPT さんに効率良くなるように整理してもらってます。

<script>/*<![CDATA[*/
window.addEventListener("DOMContentLoaded", () => {
  const links = [
    { selector: '[href$="blogspot.com"]', title: "気ままに書いてるブログです" },
    { selector: '[href*="oneshotdiary"]', title: "一番アクティブなSNSです" },
    { selector: '[href*="x.com"]', title: "最近は情報収集がメインで、あまり呟いてません" },
    { selector: '[href*="twilog"]', title: "Xの過去ログ保管庫です" },
    { selector: '[href*="instagram"]', title: "基本見る専ですが、たまに月写真などを上げてます" },
    { selector: '[href*="bsky"]', title: "Xからの退避先として確保しただけで、ほぼ放置です" },
    { selector: '[href*="contact"]', title: "お問い合わせ" },
    { selector: '[href*="qr"]', title: "QRコード" }
  ];
  links.forEach(link => {
    const element = document.querySelector(link.selector);
    if (element) {
      element.setAttribute("title", link.title);
    }
  });
});
/*]]>*/</script>

ふわっと表示

CSS アニメーションのフェードインでページをふわっと表示させるようにしました。ちなみに昨日から当ブログにも適用しています。

CSS

body {
  animation: fadeIn .5s linear;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

せっかちなもんで表示が完了するまでの時間を短めの0.5秒に設定しています(笑) たまにやたら長いサイトがありますよね。ページ遷移する度にあれやられるとちょっとイラッとします😅

とある固定ページを追加

先日 GIGAZINE さんの記事で面白いサイトが紹介されていました。

GIGAZINE

美しいQRコードを作成できる「qrframe」

QRコードと言えば、黒と白のドットが無機質に並んだものというのが一般的なイメージとしてあります。このQRコードに色づけしたり形を変えたりして装飾できる「qrframe」というページが公開されていたので使ってみました。

https://gigazine.net/news/20241001-qrframe/

色んなデザインの QR コードを作成できるというもの。というわけで早速ふじりんくすオリジナルの QR コードを作ってみました。

スマホで読取ってみてね

いかがでしょうか(笑)

これでもちゃんと機能するのがすごいですよね。

作ったのはいいけど、さてどこに置こうかと思案。アイコンか壁紙にでもしようかとも思ったけど、やっぱりそれはちょっと気が引けるので、別ページにこっそり飾っておくことにしました(笑)

ちなみに QR コードページのボタンはスマホ(600px以下)では非表示になりますが、横向きにすれば出てきます。

最後に

今回のカスタマイズは以上です。Tricktree FB ユーザーの方、何か他に面白いカスタマイズのアイデアがあったら教えて下さい😁