ブログ運営

JINのロゴやヘッダーを自分好みに設定する方法【個性を出そう!】

JIN ロゴ ヘッダー画像 設定
悩む初心者ブロガー
悩む初心者ブロガー
JINのロゴやヘッダーを設定したいけど、公式サイトだけでイマイチ理解できないな。

実際に設定しているサイトをみて、確認してみたい。

また、おすすめの絵師がいたら紹介してほしい。

 

こういった初心者ブロガーの悩みについてお答えしていきます。

 

この記事を読むことで、下記のことが理解できます。

・ロゴやヘッダーを設定する方法が分かる

・ロゴやヘッダーを理想のデザインにすることができる

・素敵な絵師さんとの出会いがある

 

その理由は以下の通りで先日にこのようなツイートしています。

 

私がイラスト作成をお願いしたえどまゆさん(@edmayu_ge)のツイートはこちら。

 

上記のように、私はWordPressテーマ『JIN』のロゴとアイコン作成の依頼しています。

そして、以下の通りロゴとアイコンが納品されました。

 

ロゴ画像

 

 

とても素敵なロゴとアイコンを作成して貰うことができました!

 

どーの先生
どーの先生
どれもイメージ通りの素晴らしい作品です。

 

また僕は、『JIN』の使用歴が1年6ヶ月あり、初心者ブロガーよりも設定については詳しいので、ある程度信頼できると思います。

 

では早速、本題に入っていきます。

 

JINのロゴとヘッダー画像の設定方法

ロゴやヘッダー画像の設定方法

まずは、JINのロゴとヘッダー画像設定の設定方法についてみていきます。

 

ロゴ

JINのロゴ設定は、「ダッシュボード」→「外観」→「カスタマイズ」→「ヘッダー設定」から設定をすることができます。

 

ヘッダー設定

 

自分が設定したいサイトロゴを選んで、画像を挿入することで反映されます。

 

反映前のサイト
ロゴ画像 反映前

 

反映後のサイト
ロゴ画像 反映後

 

どーの先生
どーの先生
見比べると分かるとおり、ロゴ画像が反映されている方が読者を惹きつける感じがしませんか?

 

ちなみに当ブログのロゴ画像は、800×200pxで作成しています。

理由は、文字化けしないのとスマホ画面でも綺麗に反映されるからです!

 

ヘッダー

ヘッダー画像は、「ダッシュボード」→「外観」→「カスタマイズ」→「ヘッダー画像設定」から設定をすることができます。

 

ヘッダー画像設定

 

自分が設定したいヘッダー画像を選んで挿入することで、画像が反映されます。

 

ヘッダー反映前のサイト

 

ヘッダー反映後のサイト

 

ヘッダー画像を持っていないので、サンプルになり申し訳ないですがこのような感じ。

しっかりイラストされたヘッダー画像ですと、サイトの質をかなり上げてくれますよ!

 

また、JINマニュアルでも紹介されているとおり、ヘッダー画像は幅2400px以上で作成すると綺麗に反映されます。

 

どーの先生
どーの先生
高さは特に決まっていないです。

 

ヘッダー画像を設定するときは、スマホ用の画像設定も必要ですのでお忘れ無く。

「ヘッダー画像設定」の下部に【スマホ用】ヘッダー画像という部分がありますので、そこから設定しましょう。

 

 

以上が、JINのロゴとヘッダー画像の設定方法になります。

 

悩む初心者ブロガー
悩む初心者ブロガー
JINのロゴやヘッダー画像の設定方法を聞いたけど、ロゴとかヘッダー画像についてイマイチ理解できていない・・・。

 

こういった初心者ブロガーのためにさらに分かりやすく解説していきます。

 

JINのロゴって何?

JINのロゴとは、サイトの上部に表示されるサイトタイトル部分のことを言います。

ロゴを設定することで、サイトの独自性が生まれます。

 

ロゴ画像 設定サイト

 

ロゴ画像 サイト出典:hitodeblog

 

上記で紹介しているサイトもロゴを設定しており、サイト訪問者の印象に残るようにしています。

 

JINのヘッダー画像って何?

JINのヘッダー画像とは、ピックアップコンテンツの下に表示される大きな画像のことです。

