小林千春が考える、3秒で伝わるブランディングデザインを発信するWordPressブログの作り方・設定、SNSの使い方などご紹介します。個人事業主、中小企業の方の集客に役立つアイデアもお伝えします。

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

WRITER
 
この記事を書いている人 - WRITER -

web集客コンサルタント/デザイナー/色集客アドバイザー/セミナー講師/国が全国に設置する「よろず支援拠点 静岡」 コーディネーター(相談員)

ホームページ・ブログ・インスタ・SNS活用・SEOなどを活用し、想いやコンセプトを表現し自分ブランド作りが得意。

詳しいプロフィールはこちら

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

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

私もやれるのかな…

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

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

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

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

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

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

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

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

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

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

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

アメブロカスタマイズで出来ること

例えば、

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

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

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

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

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

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

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

そうなんです!

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

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

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

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

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

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

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

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

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

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

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

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

そうなんですよね。

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

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

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

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

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

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

アメブロのアクセス解析

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

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

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

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

アメブロのアクセス解析を見る

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

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

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

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

では、いきますよ〜!

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

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

アメブロのデザインを変える

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

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

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

アメブロデザイン

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

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

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

アメブロデザインをカスタム可能を選ぶ

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

アメブロのカスタム可能デザイン

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

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

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

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

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

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

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

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

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

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

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

css編集可能デザイン

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

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

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

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

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

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

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

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

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

【Before】

簡単アメブロカスタマイズbefore

【After】

簡単アメブロカスタマイズ完成

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

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

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

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

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

アメブロカスタマイズ

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

簡単アメブロカスタマイズ

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

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

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

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

簡単アメブロカスタマイズ

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

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

簡単アメブロカスタマイズ

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

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

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

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

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

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

簡単アメブロカスタマイズ

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

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

今回は犬の画像です。

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

簡単アメブロカスタマイズ

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

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

今回は【右】にします。

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

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

簡単アメブロカスタマイズ

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

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

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

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

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

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

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

簡単アメブロカスタマイズの位置

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

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

簡単アメブロカスタマイズの背景

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

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

簡単アメブロカスタマイズ

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

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

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

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

簡単アメブロカスタマイズ

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

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

簡単アメブロカスタマイズ完成

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

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

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

これでOKです^^♪

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

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

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

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

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

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

起業当初、お客様0からブログ集客で5年継続!

個人事業主なら、ネット集客が必須の時代!SNSやブログをやって当たり前。そして、同業種の方もたくさんやっている。ネット集客がどんどん加速していく中。

お客様ゼロ、営業苦手な千春が5年継続してきたコツと苦労などをメルマガでお届けします

無料プレゼント!

神アプリでサクッと3分インスタ投稿!今すぐ使える便利技5選

インスタ集客がメルマガのセミナー形式で学べる

〜受け取り方法〜
千春のLINE@登録で、無料プレゼント
友だち追加

または『 @chiharu3 』でID検索

この記事を書いている人 - WRITER -

web集客コンサルタント/デザイナー/色集客アドバイザー/セミナー講師/国が全国に設置する「よろず支援拠点 静岡」 コーディネーター(相談員)

ホームページ・ブログ・インスタ・SNS活用・SEOなどを活用し、想いやコンセプトを表現し自分ブランド作りが得意。

詳しいプロフィールはこちら

Copyright© 千春のブログ , 2018 All Rights Reserved.