ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法

ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法

ブログのロゴって設定していますか?

ブログタイトルのフォントをちょっと変えるだけでも、雰囲気が変わってオリジナル感が出ますよね。それにフリーのアイコン素材も組み合わせれば、立派なロゴに!

今回はフリーソフトを使って、拡大・縮小しても画像がぼやけない SVG という形式のロゴ作成方法をご紹介します。

Blogger での設定方法(インライン SVG で設置)もまとめました。

目次

タイトルロゴには SVG を使おう

SVG は、JPG や PNG のような画像形式の1つです。詳しい説明は省きますが、拡大・縮小しても画質が変わらないという大きなメリットがあります。

JPG や PNG だと、小さいサイズのものを拡大すると画像が荒れてぼやけてしまいます。また、大きいサイズで用意してもブラウザによっては縮小することで画像がぼんやりするし、容量も大きくなってしまう。

せっかくロゴをつくってもキレイに見えないのは残念だし、いろんなサイズで使いたい場合に適切なサイズで何枚も画像を用意するのは大変です。

SVG なら、1つファイルを用意すれば拡大縮小が自由で、どのサイズにしても鮮明に表示されます。レスポンシブなサイトには最適。

幅200px:

幅400px:

上の2つのロゴは同じ画像を幅を変えて表示させているだけなんですが、どちらもぼやけずに、また画面を拡大してもクリアに見えていると思います。

なので高解像度ディスプレイにもばっちり対応できる上に、ファイル容量は小さいです。このロゴは 8KB。

また、CSS で設定すればサイズ変更だけじゃなく色も変更できます

同じロゴ画像で色を変えて、さらに背景色をつけたもの。(※ここでは HTML の style 属性で装飾してます)

こんな感じで融通も効いて、ロゴとして使うには良いこと尽くしのファイル形式が SVG です。というわけで、この SVG でロゴをつくっていきたいと思います。

SVG はロゴやアイコンなどのシンプルな図形に向いている形式のようです。写真などの複雑な画像を表現するには、データ量が大きくなるため適しません。

ロゴ作成の準備

ロゴを作成する準備として、作成用フリーソフト使いたい素材(日本語フォントやアイコンなど)をダウンロードします。

フリーソフト Inkscape のダウンロード

今回使用するのは Inkscape というフリーソフトです。以下のリンクからダウンロードできます。

Inkscape 1.1をダウンロード | Inkscape

ロゴ作成ツールはいろいろありますが、SVG を扱えるフリーソフトがこの Inkscape。

画像作成で有名な Canva は非常に便利ですが、SVG 形式でのダウンロードは有料版にしないとできなさそうで。(無料トライアル中につくれば無料でできるのかも?)

SVG にこだわらなければ他の気軽なブラウザツールで良いんですが、画像のぼやけがどうしても気になる人(私)は多少面倒でもダウンロードしましょう。

使いたい日本語フォントのダウンロード・インストール

Inkscape には日本語フォントがほとんど入っていないので、使いたいフォントがあれば PC にダウンロード、インストールします。

フリーのフォントはこういうサイトで探せます。

フォントフリー - 無料の日本語フリーフォント投稿サイト

欧文フォントに関しては複数の種類が Inkscape にすでに入っています。入っている欧文フォントだけで良ければ、日本語フォントをダウンロードしなくても大丈夫です。

PC にフォントをインストールしたら、Inkscape には自動的にそのフォントが追加されているはずです。

使いたいアイコンのダウンロード

ロゴにアイコンを使いたい場合は、フリー素材から探してダウンロードしておきます。SVG 形式の素材から探します。以下のような素材サイトがあります。

ICOOON MONO
icon rainbow
Material Icons - Google Fonts

ほかにも探せばいろいろあると思いますが「無料だけどクレジット表記が必要」なものもあるようなので、利用規約を確認した上で使うようにしましょう。上記3つは、クレジットなしで商用含め無料で利用できます。

有名な Font Awesome も、アイコンを SVG 形式でダウンロードして利用する場合はクレジット表記が必要になるので注意です。

Inkscape でロゴを作成

準備ができたら、さっそくロゴをつくっていきます!

Inkscape では高度な画像編集もできるようですが、複雑なことはよくわからないので(笑)、ここでは簡単に文字とアイコンを配置するというシンプルな作業だけでつくっていきたいと思います。

ドキュメントのサイズ

