こんにちは！ブログを書いて1年で月収60万円突破したみのりんです。
THE THORの着せ替えデザインには、かっこよくロゴが配置されています。ロゴを設置することでブログのオリジナリティがでてきますし、カッコよいものを上手に配置するとユーザーの目を引きます。
THE THORのロゴの設置方法やロゴサイズについてお伝えします。
THE THORのロゴはどの位置にあるか
まず、THE THORのロゴの場所を確認しておきたいと思います。着せ替えのいくつかはロゴが設置してあります。マークとテキストの混合型で、色等は1色の超シンプルなもの。
出典：THE THOR
少し小さく見えますが、基本シックでシンプルなデザイン主流のTHE THORなので、さりげなく
THE THORのロゴの最適なサイズとは。
THE THORの着せ替えをWordpressにインストールすると画像も一緒に入れることができるんですが、それでサイズを調べてみるとそれぞれ微妙ではありますがサイズが違います。
- 着せ替え「01」・・・400 × 80px
- 着せ替え「02」・・・410 × 80px
- 着せ替え「04」・・・420 × 80px
横幅がほんの少しだけサイズが違っていますがほぼ同じ、高さについては80pxで問題ありません。ご自身で作る際には、このサイズを元にして作っていけばよいでしょう。
ただ、THE THORの場合には凝った画像にすると小さく見えるのでロゴの画像の調整は必要です。
THE THORのロゴの設置方法
ちょっと見た目の良いロゴの作り方や簡単な発注の仕方を後の章で説明しますが、まずは、THE THORのロゴの設定方法をお伝えします。ロゴの画像があれば結構簡単に設置可能です。
ロゴを選択し反映させます。
画像を変更する場合には「画像を変更」をクリックして画像を選びなおしてください。
THE THORのロゴの高さ調整
同じ場所で、スマホとPC使用時のロゴの高さの調整ができます。
スマホでの高さ調整幅
スマホでのロゴの表示は20px～40pxまでの幅があります。コントロールでスマホ表示例が選択できますので、それを見ながら大きさを調整してみてください。
- 20px（デフォルト）
- 25px
- 30px
- 35px
- 40px
PCでの高さ調整幅
画像を選択したらそのままでも問題ありませんが、ヘッダーのバランスをとるためにロゴの高さの調節をすることもできます。見た感じ小さいなと感じたらpx数を上げていけば大きく見やすくなります。
- 30px（デフォルト）
- 40px
- 50px
- 60px
- 70px
PCの高さは、更新して実際のサイズを見ないとわからないので大きさを見ながら調整してください。
THE THORのロゴの位置変更
THE THORではヘッダーの大きさを変更するにあたって、ロゴの位置が変わります。全体的にヘッダー部分を低くしてロゴを左側に寄せる方法も併せてお伝えします。
ヘッダーのダイナミックサイズ
「ヘッダーのレイアウトを選択」をダイナミックに変更をし公開をクリック。
ダイナミックにするとロゴがグロバールメニューの上に配置されます。
ヘッダーのシンプルサイズ
シンプルにするとグローバルメニューの左側にロゴが配置されます。（PCメニューで高さを上げすぎるとここで収まらないので調整してください）
THE THORに使うロゴの作り方
ロゴを作る方法として、プロにお願いする方法もしくは自分で作る方法がありますし自分で作ってしまう方法もあります。画像等をダウンロードしたりすることが苦にならないなら自分で作っても良いでしょう。
- 自分で作る・・・CANVAで作成
- プロに頼む・・・クラウドワークスやココナラ
自分で作るにしろプロに頼むにしろどちらもハードルが高いと思いますので、この章で少しやり方の説明をします。
1. 自分でロゴを作る
簡単なものならペイントでも可能です。今回はCANVAというツールの使い方をお伝えします。CANVAではカスタムサイズといって自分の好きな大きさの画像を作ることができるので活用してみてください。
⇒ CANVA
メルアドとパスワードで簡単に登録できます。ブログのアイキャッチにも使えるので登録しておくと重宝します。
ロゴの画像をダウンロード
ロゴのテキストだけなら少し寂しいと感じる場合にはアイコンなどを追加すればよいでしょう。以下のようなアイコンサイトをうまく利用すれば使いやすいです。
icooon monoのサイトで好きな絵柄を選びます。
イラストを開くと、色の調整ができるようになっていますので、ここで調整し「PNG」でダウンロードします。
CANVAでのロゴ作成
まずはCANVAの右上にあるカスタムサイズをクリックすると以下のようなサイズを聞いてきますので入力します。
カスタムサイズで幅400、高さ80と入力して新しいデザインを作成のボタンをクリック。
すると、ジャストサイズのエディター画面が出てきます。
左側のテンプレートを利用しても良いのですが、今回はシャドーのアイコンと文字のみで構成します。
先ほど、ダウンロードしたアイコンを取りこみます。左の部分にアップロードとありますのでそちらをクリックし画像を取り込んでください。画像部分をクリックすると右に反映されます。
画像を高さいっぱいに広げ次にテキストを入力します。
左側のテキストをクリックすると文字例が出てきますのでどれかをクリックします。すると、テキストが現れますので、こちらも拡大して好きな文字を入れてください。
次にテキストのフォントを変更します。無料でもかなり使えるものが多いので、クリックして雰囲気をみていきます。（王冠マークは有料なので使えません）
フォントの変更ができたら最後に色の調整です。テキストマークをクリックすると左にカラーパレットが出てきますので自分の好きな色を設定します。
出来上がれば、ダウンロードをします。
2. プロに頼む
もし、ロゴが作れないと思ったら得意な人に作ってもらうという方法もあります。ネット上で仕事をしている人が多いので頼んでみるのも良い経験になるでしょう。
- クラウドワークス
- ランサーズ
- シュフティー
クラウドソーシングのサイトとして上記3つは有名ですが、仕事をお願いする場合、いちから「募集」をかけることになるのでハードルが高いです。
そこで、単発で手軽にお願いできるのがココナラです。
⇒ ココナラ
ここでは、お仕事をする人が「こんなことできます」と投稿してあるので自分の好みのイラストを描いている人にココナラ内で仕事を依頼すればOK。ロゴで検索するとかなりの数がヒットします。
金額はピンキリですが、ブログのロゴなら1件1500円～くらいで作ってくれそうです。
実際、私も「説明文章」をお願いしたことがありますが、すでにサンプルを見てからの依頼になるのでとてもスムーズにいきますし使った人の評価などもあるので安心してお願いできました。