とても大きな画像で、サイトの顔と言ってもいいでしょう。

 

※デザインによっては、ピックアップコンテンツの下に来ない場合もあります。

ヘッダー画像設定

 

ロゴをシンプルにして、ヘッダー画像を強調するのもステキです。

ちなみにこのサイトでは、ロゴデザインがお洒落なのであえてヘッダー画像を設定していません。

 

どーの先生
どーの先生
設定は個人のセンスになりますので、お好みでどうぞ。

 

JINのロゴとヘッダー画像をパターン別に解説

JINにはロゴやヘッダー画像のテンプレート設定が11種類あります。

どれも素敵なデザインなので、自分の好きなテンプレートを選んで設定してみて下さい。

 

「ダッシュボード」→「外観」→「カスタマイズ」→「サイトデザイン設定」から確認することができます。

 

JIN サイトデザイン設定

 

JINのサイトデザイン【スタイル1】

ロゴ画像が左寄りになり、グローバルナビゲーションがなくなるシンプルなデザイン。

SNSボタンが多い方やシンプルな左寄りのデザインが好きな方は、スタイル1がおすすめ!

 

JINサイトデザインスタイル1

 

どーの先生
どーの先生
公開ボタンを押さなければ、デモとして試すことができますよ!

 

JINのサイトデザイン【スタイル2】

ロゴ画像の下にヘッダー画像が表示されるパターンです。

イラストで読者の目を釘付けにすることができて、インパクトもあります!

 

JINサイトデザインスタイル2

 

どーの先生
どーの先生
グローバルナビゲーションは消えてしまうのでご注意下さい。

 

JINのサイトデザイン【スタイル3】

このサイトで使用しているシンプルなデザイン。

JINを使用している人は、このデザインが多い印象です。

 

JINサイトデザインスタイル3

 

どーの先生
どーの先生
初心者にとって親しみやすいデザインの1つですね!

 

JINのサイトデザイン【スタイル4】

こちらもスタイル3と同様に王道で、よく見かけるデザインになっています。

ロゴ、グローバルナビゲーション、ヘッダー画像とバランスよく配置されています。

 

JINサイトデザインスタイル4

 

どーの先生
どーの先生
素敵なロゴやヘッダー画像を使いたいブロガーは、このデザインをどうぞ!

 

JINのサイトデザイン【スタイル5】

スタイル4のグローバルナビゲーションとヘッダー画像が移動した形。

お好きな方をお選び下さい。

 

JINサイトデザインスタイル5

 

どーの先生
どーの先生
ロゴやヘッダー画像の背景色を合わせないとダサいかもしれません。

 

JINのサイトデザイン【スタイル6】

こちらはグローバルナビゲーションが1番上に表示されるデザインです。

ロゴとピックアップコンテンツとの壁がなくなり、良い感じになっていますね。

 

JINサイトデザインスタイル6

 

どーの先生
どーの先生
ロゴを強調したいサイトにおすすめです!

 

JINのサイトデザイン【スタイル7】

スタイル6にヘッダー画像が表示されるパターンです。

ロゴとヘッダー画像が強調されるデザインになっています。

 

JINサイトデザインスタイル7

 

どーの先生
どーの先生
ロゴもヘッダー画像も両方ともアピールしたいと言うブロガーにおすすめ!

 

JINのサイトデザイン【スタイル8】

ロゴデザインがなくなるパターンです。

ヘッダー画像にサイト名を入れていると、読者に覚えて貰いやすそうです。

 

JINサイトデザインスタイル8

 

どーの先生
どーの先生
お気に入りのヘッダー画像があるブロガーにおすすめ!

 

JINのサイトデザイン【スタイル9】

ロゴがなくなり、ヘッダー画像が最上部に表示されるパターンです。

ヘッダー画像を最大限に活かすことができますね。

 

JINサイトデザインスタイル9

 

どーの先生
どーの先生
僕のロゴも大きくしていれば、このデザインを選べたかも・・・?笑

 

JINのサイトデザイン【スタイル10】

グローバルナビゲーションがロゴで隠れてしまいました。

カスタマイズ次第では、とても素敵なデザインを作れそうです。

 

JINサイトデザインスタイル10

 

どーの先生
どーの先生
僕には設定方法が分かりません・・・。笑

 

