アメブロカスタマイズで、一番悩むのがヘッダー画像です。 売れてきたら、プロのデザイナーさんにきちんとお金を払って頼むことをおすすめします。 この記事では、まだブログを初めて間もない方が、自分でカスタマイズする際に、アメブロのヘッダーを一番簡単に作る方法をご紹介します。

2017年7月のアメブロの仕様変更によりCSSの一部を修正いたしました(2017/8/25), ステキに変身!自分でできるアメブロカスタマイズの方法【2020年最新版】の続きです。, CSSの知識がなくてもコピペでできる方法なので、パソコンが苦手な起業ママもご安心くださいね。, こちらの操作を行うと、現在のデザインはリセットされます。すでにカスタマイズをプロにお願いしている方は全部消えてしまうのでご注意ください。, こんな風に、ちょっと凝ったフォントスタイルにしたヘッダーを設置する方法をご紹介します。, 高さですが、こちらのサンプルヘッダーで幅1120ピクセル✕高さ400ピクセルです。, できればPCのモニターで表示した時に、スクロールしないで記事が見えるほうがよいと思います。モニターによって差がありますが、この高さが限界かなと思います。参考になさってください!, ◎1つ1つの記事をしっかり読んでほしい→2カラムメニュー右◎サイドのメニューに注目してほしい→3カラム, 今はスマホ率が高いので、どんなにサイドバーがんばっても見てもらえない確率が高いです。1つ1つの記事をしっかりと作っていくほうを、おすすめします。, ⑤カラム数を決めて「適用」をクリックすると、デザイン完了の画面が表示されるので「CSSの編集をする」をクリックします。, 次に、最初に保存したヘッダー画像をアップロード(アメブロで使えるようにする)します。, ↑この画像のパスを後から使用します。次からいよいよ、CSSにコードを加えていきます!, ①もう一度、一番上までスクロールして戻し、「この画像のパス」をクリックして選択しコピーする。(ブラウザによって動作の違いあり。枠内を全選択(Ctrl+A)して、コピー(Ctrl+C)してもOK), /*ヘッダー画像の設定 */ 起業してアメブロを始めると気になってくるのがヘッダーなどのデザイン面ですよね。 自分でおしゃれなデザインにできたら嬉しいですよね! 本日は【保存版】アメブロのヘッダー&メニューバーを自分でカスタマイズする方法というテーマでお届けします。 すでにカスタマイズしてメニューバーを表示させている方は、二重に表示されてしまいますので、パソコンでは表示しないという設定をしておいてください。, ※保存したのに反映されない場合は「再読込」をしたり、他のブラウザやパソコン上で確認してみてください。(古い情報が残っているため読込し直しても表示されないことが、多々あります), Ameba Owndとアメブロは「設定したのに更新されない!」ことが多いのがネックですが、気長に待ちながら操作してみてくださいね。, いまさら人に聞けない【ネット集客の基本】をまとめたPDF資料が今すぐダウンロードできます!, 一般的なネット集客のノウハウをおうちサロン・女性個人事業主の方向けにアレンジしてまとめました。, 『アメブロでどんなにステキにカスタマイズしても、スマホで見ると全くフツーの表示になってしまう!』, Ameba Owndでこのままホームページを作りたい!という方は、ここで設定するものがご自身のホームページのURLとなります。名刺等に書く場合がありますので、わかりやすいものにしてください。既に別でホームページをお持ちの方は、ここは何でもOKです。, なぜか「非公開」のところに入って、右のプレビューにも表示されません。ここで「公開」のところにドラッグで移動してから「保存」するとメニューバーに表示されます。, ホームページをまだ持っていない方は、せっかくAmeba Owndでページを作成するのだからそのまま作ってしまいたい!という方もいるかと思います。その場合は「リンク」ではなく「ページ」で詳細ページを作ることが可能です。, 連携には1時間程度かかる、と書いてあります。修正したものがすぐに反映されない場合がありますが、気長に待っていると表示されますのでご安心ください!, カスタマイズして、メニューバーを設置していた方はダブルで表示されることになります。, デザインを変更する時に、プレビューで確認できるのですが肝心のメニューバーが、どんな色になるのは、隠れてしまって見えません。 画面の中央あたりから下方向にびよーんと画面をスクロールすると隠れていたメニューバーが表示されて、色を見ることもできます。引っ張ると隠れていたメニューバーが表示されます。色はこちらで確認してください。, アメブロのサイドバーにFacebookページへのリンクを入れる方法【ページプラグインを使う】, URLを決めます。アメブロでログインしていると自分のプロフィール写真とアメブロのタイトルが自動的に表示されます。, 「ブログをはじめる」を選択します。※アメブロと連携させる必要があるためこちらになります。, 気に入ったデザインを選択して拡大して確認し、「このデザインで決める」をクリックします。, ページを追加するための画面が表示されます。何もしなくてもデフォルトで「Blog」というのは表示されていますが、後で直しますのでこれはこのままにしておきます。, 下のほうの「非公開ページ」に表示されているので、上の「公開ページ」の部分に向かって, 移動したと同時に、下のほうに「保存」というグリーンのボタンが表示されるのでクリックして保存します。. アメブロモバイルのヘッダに画像を入れたいと考えているのですが通常の「スキンの編集」ではpc版にしか反映されません。モバイル版の変更はどのようにしたらよいのでしょうか?質問者は単にスキン変更ということではなく、pc版と同様に任 今回はケータイ版のアメブロにヘッダー画像を表示するカスタマイズをご紹介します。 まず最初にこちらのソースをCSSに追記してくださいね。 次に記事編集画面を開き、記事編集スペースの下にある「HTMLタグを表示」のタブをクリックします。 background: no-repeat scroll center; アメブロ自体は、見るもの(PC、スマホ、タブレットetc)によって自動的にデザインを調整してくれる”レスポンシブルデザイン”には対応していません。, これは「Ameba Ownd」という、 ホームページ制作サービスと連携すると実現可能です。, 大丈夫、ご安心ください! ホームページのメニューバーの中から表示したい項目を決めておきます。, あとはいま作成したページのTOP画面を編集する必要があるのですが、こちらは後でも大丈夫なので、先にやることを進めていきますね。, スマホの場合、アメブロのアプリからの「自分のブログを確認する」では表示されません。, iphoneの場合は、右下の「シェア」から「Safariで表示」を選ぶと確認できます。, メニューバーが表示されていることを確認してください。 そのような方でも既存のページ(公開している情報)を活かしてアメブロをスマホで見た時にメニューバーを表示させる裏技をこの記事ではご紹介します。, 今回は前者の「既にホームページを持っているか、とりあえずはアメブロだけでいい」という方向けの内容です。, 「プロフィール」や「提供サービス」「スケジュール」などのページができている方は、そこに飛ばすメニューバーを今すぐ作成できます。アメブロだけでまだそのようなページがない方は、記事を書いて公開しておいてくださいね。, サイトが完成したのであとはメニュー項目を作成していきます。項目名とクリックしたらどこに飛ばすか、というリンク先は予め決めておいてください。あまりたくさんあっても表示しきれないので4つか5つぐらいでOKです。, <ホームページをリンク先にする場合> この記事は4年前に書いたものを2020年6月に新しいアプリのご紹介とともに、最新の内容に更新しました, 売れてきたら、プロのデザイナーさんにきちんとお金を払って頼むことをおすすめします。, この記事では、まだブログを初めて間もない方が、自分でカスタマイズする際に、アメブロのヘッダーを一番簡単に作る方法をご紹介します。, 2,Photoshop、Gimp、Pixlrなどの画像加工ソフトを使ってパソコンで作る(無料), 今回の3番目、スマホアプリを使った方法は、スキルがなくてもスマホさえあれば簡単にできます。, まだそこまでじゃないけど、何もしないのもイヤというレベルの方にオススメの方法です。, App StoreやGoogle Playから「Canva」で検索してアプリを入手してください。, ①Canvaの利用登録をします。登録しておくと、保存したデータをパソコンと連動して使うことができるので便利です。, 通常の画像作成アプリと同じように、文字や画像を入れることができますが、自分の写真だとこの横長にうまく合わせるのが難しいので、初めての場合は「テンプレート」がおすすめです。右のほうにスクロールしていくと「テンプレート」が表示されます。, 様々なテンプレートが用意されていますが、サイズが違うため今回指定しているアメブロヘッダーサイズ(1120 ✕ 400)にはピッタリ合いません。, 追加した写真やテキストをダブルタップするとサイズ調整できるので、うまく合わせて下さい。(パソコン版Canvaだと自然にサイズ調整してくれるのですが・・・), その他、自分の写真を使いたい場合は「カメラロール」から選べたり、Canvaに入っている無料の写真なども使えます。文字の種類もたくさんあるので、オリジナルヘッダーがスマホで簡単にできます。, ただ、文字の大きさなどは実際アメブロのヘッダーに配置してみないとわからないので、だいたいできたら一度保存して、アメブロに設置してみましょう。, ・ポイントは、アメブロのヘッダーに合わせたサイズをきちんと設定すること。(幅1120), ・クオリティに限界はあるので、ある程度売れてきたらPCの画像加工ソフトで作るか、プロに頼むことをおすすめします。, 自分で行ったカスタマイズがイマイチ・・という方は、ご相談ください。イメージ通りに仕上げます。, いまさら人に聞けない【ネット集客の基本】をまとめたPDF資料が今すぐダウンロードできます!, 一般的なネット集客のノウハウをおうちサロン・女性個人事業主の方向けにアレンジしてまとめました。, フルカスタマイズなのに格安!プロが作る女性に好かれる美しいデザインのアメブロカスタマイズサービスです。, この記事はアメブロのヘッダー画像をダウンロード不要の無料ソフトを使って自分で簡単に作る方法をご紹介しています。, アメブロヘッダーを自分で作って設置したい!ヘッダー画像の作り方から設置の方法までPCが苦手な方でもできるように解説。.