初心者必見！アメブロカスタマイズでオリジナルのヘッダー画像にする方法

アメブロを始めると他の人のアメーバブログも読むようになりますよね。

そして、『あの人の素敵なブログデザインって何？』

私もやれるのかな…

• アメブロのデザインを変えてみたい
• アメブロカスタマイズを自分で出来るのかな？
• オリジナル性を出したい

と、考えている方向けに、自分で出来るアメブロカスタマイズでオリジナルヘッダー画像に変更する方法ご紹介します。

CSSを使わない【特にパソコン操作が苦手、初心者の方にも簡単】な方法もあります！

今回は、一緒にアメブロカスタマイズのメリットとデメリットもお伝えします。

すぐに、アメブロカスタマイズの手順やテクニックだけ知りたい！という方は目次の「4、アメブロのデザイン変更方法」以降から進めてみてくださいね。

では、さっそくいってみましょう〜＾＾

※パソコンでの操作での解説になります。

アメブロカスタマイズって何？

アメブロカスタマイズとは、アメーバブログを読者さんにブログを読んでもらう時に「見やすい」「分かりやすい」ようにブログを変更できる作業のことです。

アメブロカスタマイズできることの例

アメブロカスタマイズをすると様々なことができます。

例えば、

1. オリジナルのヘッダー画像にして、来て欲しいお客様にアピールする
2. ホームページのようにメニュバーをつけて分かりやすくする
3. メッセージボードに商品やサービスの案内を入れる

など、他にもたくさんのことができます。

アメブロカスタマイズのメリット

アメブロカスタマイズのメリットは大きく２つです。

ホームページのように見やすく分かりやすくできるアメブロカスタマイズ

ブログを読んでいるみなさん、こんな経験ありませんか？

• 何度も読んでいるブログ、「あの以前読んだ記事って、どこにあるかな？』と、見つけるのに苦労した
• このブログのサービスを受けてみたいけど、サービスメニューがどこにあるか分からない
• お問い合わせをしたいけど、どこからお問い合わせをすれば良いか分からない

そうなんです！

ブログって、どこに何の記事があるか？って分かりにくいんですよね。

それを、アメブロカスタマイズすることによって整えることができます。

第一印象で来て欲しいお客さまに読まれるブログになる

ブログに訪れた読者さんは、このブログを読もうか？それとも読まないか？を最初の３秒〜５秒の間で決めていると言われています。

めちゃくちゃ第一印象が大切です。

特にヘッダーは、あなたの理想のお客様となる読者さんに【専門性】や【ブログのコンセプト】をパッと伝えることができます。

そうすると、理想のお客様となる読者さんにブログを読んでもらえるので、濃いファン作りになったり、ブランド作りができるようになります。

読んでくれたら誰でもいいよ〜っていう感じは、集客ブログでは意味がないアクセスになっちゃうので、ここは外せないポイントです。

アメブロカスタマイズのデメリット

アメブロカスタマイズのデメリットは

スマホで表示されない！ことです。

えええーーーー！！！
せっかくオリジナルのヘッダーやメニュバーをつけても表示できなきゃ意味ないじゃん！！

そうなんですよね。

アメブロカスタマイズしてもスマホで表示されないのは本当に残念ポイントなんです。

じゃ〜やめた！っていうのも勿体ない、その前に１つ確認してみよう。

自分のブログはパソコン？それともスマホで読まれているか？アクセス状況を確認する

アメブロカスタマイズのメリットでもお話しましたが、企業さま向けにサービスを展開したい方や読者さんの層によっては、パソコンでブログを読む方が多い場合もありますよね。

なので、自分のブログが、パソコンとスマホのどちらで読まれているか？まずは確認してみましょう。

アメブロで見ると、どのデバイスで読まれているかが分かるグラフがこれ↓

私のアメブロはスマホの方がやや多いですね。

パソコンで見ている人がゼロではないので、やっぱりアメブロカスタマイズはしておいた方が良さそうです。

アメブロのアクセス解析を見る手順をご説明します。

１、アメブロの管理画面に入り、左側の【アクセス解析】をクリックします。

２、画面を少し下にスクロールします。そうすると、右側にデバイスのグラフがあります。

これだけです。ブログがスマホ・パソコンのどちらで見られているか確認してみてください。

アメブロのデザイン変更方法（アメブロカスタマイズ）

ご自身のアメブロのデザインを変更する方法をご紹介します。

では、いきますよ〜！

アメブロの管理画面を開きます。

左側のメニューの【デザイン設定】をクリックします。

変更出来るデザインがたくさん出てきます。

この中には、アメブロのテンプレートも多いですね＾＾

今回は、この中からオリジナルのヘッダー画像に変えられる【アメブロカスタマイズ】出来るものを選びます。

アメブロカスタマイズ出来るテンプレートとは？

たくさんのアメブロデザインが出ているので、下の方にスクロールしていきます。

そうすると、【他のカテゴリからブログデザインを探す】の中の【カスタム可能】をクリックします。

「カスタム可能」デザインがたくさん出てきます。

アメブロカスタマイズの２種類の方法