JINのサイトデザイン【スタイル11】

グローバルナビゲーションがなくなり、ロゴが浮き出るようなデザインになりました。

ロゴが強調されるデザインになっていますね。

 

JINサイトデザインスタイル11

 

どーの先生
どーの先生
絵師さんがとても喜びそう♪

 

こんな感じで、自分の好きなJINのデザインを楽しんでみて下さい。

 

JINのロゴやヘッダー画像を設定で気を付けたいこと4選

ロゴやヘッダー画像の設定で気を付けること

JINのロゴやヘッダー画像を設定するときに気を付けたいことを紹介します。

 

・ヘッダー全体の表示設定を確認

・サイトロゴのaltタグ設定をする

・画像のサイズを調整する

・スマホでロゴやヘッダー画像が表示されているか確認する

 

1つずつ解説していきます。

 

ヘッダー全体の表示設定の確認

ヘッダー設定

ヘッダー設定の「ヘッダー全体の表示選択」と言う場所の表示・非表示を確認しましょう。

ここが非表示になっていると、ロゴもヘッダー画像も表示されません。

 

どーの先生
どーの先生
ロゴやヘッダー画像を表示したいときは、必ず表示にチェックを入れておきましょう。

 

サイトロゴのaltタグ設定をする

サイトロゴのaltタグ設定

サイトのロゴは画像であるため、Googleがロゴ画像の意味を理解することができません。

そこでサイトロゴに名前を付けてあげる必要があります。

そうすることで、Googleがロゴ画像の意味を理解してくれるようになります。

ヘッダー設定の「サイトロゴのaltタグ設定」で設定しましょう。

 

どーの先生
どーの先生
ロゴの文字やサイトの名前を入れると良いと思います。

 

画像のサイズを調整する

ロゴとフレーズの文字サイズ調整

ロゴ画像やヘッダー画像は、サイトで微調整することができます。

ロゴの場合は、ヘッダー設定の「ロゴとフレーズの文字サイズ調整」で、ヘッダーの場合は、ヘッダー画像設定の「ヘッダー画像のテキスト位置調整」で行うことができます。

 

とは言っても、画像を大きくしたり小さくすることなるので、画像の文字がぼやけたりイラストが汚くなってしまいます

 

どーの先生
どーの先生
僕の場合は絵師さんに書いて貰っているので、それが嫌でした。

素敵なデザインなので、綺麗なまま表示したいですよね。

 

その場合は、画像を最初から適切なサイズで挿入する必要があります。

僕のロゴの場合は、800×200pxで綺麗に表示されました。

 

合わせてロゴの場合、ヘッダー設定の「ロゴとフレーズの文字サイズ調整」を空白にすることでロゴ画像を最大限に活かすことができます。

またヘッダー画像も同様に、ヘッダー画像設定の「ヘッダー画像のテキスト位置調整」を空白にすることで設定することができます。

 

スマホでロゴやヘッダー画像が表示されているか確認する

設定ができたら【公開ボタン】を押して、スマホで自分のサイトにアクセスしてみましょう。

パソコンでは綺麗に表示されていても、スマホでは綺麗に表示されていない場合があります。

 

どーの先生
どーの先生
僕のサイトのロゴも600×200pxでは、スマホサイトに不備がありました。

確認作業はマジでおすすめ!

 

JINのロゴやヘッダー画像を作成する方法

『JIN』ロゴやヘッダー画像の作成方法

ここまでの話を聞いて、ロゴやヘッダー画像を持っているブロガーは早速作業に取りかかりましょう。

 

しかし、JINのロゴやヘッダー画像の作成がまだ済んでいないブロガーはここからが本番です。

次はロゴやヘッダー画像を作成する方法をお伝えします。

 

ロゴやヘッダー画像を作成する方法は大きく分けて2つあります。

・自分でロゴやヘッダー画像を作成する方法

・ロゴやヘッダー画像のデザインを依頼する方法

 

パソコン操作やデザインが苦手な人は、他の人に依頼することをおすすめします。

サイトの仕上がりが段違いに違います。

 

どーの先生
どーの先生
僕も何度か自分で作成を試みましたが、うまくできなくて諦めました。笑

微調整とかも難しいですからね。

 

自分でロゴやヘッダー画像を作成する方法

