MENU
  • プロフィール
  • 無料相談
  • サービス
    • オンライン自習講座
    • 単発レッスン
    • HP作成5回レッスン
  • 実績・お客さまの声
  • ブログ
  • お問合せ

    カテゴリー

    • WordPress
    • ブログ・SNS運営
    • 便利ツール
    • お知らせ
    • 活動実績・ご感想
    • プログラミング

    タグ

    ChatGPTHTML/CSSinstagramSEOSWELLWPプラグインアメブロエックスサーバーセキュリティデザイン見本初回無料相談制作実績単発レッスン技術ブログへ移動継続レッスン

    アーカイブ

    • 2025年10月
    • 2025年9月
    • 2025年8月
    • 2025年7月
    • 2025年6月
    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年9月
    • 2017年7月
    やりたいことを、自分で育てるWebの場所
    EmiのWebノート
    • プロフィール
    • 無料相談
    • サービス
      • オンライン自習講座
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    EmiのWebノート
    • プロフィール
    • 無料相談
    • サービス
      • オンライン自習講座
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    1. ホーム
    2. ブログ・SNS運営
    3. 大人かわいいブログヘッダーの作り方

    大人かわいいブログヘッダーの作り方

    2025 10/03
    ブログ・SNS運営
    2022-11-092025-10-03

    ヘッダーは、ブログやSNSを表示させた時にまず一番上に表示される大きな画像のこと。

    そのアカウントの目印にもなる部分です。

    プロに頼むほどではないけれど、自分でもおしゃれなヘッダーがほしい!という方のために、簡単&無料でできるヘッダー画像の作り方をご紹介します。

    目次

    Step1. ヘッダー画像のサイズを確認しよう

    ブログサービス、SNSによって、ヘッダー画像のサイズが違います。

    まずは作りたい画像のサイズを確認しておきましょう。

    サービス横幅縦幅
    アメブロ1120px300px~400px
    ライブドアブログテーマによって変わる
    900px以上が多い
    テーマによって変わる
    300px~400px
    はてなブログ(PC)1000px
    (スマホ)350px
    (PC)200px
    (スマホ)200px
    note1,920px1,006px
    ツイッター1,500px500px
    Youtube2,560px1,440px
    Facebook(PC)820px
    (スマホ)640px
    (PC)312px
    (スマホ)360px
    ブログ・SNSのヘッダー画像サイズ

    WordPressは各テーマによって推奨サイズが変わってくるので、お使いのテーマの公式HPをご確認ください。

    作る前に考えるといいこと

    • ヘッダーに載せる文字
    • 使う画像
    • 使いたい色

    ヘッダーに載せる文字

    ブログのタイトル、名前、キャッチコピーなどを入れておくと、印象に残りやすいです。

    使いたい画像を用意しよう

    ヘッダーの画像にいれる写真やロゴなどを用意しましょう。

    なくても、OKです。

    無料で高品質な写真サービス
    • Unsplash : たくさんの美しい写真が揃ってます
    • Girly Drop : 女の子っぽいかわいい写真はこちら

    動画でも紹介しています。

    色

    • 2〜3色に絞る
    • 画像で使われている色と揃えるとまとまりやすい

    無料のデザインツールCanvaを使ってヘッダー作成

    Canvaは無料でおしゃれな画像が使えるデザインツールです。

    さまざまなテンプレートをもとに、ヘッダー画像はもちろん、ブログのサムネイル、インスタなどSNSの画像など、ありとあらゆる画像をつくることができます。

    無料でも十分使えますので、「ヘッダー画像を自分で作りたいけど、どのデザインツールを使っていいかわからない?」というときには、一度使ってみてください。

    動画でもヘッダー作り方を解説しています。

    Canvaのアカウントを登録してログインします。

    STEP
    デザインを新規作成

    右上の「新しいデザインを作成」をクリックします。

    Canvaでヘッダー画像を作成

    作りたいヘッダー画像のサイズを指定します。

    Canvaでヘッダー画像を作成

    今回は、アメブロのヘッダーサイズ(幅1120px,高さ400px)で作っていきます。
    そのままのサイズだと、粗く表示されてしまうことがあるので、大きめの2倍サイズ(幅2240px,高さ800px)に設定しています。

    STEP
    使いたいテンプレートを選ぶ

    左側のテンプレートから好きなデザインを選びます。

    STEP
    文字や写真を入れる

    右側の作業用スペースで好きな写真に差し替えたり、文字や色を変更することができます。

    また、左側のメニューからイラストや写真を追加することもできます。(有料の画像には透かしがはいっているのでご注意ください!)

    Canvaでブログヘッダーを作成
    STEP
    画像が完成したらダウンロード

    右上の共有→ダウンロード→ファイル形式を選択→ダウンロード

    Canvaでブログヘッダーを作成
    Canvaでブログヘッダーを作成
    ブログヘッダーの例
    できあがり!

    簡単おしゃれにデザインするコツ

    楽におしゃれに見えるコツをご紹介します。

    縦横のど真ん中にタイトル

    画像の端は表示サイズによって見切れてしまうことがあります。

    文字は中央にいれると使いやすいです。

    タイトルは枠で囲んだり、薄い背景色を重ねると目立たせることができます。

    ヘッダーデザインのサンプル

    左右対象に並べる

    写真を等間隔に並べるのも作りやすくて、綺麗に見えるデザインです。

    ヘッダーデザインのサンプル

    余白のある写真を使う

    左右どちらかに大きく余白がある写真を用意し、空いた場所に文字を入れるのも綺麗に見えやすいデザインです。

    ヘッダーデザインのサンプル

    まとめ

    いかがでしたか?

    おしゃれなヘッダーができると、ブログやSNSのイメージがグッと変わりますので、ぜひお試しください♪

    ヘッダー画像をアメブロに設定する方法はこちら↓

    あわせて読みたい
    【動画で解説】アメブロヘッダー画像をカスタマイズ この記事では、オリジナルのヘッダー画像をアメブロに設定していく方法を解説しています。 before after 簡単に設定できますので、ぜひやってみてくださいね。 動画でも…
    ブログ・SNS運営
    アメブロ
    よかったらシェアしてね!
    中谷恵美
    東京在住のフリーランス。システムエンジニア、ITコンサルタントを経て、現在はホームページ・ブログ作成、集客などのレッスンをしています。

    趣味は、文房具、ゲーム。最近は英語学習中。運動が苦手で体が硬いのが悩み。最近、腰痛改善にピラティスを始めた。
    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      ブログ・SNS運営
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      ブログ・SNS運営
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      ブログ・SNS運営
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      ブログ・SNS運営
    • 大人かわいいブログヘッダーの作り方
      2022-11-09
      ブログ・SNS運営
    WordPressの始め方

    目次