アメブロのカスタム可能デザインは、大きく２種類で分かれています。

1つは、【CSS編集可能】なもの。

これは、デザインをCSSを使って変更していきます。

少し難易度が高いですね。

２つ目は、【デザインを簡単にカスタマイズする】ことが出来るものです。

初心者の方やCSSが分からない方でも、オリジナルの画像をヘッダーに使えます。

２種類のアメブロカスタマイズにどんな違いがあるかを解説します。

CSSを使うアメブロカスタマイズ

難易度は高めです。CSSなどの専門的な知識が必要。もしくは勉強してもらうと良いですね。その代わり自由度が高いカスタマイズが出来ます。

• 専門的な知識が必要なCSSを使う。
• デザインのカスタマイズ出来る場所が多い。
• サイドバーなどもカスタマイズ出来る。

誰でも簡単に出来るアメブロカスタマイズ（CSS不要）

初心者向け！難しいCSSの知識がなくても、誰でも簡単に出来るアメブロカスタマイズです。

アメブロのテンプレートを使うよりも、オリジナルのヘッダー画像を使えるところが嬉しい！

このブログを読んでくれている方は、ブログをお仕事で活用されている方だと思うので、ヘッダー画像が変わるだけで随分、印象が変わります。

デメリットとしては、アメブロカスタマイズの自由度が低いところです。

では、次から詳しく解説していきます。

CSSを使わない！簡単！アメブロカスタマイズでヘッダーを変更

まずは完成イメージを見てみましょう。

ブリザードフラワー教室のブログとしてアメブロカスタマイズでヘッダー画像を入れてみました。

【Before】

↓

【After】

手順に沿って、初心者の方にも簡単アメブロカスタマイズをご紹介していきます。

最初にベースとなるデザインを選びます。

私は犬が好きなので「やっぱり犬が好き」を選びました（笑）

選ぶポイントとしては、記事タイトルのデザインなどは選んだテンプレートのものを使う形になります。

なので、ご自身のお仕事に合ったものを選ぶと良いですね！

選んだデザインのイメージが表示されます。

アメブロデザインを確認したら、次はレイアウトを考えます。

お好みのレイアウトを選びます。

今回は、【３カラム・右ワイドメニュー】を選びました。

【適用する】をクリックします。

ブログデザインが適用され、完了画面が表示されます。

次に【デザインを簡単カスタマイズする】をクリックします。

デザインをカスタマイズ出来る画面が開きます。

まずはヘッダーから変えていきます。

左のヘッダーの【オリジナル画像を使う】をクリックします。

画像のサイズは、高さが０〜300pxで決めます。

写真をそのまま使う人は、高さだけを決めればOKです。

自分でオリジナル画像を作れる方は、横を980pxにしましょう。

使いたいファイルをアップロードします。

アップロードされたら、使いたい画像を選択します。

今回は犬の画像です。

選択したら、【X】をクリックし、画面を閉じます。

写真が選択されたので、プレビューで写真が入ったヘッダー画像が見れるようになりました。

次に【画像の配置】を選びます。

今回は【右】にします。

そして、ヘッダーの高さを変えます。

ここは、人によって違いますので、写真が切れてしまっている人は高めにするなど調整すると良いです。

ブログタイトルと説明文を変えていきます。

【文字のサイズ】を選びます。

今回は【大】にしました。

【文字の配置】を選びます。

今回は【左】を選びました。

【上からの距離】を変更します。

プレビューを見ながら、お好みで変えると感覚的に調整できますよ。

今度は【背景】を変更します。

テンプレートから選ぶと↓こんな感じです。

ちょっとゴチャっとして、ブログ記事が読みにくいですね＾＾；

今回は【画像なしにする】をクリックして、背景は「白」にします。

プレビューを確認し、OKの場合は【保存】をクリックします。

【デザインのカスタマイズ完了】画面になります。

実際のブログが、どのように変わったか確認しましょう。

【ブログを確認する】をクリックします。

プレビューで見た通りのブログに変更されました。

ヘッダーが変わるだけでも、他のブログと差別化出来ますね。

アメブロカスタマイズしたのに、画像が変更されない時の対処法

アメブロカスタマイズしたのに、ヘッダーが変更されない時は、古い情報を読み込んでしまっているので、キャッシュの削除が必要です。

キーボードのWindowsは、『F5』、Macは、『Command』+『R』を押して、スーパーリロードでキャッシュをクリアにしましょう。

これでOKです＾＾♪

お仕事ブログで大切なこと：アメブロカスタマイズする意味

アメブロをお仕事のブログに使いたいと始める方も多いですね。

アメブロで用意されたテンプレートでは、同じデザインを使っている人がたくさんいます。

１つブログを読んだ後に、違うブログを読んで同じブログデザインだと『アレッ！さっき見たブログと同じかな？』なんて思ってしまう場合も多くないですし、同業種さんと同じデザインになりやすいんです。

まずは、アメブロカスタマイズでヘッダー画像をオリジナルにするだけでも、他のブログと差別化することが出来ます。

また自分ブランド作りにも少し役に立ってくれそうですね。