ぴよすけがブログカスタマイズで一番こだわりたかったのは…タイトルロゴ！
自分だけのオリジナルブログですから、当然オリジナルのタイトルロゴがほしい！と思いました。
でもハードル高そう…いえいえそんなことはありません！
ぴよすけでも作れました！
素人でも簡単に作れて、デザインにこだわったロゴ作成にぴよすけが挑みました！
この記事では３つのステップでタイトルロゴ作成について説明しています。
Step１ タイトルロゴ横のイラスト作成
Step２ ロゴのフォントをデザイン
Step３ ヘッダー高をカスタマイズ
最後まで読めば、THE THOR導入時のデフォルトから現在の状態になるまでが明らかになります。
同じようにヘッダーロゴを変えたいとお悩みの方はぜひご覧ください。
手順を踏めば同じようなカスタマイズが出来ますよ！
テーマ導入時の初期デザイン
ブログ開設時にはこんな感じで味気ないタイトルでした。（以下は公式ページのデモサイト②の画像）
ぴよすけは「タイトルロゴ＝サイトの顔」であると思っているため、一刻も早くカスタマイズしたかった箇所でした。
いよいよタイトルロゴを変えるまでの流れの紹介です。
１ イラストの依頼
ぴよすけはブログ開設にあたりタイトルロゴ横にイラストを添えたいと思っていたので、お仕事依頼サイト「ココナラ」でイラストを依頼しました。
今回はココナラでブログ用イラストを探してみました。
「イラスト ブログ用」や「アイコン イラスト」などで検索すると、数多くのイラストレーターさんの情報が出てきます。
ぴよすけは可愛らしいキツネのイラストがほしかったので、「イラスト 動物」などで検索しました。
探すこと１時間…
数多くのイラストレーターさんの中から今回ぴよすけがお願いしたのが「つちのこり(@Tsuchinocory)」さんでした。
さっそく依頼を、と思いましたが…
ぴよすけはココナラの初心者なので、出品者であるつちのこりさんに直接DMをし、使用目的などの簡単なやり取りから始めました。
次に見積もりをしてもらうため、希望のデザイン（雰囲気や構図など）のDMをしました。
・全身が見えるように！
・雰囲気としては「和」もしくは「神社」をイメージする感じで！
→鈴や組紐、プロフィール画像にあるような花（たとえば彼岸花など）がアクセントであるといい！
自分でもかなり無茶なお願いをしているような気がしましたが、依頼する際にはこちらのイメージをきちんと伝えることが大切だと思いました。
すると、数時間後につちのこりさんからラフ案が２つ送られてきました。
おおぉぉ！！！素晴らしい！！
この２つの画像の違いは、羽織の有無と、色の違い（こげ茶色があるかないか）という案でした。
いつもは色がない状態でのラフ案らしいのですが、今回はぴよすけが色の指定をしていたため、イメージがわきやすいようにとの配慮してくださったそうです。
ここまで素人のイメージを具現化してくれるとは…さすがプロは違います。
さっそく見積もりを購入。
今回はこげ茶のラフ案を３０００円で依頼しました。
依頼から２日後、線画が完成ということで以下の画像が送られてきました。
修正の有無の確認など何度かやりとりを繰り返し、６日後に出来上がった作品がこちら。
見事な出来栄えです！！！
こんなにも綺麗に仕上げていただき、これだけで満足してしまいました。
タイトルロゴ横に設置するだけはもったいないくらい！
今回は依頼から完成までは５日ほどでした。
納期まで７日（予定）とあったので、多少前後する場合もあるみたいです。
今回最終的に納品されたのはPNG形式（背景色が透明なデータファイル）です。
JPEG形式では背景色が固定されてしまいます。
※もしJPEG形式のデータで背景色を透明にしたい場合、次の「画像透過処理」で変更できます。
素敵なイラストを提供いただいたつちのこりさん、ありがとうございました。
２ タイトルテキストデザインを考える
イラストが出来上がりご満悦のぴよすけが次に取り掛かったのはタイトルテキストのデザインです。
「ぴよぴよメディア文学概論」という文字を以下の２つのサイトでデザインします。
「フリーフォントで簡単ロゴ作成」で文字をデザイン
フリーフォントで簡単ロゴ作成では、自分でフォントや色などを変更し、好きなデザインに仕上げることができます。
まずは画像の赤枠の中に文字を入れて右下の変更をクリック。
これで準備OKです。
文字が入った状態で赤丸で囲った部分をいじると色の調整やフォントの調整ができます。
気に入ったデザインになったら中央にある「ダウンロード」をクリックして画像を保存します。
そして完成したのがこちら。
↑こんな感じで出来上がります。
ちなみに…当ブログの「ぴよぴよ」の部分は別のフォントで作りました。
「ぴよぴよ」「メディア文学概論」「キツネのイラスト」をWindowsのペイントで、一つの画像にして保存しました。
オンラインサイトで画像の透過処理
そのまま使うと背景色が違うため、モロにタイトル画像はめ込んだ的な絵面になってしまいます。笑
そこで画像の背景を透明にする透過処理をします。
「バナー工房」さんや「PEKO STEP」さんがオンラインによるフリー透過ツールを公開しています。
今回は「PEKO STEP」さんの透過PNG画像作成ツールで行いました。
中央の「ここに画像をドロップしてください」に処理をしたい画像をドロップします。
透過したい部分（この画像では白色）をクリック。
背景が見事に消えております。
このようになると、はめ込んでも背景色＋タイトルロゴが自然な状態になります。
３ ヘッダーの高さを変える
導入時のデフォルトスタイルは、タイトルロゴが小さいと感じていました。
実際、ここまで作業したものを当てはめるとこんな感じになってしまいます。
タイトルちっさ…！！
これでは何も見えないですし、サイトの顔としての機能が失われた状態です。
繰り返し個人的な考えで恐縮ですが、タイトルというのはサイトの顔であり、皆様の目に多く触れるものだと思っています。
もっと「ババーン！」と効果音が付くくらいのインパクトが欲しいと思いながらロゴ作成したのですが…
なんと「THE THOR」の中の設定変更ではこれが性能の限界だそうです。
ヘッダーの高さを変えるカスタマイズ設定はあったのですが、これより大きくならないということが判明しました。
ここで選べるのは50pxまでで、それ以上は選択肢がそもそもありませんでした…
（ ＾ω＾）…
私、納得できなくていろいろヘッダーの高さを変える方法を探しました。
Webの知識もたいしてないぴよすけが簡単にヘッダーの高さを変えられる方法を…
するとありました！
しかも使用テーマが同じ「THE THOR」のユーザーであるネイネイさんがヘッダーを改造しておりました。
ネイネイさんのブログはヘッダーの高さが私のデフォルトサイズより高くなっており、しかもご丁寧にヘッダー高を変えるための記事まで書いておられました。
詳しくはこちらからネイネイさんの記事をご参考ください。
この記事では、WordPressテーマ『THE THOR（ザ・トール）』のロゴ画像の大きさをカスタマイズする方法のご紹介…
わずかな設定とCSSのコピペでヘッダーの高さが変わりました！
ちなみに当サイトではネイネイさんのブログより30pxほど高くしてあります。
タイトルロゴは誰でも作れる！
つちのこりさんのイラストが完成したのち、タイトルロゴを自作するのに半日以上を費やしました。
しかし、時間をかけた分だけ愛着もまた湧きます。（単に要領がよくないだけ）
そして初心者の方でも、気に入るまで何度でもやり直しながら作成することがわかりました。
ブログを運営されている方はサイトの一国一城の主としてオリジナリティーあるカスタマイズをしたいものですね。
「THE THOR」の記事も検索をすればいろいろと情報が出るようになりましたので、この記事もお困りの方の助けになればと思います。
最後までお読みいただきありがとうございました。
↓↓↓クリックしていただくとぴよすけが泣いて喜びます。