MENU
  • 無料レッスンLesson
  • プロフィールprofile
  • サービスService
    • WordPress個人レッスン
    • 起業女性に寄りそうWEBお悩み相談
  • 実績・お客さまの声portfolio
  • ブログblog
  • お問合せcontact

    カテゴリー

    • ホームページ個別レッスン
    • Web・SNS集客
    • Web系プログラミング
    • WordPressプログラミング
    • フリーランスの小技
    • Web活用相談
    • はじめてのWordPress
    • アメブロカスタマイズ
    • ホームページ制作
    • 自分で作れるおしゃれデザイン
    • アイデア・思考の整理

    タグ

    Adobe IllustratorGatsby.jsgitGitHubHTML/CSSMySQLNode.jsPythonSourcetreeSWELLWordPressおすすめWPプラグインおすすめツールアメブロエックスサーバーサーチコンソールセキュリティバレットジャーナルライブドアブログ環境構築確定申告開発環境

    アーカイブ

    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 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年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPress・HP・ブログレッスン
    自分で作れる優しいホームページレッスン
    • 無料レッスンLesson
    • プロフィールprofile
    • サービスService
      • WordPress個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    自分で作れる優しいホームページレッスン
    • 無料レッスンLesson
    • プロフィールprofile
    • サービスService
      • WordPress個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    1. ホーム
    2. 自分で作れるおしゃれデザイン
    3. 大人かわいいブログヘッダーの作り方

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

    2022 11/07
    自分で作れるおしゃれデザイン
    2022-11-09

    ヘッダーは、ブログや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 簡単に設定できますので、ぜひやってみてくださいね。 動画でも…
    自分で作れるおしゃれデザイン
    アメブロ
    よかったらシェアしてね!
    中谷恵美
    あなたのお仕事を育てるホームページの先生
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    HP作成のほかにも、心理カウンセラーとしても活動中。

    趣味は、文房具集め、ゲーム(牧場系とモンハン)、手芸(刺繍、洋裁)。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にジムに通い始めたが、果たして続くのか。。。
    詳しいプロフィールを見る

    メルマガバナー

    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・美容サロン・弁護士・デザイナー・心理カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

    新着記事
    • 【お客様の声】ゴールが明確になり、とても安心できました
      2025-03-13
      Web・SNS集客
    • 【お客様の声】WordPressには自由度の高さを感じます
      2025-01-21
      ホームページ個別レッスン
    • WordPressに記事を一括アップロードするには
      2024-12-05
      はじめてのWordPress
    • 【お客様の声】等身大のちょっと先を提案してもらえた
      2024-03-08
      ホームページ個別レッスン
    • 【お客様の声】寄り添ってもらえたっていうのが一番心強かった
      2023-07-21
      ホームページ個別レッスン
    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      WordPressプログラミング
    • 【Mac】SourcetreeからGitHubへSSH接続する
      2021-08-05
      Web系プログラミング
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      アメブロカスタマイズ
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      アメブロカスタマイズ
    • Node.js+ExpressでMySQLに接続して一覧表示する
      2020-04-25
      Web系プログラミング
    目次