最初にドキュメントサイズを選ぶ画面が出てくると思いますが、これはなんでも OK です。あとからロゴ部分のサイズに合わせるので。

縦長だとイメージが湧かない場合は横長のサイズから適当に選んでつくっていきます。

文字・アイコンを配置

テキスト入力ボタンを押して、ブログタイトル名を入力します。

日本語フォントは、インストールしたものが英語名で入っているはずなのでそこから選びます。日本語のフォント名で登録されてるわけじゃないので、探すときに注意してください。

例:
ダウンロードしたフォント:コーポレート・ロゴ ver2
Inkscape に登録されていたフォント名:Corporate Logo ver2

文字サイズ、文字間隔なども調整できます。

びっくりマークだけ別のフォントにしてみました。上部メニューから「テキスト」→「テキストとフォント」を選択すると、フォントのプレビューを見ながら選べます。右下の「適用」でフォントが適用されます。

入力した文字や画像は、サイズ調整できます。

回転もできます。

複数の要素をきれいに揃えることもできます。

アイコン素材を入れたい場合は「ファイル」→「インポート」から挿入します。

ほかにも要素をグループ化したりとか、いろいろできます。Canva などの画像編集ツールに慣れていれば、なんとなく感じがわかって操作できると思います。

Inkscape の解説サイトはたくさんあるので、もっと高度なことを試したい場合は検索してみてください。

オブジェクトをパスに変換

アイコンと文字の配置ができたら、「パス」→「オブジェクトをパスへ」を選択します。

こうすることで、文字がテキストではなく図形になります。文字のアウトラインに表示されている小さな点を動かすことで、文字の形を変えることもできます。

色の設定

色を設定することもできます。図形の面の色のことを「フィル」と呼びます。1色のロゴしか使わない場合はこのソフトで色を設定しても良いし、あとで CSS からいろいろ設定したい場合は、ここでは設定しなくても構いません。設定しない場合は「アンセット」となります。

枠線を設定することもできます。枠線は「ストローク」。こちらもあとで CSS で変更できるので、設定しなくても OK。枠線が不要な場合は「塗りなし」にしておいても良いです。

枠線を使って文字を装飾することもできます。

ドキュメントをロゴサイズに合わせる

ロゴができあがったら、ドキュメントのサイズを調整します。「ファイル」→「ドキュメントのプロパティ」を選択。

ロゴを選択した状態で、ページサイズをコンテンツに合わせて変更します。

コンテンツサイズにぴったりあわせて切り取られました。

SVG 形式で保存し、圧縮

最後に SVG 形式で保存します。プレーン SVG という形式にしておくとプレーンに出力されて良いようです。私は知らずに Inkscape SVG で保存してましたが、特に問題はありませんでした。

SVG 形式の画像はテキストデータとして開くことができます。保存した SVG ファイルをメモ帳などのテキストエディタで開くと、こんなふうになっていると思います。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
width="164.84692mm"
height="26.198904mm"
viewBox="0 0 164.84693 26.198904"
version="1.1"
id="svg5"
inkscape:version="1.1 (c4e8f9e, 2021-05-24)"
...略...
</svg>

この状態だと余分な情報があるようなので、ブログに載せる前に圧縮しておきます。

SVG 圧縮 – SVGイメージをオンラインで圧縮する

圧縮後に再びテキストエディタで開いてみると、改行や一部のテキストが消え、先ほどよりも軽くなっていることがわかると思います。

これでロゴデータは完成です!

SVG 形式のロゴを Blogger に設定する

できたロゴをブログに設置します。

インライン SVG として設置

Blogger の場合、SVG ファイルは普通の画像のようにアップロードするのではなく、SVG のテキストデータをテンプレートや投稿画面の HTML にそのまま貼り付けることになります(インラインSVG)。

<svg>〜</svg> のタグで囲まれるのが SVG ファイルです。

この SVG コードをテンプレートに貼り付けるときは、

① そのまま貼り付ける
② 短いタグに置き換えて設置する ★おすすめ

という2種類の方法があります。おすすめは②。以下で詳しく説明します。

方法① そのまま貼り付ける

1つ目の方法は、SVG コードを表示したい場所にそのまま貼り付ける方法です。

・メリット:設置が簡単
・デメリット:テンプレートが読みにくく、管理しにくくなる

作成したロゴのテキストデータはこんなふうになっていると思いますが、このコードを HTML に貼れば、それだけで表示できます。

