ブログタイトルロゴを SVG 化しました

｜2023/09/06 ｜6
アイキャッチ

「ふじろじっく」のブログタイトルロゴに使用している少し特徴のあるフォントは「せのびゴシック」というフリーフォントで、タイトルロゴだけでなく、ここ最近のアイキャッチ画像(Canvaで作成)でも多用するほどに気に入ってます。

ヘッダーのブログタイトルのロゴはここで作った透過 PNG 画像を使っていたのですが、画像だと明暗切り替えの連動で色を変えることができないため、ライトモードもダークモードも同じ色を使うしかなく、苦肉の策でライトモード時は背景に色を付けていました。デザイン的に敢えてそうしてたと思われてた方も多いでしょうけど、実はそういう理由があったのです。ダークテーマのデザインは変えたくなかったし(^^;

ライトモードヘッダー白文字背景色付き
白文字が見えなくなるので背景に色を付けてた
ダークモードヘッダー
仕切りの青い線デザインは変えたくなかった

まあこれはこれで昼間の空みたい？でいい感じなのでありかな、と思えるようになって自分でももうすっかり慣れてきていたのですが、先日リモスキさんがこんな記事を書かれているのを見て、なるほど、その手があったかと！

ファビコンリモスキ！
サムネイル
ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法
https://www.limosuki.com/2021/09/svg-titlelogo-blogger.html

画像ではなく SVG なら自由に色が変えられる！というわけで早速うちのロゴも SVG 化してみたと言うわけです。

ちなみにリモスキさんのように Inkscape 等のフリーソフトは使わず、オンラインの変換サービスで PNG → SVG 変換させたファイルを使用しています。横幅 2000px ぐらいに拡大してよーく見てみると所々線が歪んでいたりして粗が目立ちますが、まあ許容範囲ではないかなと。そんな巨大サイズで見られることもないだろうし。別にソフト使ってちゃんとした SVG 作ってもいいんだけど、とりあえずこのままにしておきます(^^;

ライトモードヘッダー黒文字背景色なし
ダークテーマと同じデザインに

リモスキさんの真似をしてついでにフッターの帰属表示のタイトルロゴも SVG にしました。他のリンク同様マウスホバーで下線が出るようにもしてあります。

フッターの帰属表示

ということで、これでようやく当初の理想のデザインにできたわけだけど…うーん、ちょっと地味な気もするなあ。この SVG は文字のパーツごとに色も変えられるので、部分的にワンポイントで色でも付けてみるか？「ふ」だけ青くしてみるとか？

これはちょっとやりすぎw

納得いくデザインになるまで色々試行錯誤してみよう。