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

 

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

 

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

 

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

ブログのロゴ・アイコンをえどまゆさん（@edmayu_ge）
に作成して貰いました！

アイコンは、他にも合計で12枚の表情があってとても可愛いです！！

素敵なイラストをありがとうございました♪

とても相談しやすくて、こちらの要望をたくさん聞いてくれますよ！

イラスト作成は、えどまゆさんへ！ pic.twitter.com/5n8U3kI6wy

— どーの先生@保育士 (@do_nosensei) June 22, 2020

 

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

【ブログのロゴ＆表情アイコンset】

保育士さんのお役立ち情報を発信している
どーの先生@保育士さん（@do_nosensei）
からのご依頼イラスト😍

ブログ用に、ロゴと表情アイコンのセットを描かせていただきました！

保育士さんの転職情報や現場のリアルを知りたい方
フォロー必須ですよ😉✨ pic.twitter.com/MPxvTS28Dt

— えどまゆ🎨ゆるかわ絵師☕️おうちカフェ (@edmayu_ge) June 22, 2020

 

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

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

 

 

 

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

 

 

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

 

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

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

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

 

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

 

 

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

 

 

 

 

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

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

 

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

 

 

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

 

 

 

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

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

 

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

 

 

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

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

 

 

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

 

 

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

JINのロゴって何？

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

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

 

 

出典：hitodeblog

 

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

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

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

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

 

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

 

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

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

 

 

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

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

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

 

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

 

 

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

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

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

 

 

 

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

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

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

 

 

 

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

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

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

 

 

 

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

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

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

 

 

 

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

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

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

 

 

 

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

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

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

 

 

 

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

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

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

 

 

 

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

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

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

 

 

 

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

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

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

 

 

 

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

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

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

 

 

 

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

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

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

 

 

 

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

 

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

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

 

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

 

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

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

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

 

 

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

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

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

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

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

 

 

画像のサイズを調整する

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

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

 

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

 

 

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

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

 

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

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

 

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

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

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

 

 

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

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

 

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

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

 

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

 

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

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

 

 

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

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

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

 

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

 

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

 

 

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

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

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

 

 

 

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

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

 

 

無料会員登録はこちら

 

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

 

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

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

 

有無。（＠__uuumu）さんの作成イラスト↓

 

 

えどまゆ（＠edmayu_ge）さんの作成イラストはこちら↓

 

 

イラスト詳細ページ

 

 

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

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

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

 

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

 

 

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

 

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

 

お問い合わせ下さい。

 

 

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

 

ココナラ

 

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