ブログのヘッダータイトルをつくってみました。
これまでは普通の文字でした。
手書き風のフォントを使って、ちょっとロゴっぽさを出してみました。
ロゴデータを用意するところから
僕がお手本にしているサイトは「SVG」という形式を使っているのが多かったです。
SVG＝「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略（大きさを変えられるベクター画像という意味）
他のデータとの違いです。
・PNGやJPEGはピクセルの集まりであるラスター画像（ビットマップ画像）
・SVGは曲線を描いたり一定の範囲を塗りつぶしたりといった処理を座標と数式によって行えるベクター画像です。
SVG形式のメリット
１、どれだけ拡大しても劣化しないベクター形式
どんな画面サイズでもクッキリ表示されます。
2、ファイルサイズが軽い
数KBになりPNGより圧倒的に軽いです。
軽いということはページ速度があがります。
ちなみに今回作ったタイトルは、たったの26KB.
3、CSSで色やサイズを変更できる
今回は黒にしてます。
4、透明背景が標準
背景色を変えても対応できます。
5、Googleなどの検索エンジンに理解されやすい
SVGは検索エンジンが理解しやすいテキストベースです。
SVGのデメリットもありました。
１、WordPressは標準ではアップロードがNG
SVGがテキストベースのため、悪意ある書き込みがしやすく、標準ではアップロードできません。場合によってはサーバー側で制限がある場合もあります。
今回は後述するプラグインでアップしました。
僕は、Xserverを使っていますが、サーバー側は問題ないようです。プラグインのおかげかな？
IllustratorでSVGを作成
1、フォントを使って文字組みする
ロゴ用のフォントはAdobeフォントの中から選びました。
手書き風の文字が好きなので、Nick Cookeさんデザインの「Rollerscript」というフォントにしました。
「Rollerscript」は、メッセージやデザイン、ブランドアイデンティティに人間味を加える必要がある場合に効果を発揮します。ローラーボールペンで作成されたカジュアルで非公式な手書きフォントは、誤読が少なく、品格があり、多彩で楽しい表情を持っています。
2、IllustratorでSVGを書き出すときの設定に多少注意が必要です。
| 設定項目 | 推奨値 | 理由 |
|---|---|---|
| SVGプロファイル | SVG1.1 | 互換性が高い |
| フォント | アウトライン化 | 表示崩れ防止 |
| 画像 | 埋め込み | 外部ファイルを減らし高速化 |
| CSSプロパティ | プレゼンテーション属性 | コードが軽くなる |
| 小数点以下の精度 | 2〜3 | ファイルサイズ削減 |
SVGは軽さが命なので、余計なメタデータを減らすのがポイントです。
出来上がったのがこれ！
WordPressでは、通常SVG形式はアップできないとアラートがでるため、「SVG Support」というプラグインを入れて対処します。
「SVG Support」の設定では、「高度な設定」というところにチェックを入れ有効にします。これをしないと使えない場合があります。
３、セキュリティリスクをゼロにするには自作のSVGのみ使うこと
4、複雑なイラストでは逆にファイルサイズが肥大化するので注意
SWELL側の設定
ダッシュボードの「外観」＞「カスタマイズ」から「ヘッダー」
◾️ヘッダーロゴの設定
画像を変更でSVGデータを読み込みます。
SVG画像の高さを設定することで大きさを調整します。
このサイトの設定
画像サイズ（PC）：60
画像サイズ（PC追従ヘッダー内）：40
画像サイズ（SP)：80
そのほか、細かな設定ができますが、まずはサイトロゴを作ってアップさせます。
いやー、わからないことだらけなんで調べてはやってみて、また調べてはの繰り返し。ホントにちょっとずつです。
いずれはオリジナルのロゴを作りたいですが、そこにこだわると記事が積み上がらないので、今日のところはここまで！