色々な人が紹介しているので簡単に説明。

画像編集アプリを使うことで、自分で作成することができます。

 

・無料で作成するなら『CANVA』

・有料で作成するなら『Adobe Illustrator CC

 

このあたりが有名ですね。

 

費用をかけることなく作成することができますが、他のサイトとデザインが似ていたり、デザインを真似ると著作権の問題に触れる可能性があります。

 

どーの先生
どーの先生
僕はどちらも使いこなせないしトラブルは嫌なので、絵師さんにお願いする方法を選んでいます。

 

ロゴやヘッダー画像のデザインを依頼する方法

ロゴやヘッダー画像の作成に時間をかけたくない場合は、絵師さんに作成依頼する方法がおすすめ!です。

自分で作成するよりもクオリティーの高い作品を作ってくれます。

 

どーの先生
どーの先生
またロゴやヘッダー画像だけでなく、ブログのアイコンやTwitterのアイコンなども作成してくれますよ。

 

悩む初心者ブロガー
悩む初心者ブロガー
悩みじゃあ、どこで依頼するの?

 

こう言った悩みは、ココナラで解決することができます!

色々な絵師さんの過去作品を見比べながら、自分好みのイラストを作成してくれる絵師さんを見つけましょう。

 

どーの先生
どーの先生
自分好みのイラストを作成して貰うことで愛着が湧き、ブログ活動の励みになりますよ♪

 

無料会員登録はこちら

 

僕が使っているアイコンやロゴのデザインでイラストを作成したいのであれば、

・有無。さん(@__uuumu

・えどまゆさん(@edmayu_ge

 

上記2名の絵師さんに依頼してみてはいかがでしょうか?

依頼主の要望を細かく聞いて、親身に対応してくれますよ。

 

有無。(@__uuumu)さんの作成イラスト↓

作成イラスト

 

どーの先生
どーの先生
詳細ページにつきましては、下記のボタンをクリックすることで飛ぶことができます!

 

イラスト詳細ページ

 

 

えどまゆ(@edmayu_ge)さんの作成イラストはこちら↓

えどまゆ 作成イラスト えどまゆ 作成イラスト

 

どーの先生
どーの先生
詳細ページにつきましては、下記のボタンをクリックすることで確認することができます!

 

イラスト詳細ページ

 

どーの先生
どーの先生
自分のサイトの特徴を活かしたロゴやヘッダー画像、アイコンは読者の心を惹きつけますよ♪

 

JINのロゴやヘッダー画像を自分好みに設定しよう!

JIN ロゴ ヘッダー画像 デザイン

この記事では、JINのロゴやヘッダー設定の設定方法とロゴやヘッダー画像の作成方法について見てきました。

内容をまとめると以下の通りです。

 

JINのロゴやヘッダー設定をする手順

・11種類あるJINのテンプレートから好きなデザインを選ぶ

・ヘッダー全体の表示設定を確認する

・画像のサイズを調整する

・サイトロゴのaltタグ設定をする

・スマホでロゴやヘッダー画像が表示されているのか確認する

 

ロゴやヘッダー画像、アイコン作成方法についてもまとめます。

 

JINのロゴやヘッダー画像の作成

・自分でロゴやヘッダー画像を作成する方法

・ロゴやヘッダー画像のデザインを依頼する方法

 

パソコン操作やデザインが苦手なブロガーは、デザインを依頼した方が納得できるイラスト作成することができます。

 

僕が使っているロゴやアイコンのイメージに近いものを作成したい場合は、

・有無。さん(@__uuumu

・えどまゆさん(@edmayu_ge

 

お問い合わせ下さい。

 

どーの先生
どーの先生
素敵な絵師さんで、親身に対応してくれますよ!

 

もしイメージと違ったら、ココナラで絵師さんを探してみて下さいね♪

 

ココナラ

 

以上、JINのロゴやヘッダー画像の設定方法でした。

 

ABOUT ME
どーの先生
どーの先生
現役保育士です。保育士として働きながら、保育士の役立つ情報をブログで発信しています。保育士歴は4年目でして、新卒採用担当・新卒研修担当も担っております。『どーの先生の保育士ブログ』を読めば、保育士のすべてが分かる。そんなブログを目指しています。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です