こんにちは。理系かあさんです。
全くずぶの素人からブログを趣味で始めてみて、10か月くらいたちました。
ちょっとずつ地味～にコピペなどで色々いじっていたのですが、目立つところを変えてみよう！ということで何とな～く味気ないな、と思っていたのでブログのタイトルを変えてみました。
実は一回別のデザインにしてましたがなんか収まりが悪くて気になっていたのです( ；´Д｀)
結構気に入っているのでしばらくはこれで行くつもり・・・
デザイン能力ゼロの私でも簡単にロゴ作成が出来たのでやり方を簡単にまとめてみました。
まずはデザインを作成しよう
ソフトは多分なんでもいいと思いますが、私は今回無料で使えるブラウザデザイン作成ツールを使用することにしました。
デザイン作成ツールCanva
今回のタイトルロゴは無料で使えるデザイン作成ツールのCanvaを使いました。
PCからはブラウザ版、スマホやタブレットからは更にアプリ版が使えます。
こちらです。
英語になっていますが、サイト自体は日本語対応しております。
実はうちのブログのアイキャッチも全てこちらで作成しています。
有料の写真やデザインもありますが無料分だけでもかなりオシャレでかっちょいいものが作れます。
今回はブログのタイトルロゴをここで作成します。
ちなみにCanvaはブログ関連だけでなく、会員カードやポストカード、フライヤー（チラシ）なども作成できる優れものなので一見の価値あり！ですよ。
デザインサイズを選ぶ
はてなブログのタイトルロゴは1000×200pxで表示されるので今回はそのサイズに合わせて作成していきます。
今回Canvaで使ったのはこちら。
「Etsyショップ用～」というやつです。
サイズは1200×300pxとやや大きいですが後で少し加工するので一番近いこちらを使用しました。後々、縮小＆上下カットもしくはやや潰れますが縮尺変更の加工をします。
場所がわかりづらいときは「すべて表示」をクリック→「マーケティング」の中にあります。
他のサイズのテンプレートを使っても大丈夫だと思いますがはてなの場合やや加工が煩雑になります・・・
デザインの設定
今回は無料で公開されているデザインをベースに使うことにします。
無料テンプレートの中からうちのサイトのベースカラーにしている紺色に近いデザインを選択。
ちなみにデザイン右下に「無料」とついていないものは有料ですのでご注意くださいね。1ドル～3ドルと良心的な価格のものが多いので気に入った場合は有料のものを使うのもありだと思いますが(・∀・)
タイトル文字の設定
最初にすでにテキストが設定されているのでクリックすると編集できます。
コピーもできるのでこんな感じで文字サイズを変更して設定したい場合は複数個枠を作成しましょう。
テキストをクリックするとフォント＆サイズ＆色もいじれます。
フォントによっては太文字や斜体にできるものもありますが、特殊フォントはいじれないものがほとんどですね。
イラストなど素材の追加
横にあるデザインを変更したい場合は、「素材」から追加できます。
私はもともとの端子（?）みたいなデザインとブログコンセプトが合わないなぁと思ったのでまず端子（?）を消去して・・・
無料素材から植物っぽいものを選択。
何となくナチュラル感を出してみた（笑）
黒だと見にくいので白色に変更して貼り付けました。
単色のものはこのように色変更ができるのですがフルカラーのものはできないものが多いです。こちらも右下を見て、有料・無料が確認できます。
文字色を少し変更して、デザイン完成！としました。
ダウンロード
右上のダウンロードから「JPEG」もしくは「PNG」形式でダウンロードができます。
今回は画質が落ちにくいかな、ということでPNGにしました。
ちなみにうちの場合、いつものアイキャッチはダウンロード後に加工して軽くするためにJPEGでダウンロードすることが多いです。
（さらにサイズ縮小、ファイル自体の圧縮、はてなフォト経由・・・と圧縮しまくっているため、正直画像の質は悪いです）
複数個デザインがある場合は一括ダウンロードもできます。
サイズの変更
今回は「ペイント」というWindowsなら間違いなく入っている無料ソフトを使いました。
ただし、新しいVer.のWindowsはなぜかすべてのアプリなどから素直にペイントが開けないので、私は以下の手順で開いてます。（もしかしたら他に方法があるのかもしてませんが、アプリ経由だとペイント３Dしか出てこない・・・(;'∀')）
①ダウンロードしたファイルを右クリック。
②「プログラムから開く（H)」を選択
③「ペイント」をクリック
ペイントが開いたら、サイズ変更を選択して、ピクセルを変更します。
この時、縦横比を維持するを外して、水平方向を「1000px」、垂直方向を「200px」に変更するのが一番楽ちん。
難点としてはやや垂直方向につぶれてしまうことでしょうか。
つぶれるのが嫌な場合は横を1000pxにした後、上下をカットして200pxにすれば問題ないかと思います。
はてなで設定する
設定は簡単で、はてなのメニュー内の「デザイン」から変更できます。
ヘッダを選んで、先ほど作った画像をアップロード。
表示設定で「画像だけを表示」を選びます。
※画像とテキストを表示を選ぶと、せっかく作ったタイトルロゴの上にさらにブログタイトルが表示されてしまうので注意が必要です(・∀・)
これで完成！
・・・ですが、この状態だとPCではちゃんと見えるのにレスポンシヴタイプの場合携帯からだと一部しか見えない状態になってしまいます。
私はこちらの記事を参考に修正しました。
デザインCSSの設定一発なのですごく参考になりおススメです。
以上、理系かあさんでした。
しばらくはこちらのロゴで行きます('ω')ノ