<svg width="456.737" height="70.229" viewBox="0 0 120.845 18.582" xmlns="http://www.w3.org/2000/svg">
...略...
</svg>

<svg class="blog-logo" 〜のように class 名をつけておけば、CSS での装飾もしやすくなります。

ただ、ほとんどが数字の羅列になっている長い SVG コードをテンプレート中にポンと貼るとテンプレートが読みにくくなっちゃうんですよね(実際に貼ってみるとわかる)。

1回しか使わない場合はまだ良いですが、ロゴを違う場所で何度も使いたい場合など、使う度にこの長いコードを各所に貼り付けるのは大変だし、テンプレートとして管理しにくくなります。

貼るだけで表示できるのは簡単ですが、貼った後のテンプレート管理を含めて考えると、この次に紹介する方法のほうがおすすめです。

方法② 短いタグに置き換えて設置する

長い SVG コードを、呼び出し用の短いタグ(<use> タグ)で呼び出せるようにする方法です。

・メリット:短いタグで表示できる、何度も使いやすい、テンプレート管理しやすい
・デメリット:最初の設置がちょっと面倒

短いタグとはこういうイメージです。

<svg class="blog-logo" expr:aria-label='data:title'><use href="#blog-logo"/></svg>

こっちのほうが、テンプレートに貼ったときに読みやすいしわかりやすい。

先ほどの長い SVG コードは、少し加工して <body> タグのすぐ下に貼っておき、実際に表示したい場所にはこの短いタグを書くだけで OK にします。

手順1

長い SVG コードを、次のように加工します。

<svg width="623.043" height="99.019" viewBox="0 0 164.847 26.199" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg">
...略...
</svg>
↓↓↓
<symbol id="ロゴのID名" viewBox="0 0 164.847 26.199">
...略...
</symbol>

※ タグの svgsymbol に変えます。

width, height は CSS で調整するので、ここでは削除しています。ここで設定したい場合は、そうしても良いと思います。

ロゴのID名の部分は、自分の好きな ID 名を設定します(例:id="blog-logo")。短いタグでこのロゴを呼び出す際の ID になります。

手順2

QooQ の場合

先ほど加工したコードを次のようなコードで囲み、<body> タグのすぐ下に設置します。

<svg style='display:none;' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
    <!-- SVG ロゴ ※ここから下に加工したコードを貼る -->
    <symbol id="ロゴのID名" viewBox="0 0 164.847 26.199">
    ...略...
    </symbol>
    <!-- SVG ロゴ ※ここまで -->
  </defs>
</svg>

<body> タグのすぐ下というのは、このあたりです。

この部分を設置しただけでは画像は表示されません。この部分が画像の保管場所のようになっていて、次に作成する「呼び出し用のタグ」を表示したい箇所に設置することで SVG 画像が保管場所から呼び出され、表示されるという仕組みです。

JetTheme の場合

JetTheme では「レイアウト」画面の最下部に「SVG Icons」というガジェットが用意されているので、そのガジェット内に<symbol id="ロゴのID名" viewBox=</symbol>のコードを追記すれば OK です。

手順3

次のような呼び出し用のタグを作成します。

<svg class="blog-logo" expr:aria-label='data:title'><use href="#ロゴのID名"/></svg>

※ CSS で調整しやすいよう、class="blog-logo" のようにクラス名をつけておきます。クラス名は好きなようにつけて OK です

ロゴのID名の部分は、手順1で設定したロゴの ID 名を入力します。
(例:id="blog-logo" とした場合、href="#blog-logo" とする)

JetTheme の場合

JetTheme ではガジェットからロゴを設定するので、expr:aria-label='data:title'の部分はaria-label="ブログタイトル名"としてください。

ロゴ以外の SVG の場合

expr:aria-label='data:title'の部分は削除するか、aria-label="SVG画像の説明"に書き換えてください。

※追記(2021/9/17)
ふじろじっくのふじやんさんからコメントいただき、コードを一部修正しました(上記は修正済みのコードです)。

ふじやんさんコメント

こちらの記事を拝見して、当ブログでも試しにタイトルロゴを SVG 化してみました。(ついでにフッターの帰属表示のブログタイトルも) 元々使っていた PNG 画像をオンラインの変換サービスで SVG 変換しただけのため、拡大すると若干粗が目立ってしまうので、その内気が向いたら Inkscape 等を導入してちゃんとした SVG を作りたいと思います(^^;

ところで、リモスキさんで使われているタイトル表示のコードに関してですが、Lighthouse でチェックすると「アクセシビリティ」の項目で 「Links do not have a discernible name(リンクには識別可能な名前がありません)」という指摘がされてしまいます。 a タグに title 属性を付けるか、svg に aria-label 属性を付けることでこの問題が改善できますので、宜しければお試しくださいませ。

a タグに title を付ける場合
<a expr:href='data:blog.homepageUrl' expr:title='data:title'><svg class='svg-limologo'><use href='#svg-limologo'></use></svg></a>

svg に aria-label を付ける場合
<svg class='svg-limologo' expr:aria-label='data:title'><use href='#svg-limologo'></use></svg>

コメントを受け、当ブログでは svg に aria-label を付ける方法で設置することにしました。コメントありがとうございます。

この呼び出し用のタグを、このあとロゴを表示させたい箇所に貼っていきます。

補足 ※他にも SVG ファイルを設置する場合

今回はロゴの SVG のみを取り上げていますが他にも SVG 形式のファイルを使いたい場合は、上記の囲みコードの中に SVG コードをまとめていき、短い <use> タグで呼び出す方法がより有効です。

<svg style='display:none;' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
    <!-- SVG その1 -->
    <symbol id='ID1' viewBox="0 0 164.847 26.199">
    ...略...
    </symbol>
    <!-- SVG その2 -->
    <symbol id='ID2' viewBox="0 0 32 32">
    ...略...
    </symbol>
    <!-- SVG その3 -->
    <symbol id='ID3'viewBox="0 0 32 32" >
    ...略...
    </symbol>
  </defs>
</svg>  

それぞれの SVG コードを手順1と同じように加工して、上記のようにまとめます。それぞれの SVG に対して呼び出し用の <use> タグを作成し、表示したい箇所に貼って呼び出すようにすると、テンプレートもすっきりしてメンテナンスしやすくなります。

これは SVG スプライトと呼ばれる方法みたいです。<symbol> タグなどの意味についても下記の参考サイトに説明があります。

Font Awesome などのアイコンフォントも、このようにインライン SVG を使って設置することで CDN で読み込まなくてもよくなります。ページ表示の高速化に役立ちます。

タイトルロゴの設置箇所(QooQ / JetTheme)

いよいよ最終段階です。ロゴを表示させます。

QooQ の場合

まず、Blogger 管理画面の「レイアウト」→「ヘッダー」で、画像が登録されていないことを確認します。

次にテンプレートへの設置です。ロゴの表示コード(長い SVG コード、または呼び出し用の <use> タグ)を以下の2箇所に設置します。

① 以下を検索。

<p id='header-title'><a expr:href='data:blog.homepageUrl'><data:title/></a></p>

上記の <data:title/> の部分を、表示コードで置き換えます。

② その2行下の部分。

<h1 id='header-title'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>

こちらも同様に、 <data:title/> の部分を置き換えます。

▼置き換え後のイメージ(<use> タグ使用)

JetTheme の場合

JetTheme では「レイアウト」画面に「Logo」というガジェットが用意されているので、そのコンテンツ欄に <use> タグをそのまま入力すれば OK です。

JetThemeのロゴ設定イメージ

CSS で色やサイズを調整する

最後に、CSS で色やサイズを調整します。
以下は例です。サイトにあわせて設定してください。

.blog-logo {
width:250px;
height:auto;
margin:0;
vertical-align: -0.15em;  /* 縦方向の位置を調整 */
fill: currentColor;  /* 色を調整 */
stroke: currentColor;  /* 枠線の色を調整 */
stroke-width: 0; /* 枠線の幅を調整 */
}

以上で、ブログのトップにタイトルロゴが表示できているはずです!!

大変お疲れさまでした。

▼ こちらの記事も参考にどうぞ。

Google Chromeの画像ぼやけ問題を解決する。Blogger独自の解消法も。

Google Chromeの画像ぼやけ問題を解決する。Blogger独自の解消法も。

先日ブログデザインを変更した際、画像の掲載サイズを修正したりしてたのですが、その過程で一部の画像にぼやけが発生しました。調べたところ、原因は Google Chrome の仕様でした。一般的な解決策と、Bloggerの画像URLを利用した解決策をまとめます。

次の記事 前の記事