アメブロ – JOUJOUNET｜ブランディング×デザインで集客・売上UPを叶える https://joujounet.com/column SNSで理想のお客様に選ばれる、心を奪う世界観♡ホームページ・LINE・Lステップ・アメブロ・Instagram Thu, 29 May 2025 14:22:29 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://joujounet.com/column/wp-content/uploads/2021/09/J-2-150x150.png アメブロ – JOUJOUNET｜ブランディング×デザインで集客・売上UPを叶える https://joujounet.com/column 32 32 アメブロの2カラム・3カラムどっちがいい？2カラムと3カラムのメリット・デメリットを解説 https://joujounet.com/column/ameblo_columnlayout/ https://joujounet.com/column/ameblo_columnlayout/#respond Mon, 17 Feb 2025 06:00:52 +0000 https://joujounet.com/column/?p=5281

「アメブロをおしゃれにしたいけど、2カラムと3カラム、どっちがいいの？」 そんな悩みを抱えていませんか？ この記事では、アメブロカスタマイズを考えている人が迷いやすい「2カラムと3カラムの選び方」を、メリット・デメリット […]]]>

「アメブロをおしゃれにしたいけど、2カラムと3カラム、どっちがいいの？」

そんな悩みを抱えていませんか？

この記事では、アメブロカスタマイズを考えている人が迷いやすい「2カラムと3カラムの選び方」を、メリット・デメリットとともにわかりやすく解説します。あなたのブログに合ったデザインを見つけて、もっと自分らしいブログにしましょう！

この記事でわかること
  • カラム設定とは何か
  • アメブロのカラム設定の特徴メリット・デメリットも
  • あなたにあったカラムレイアウトは？

では、早速解説していきます！

ブログレイアウトのカラムとは？

カラムとは、「段組み」という意味でアメブロやブログ、Webサイトのレイアウトを
いくつの「列（カラム）」でページを縦に分割して表示するかのことを指します。

意外と知らない？カラム設定の重要性

カラム設定をすることで、ブログの見た目や使いやすさがグッと変わります！

  • サイドバーにバナーやメニューを設置して、読者を誘導
  • 広告やプロフィールを目立たせて集客や収益につなげる
  • ブログ全体のレイアウトを調整して、見やすさやデザインを変更できる

などなど、ついあれもこれもと多くなりがちな情報をカラムを使うことで整理することができます。これにより、大事な情報を目立たせることができるので、読者にとって必要な情報を見つけやすくなることからも、カラムはブログにおいて重要な役割を果たしています。

アメブロで集客につながるブログレイアウトは？カラム設定を徹底比較

アメブロでは、「2カラム」と「3カラム」を選べます。
「なんとなく…」で選んでしまう方も多いのですが、それぞれの特徴を知ることで、より読者に伝わりやすいブログを作ることができます！

2カラムでできることとは？ブログレイアウトのメリット・デメリット

アメブロの２カラム設定

記事エリアと右か左のどちらかににサイドバー（プロフィール、メニュー、リンクなど）があるのが２カラムです。

2カラムのメリット

  • シンプルで記事に集中してもらいやすい
  • デザインが崩れにくい
  • 情報量が少ない分、スッキリした見た目で、おしゃれな印象に

記事エリアやメインコンテンツが目立つので、読者が記事に集中しやすく、迷わず記事を読めるというのが大きな特徴です。

2カラムのデメリット

  • 載せられる情報が少なめ
  • 内部リンクや回遊率が下がる可能性

サイドバーが1つで情報量が少ない分、載せられる情報が限られます。プロフィール、カテゴリ、最新記事など載せる情報を最低限に絞る必要があります。
また、読者が他のコンテンツに気づきにくく、他のページへの誘導が減り、別の記事を読んでもらえない可能性があることもデメリットです。

アメブロの記事2カラム 例 レイアウト
Screenshot
ジュジュ

カラムを左に設置するか、右に設置するかでも印象が変わります！

3カラムでできることとは？ブログレイアウトのメリット・デメリット

アメブロの3カラム設定

記事エリアを挟んで、左右両方にサイドバーがあるのが3カラムです！

3カラムのメリット

  • 多くの情報を一度に表示できる
  • 広告やリンクをたくさん配置できる
  • 読者の回遊率を上げやすい

サイドバーが2つあるので、プロフィール、最新記事、人気記事、広告、SNSリンクなど、読者が見てほしい情報を同時に配置できるのが大きなメリット！
そのほかにも、バナーを複数設置できるので、収益化を目指す方には便利！！
情報量を多く載せられる分、人気記事やカテゴリを目立つ位置に置けるので、ブログ内での回遊率がアップが見込めます。

3カラムのデメリット

  • 情報が多くてごちゃごちゃしやすい
  • デザインによっては情報を逆に見つけづらくなることも

どうしてもアメブロは画面の横幅が固定されることもあり、情報を詰め込みすぎると、逆に読者が迷いやすくなったり、ブログが見づらくなることがあります。
またスマホでは基本1カラムになるので、せっかくサイドバーにたくさん情報を載せても見られない…ということもデメリットです。

これはバナーを載せていないけれど、パッと見た印象は情報がパンパンです。。

アメブロの記事3カラム 例 レイアウト
Screenshot

どちらを選ぶ？あなたに合ったデザインはこれ！

ブログのレイアウトは、目的や運営スタイルによって「2カラム」と「3カラム」のどちらを選んだ方がいいのか変わります。なので次の文章を参考に、自分にはどちらが合っているかぜひチェックしてみてください。

2カラムはこんな人におすすめ！アメブロカスタマイズのコツ

集客や発信が目的で、シンプルで見やすいデザインを重視するなら2カラムがおすすめ！
とくに、SNS集客や女性向けおしゃれなブログには相性◎

・シンプルで読みやすいデザインにしたい方
　→メインのコンテンツに集中しやすく、ブログ記事をしっかり読んでほしい方にぴったり。

・スマホユーザーを意識している方
　→スマホでは基本的に1カラム表示になるため、2カラムの方が崩れにくく見やすいです。

・コンテンツの更新頻度が高い方
　→記事がメインなら、サイドバーにプロフィールやカテゴリだけを載せてシンプルに。

3カラムはこんな人におすすめ！アメブロカスタマイズのコツ

情報量が多く、広告やリンクを活用して収益化したいなら3カラムが便利でおすすめ！
特にPCでの閲覧が多いブログや、アフィリエイトサイトには最適です。

・たくさんの情報を一度に伝えたい方
　→サイドバーが左右にあるので、プロフィール・最新記事など多くの情報を見せたい場合に便利

・広告やリンクを多く設置したい方
　→収益化を考えていて、アフィリエイトリンクやバナーを多く載せたい方には3カラムが最適。

・パソコンでの閲覧が多いターゲット向け
→ PC画面なら3カラムでも見やすく、情報をたくさん詰め込んでもスッキリ表示できます。

ジュジュ

私のおすすめは、2カラム！3カラムの場合は記事幅がかなり狭くなります。

アメブロのブログレイアウトを変えて、もっと集客できるデザインに！

読みやすいアメブロデザインを考える上で、カラムレイアウトは意外と重要な役割があることを、なんとなくご理解いただけましたか？

記事やコンテンツを重視して、読者にしっかり読んでもらいたいなら「2カラム」
情報量を増やし、ブログ内で回遊してほしいなら「3カラム」

どちらもターゲットやブログの目的に合わせて選ぶのが大事です。

カラムレイアウトを「どっちにしたらいいの？」と悩んだら、あなたのブログやSNSの方向性を一緒に考えながら、最適なデザインを提案しますのでぜひご相談くださいね。

今すぐLINE公式で相談する


運用や活用の方法、SNSなどのお問い合わせもお気軽にご相談ください♪

]]> https://joujounet.com/column/ameblo_columnlayout/feed/ 0 【アメブロ囲み枠】夏にぴったりなレモン柄の囲み枠（ブルーver） https://joujounet.com/column/%e3%80%90%e3%82%a2%e3%83%a1%e3%83%96%e3%83%ad%e5%9b%b2%e3%81%bf%e6%9e%a0%e3%80%91%e5%a4%8f%e3%81%ab%e3%81%b4%e3%81%a3%e3%81%9f%e3%82%8a%e3%81%aa%e3%83%ac%e3%83%a2%e3%83%b3%e6%9f%84%e3%81%ae%e5%9b%b2/ https://joujounet.com/column/%e3%80%90%e3%82%a2%e3%83%a1%e3%83%96%e3%83%ad%e5%9b%b2%e3%81%bf%e6%9e%a0%e3%80%91%e5%a4%8f%e3%81%ab%e3%81%b4%e3%81%a3%e3%81%9f%e3%82%8a%e3%81%aa%e3%83%ac%e3%83%a2%e3%83%b3%e6%9f%84%e3%81%ae%e5%9b%b2/#respond Fri, 07 Jul 2023 05:29:33 +0000 https://joujounet.com/column/uncategorized/%e3%80%90%e3%82%a2%e3%83%a1%e3%83%96%e3%83%ad%e5%9b%b2%e3%81%bf%e6%9e%a0%e3%80%91%e5%a4%8f%e3%81%ab%e3%81%b4%e3%81%a3%e3%81%9f%e3%82%8a%e3%81%aa%e3%83%ac%e3%83%a2%e3%83%b3%e6%9f%84%e3%81%ae%e5%9b%b2/ アメブロで使える大人かわいい囲み枠をご紹介しています♡

こちらのページはエレガントなグレースフラワーのピンクバージョンをベースに背景色などのデザイン違いをご紹介しています。同じデザインの色違いはこちら　→こちら★

JUNKO

囲み枠は改行は『Enter』のみで大丈夫です♡
他にも可愛いデザインをたくさん用意しています！

大人かわいい囲み枠をもっと見る♡
囲み枠の使い方

デザインを選んで、HTMLコード(グレーの枠内)をコピーする

アメブロの記事作成画面で [HTML表示] に画面を切り替える

①でコピーしたHTMLコードを貼付けます

囲み枠の中を入力する

無断転載・パクリ・二次利用などは禁止です！

ご自分のブログでコピペしての使用はOKです！

記事をご紹介いただく際は、出典元として当ブログのリンクをお願いします。

おしゃれなレモン柄のアメブロ囲み枠

シンプルなゴールド枠の囲み枠

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,1); padding:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div><p>&nbsp;</p>

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”> <div style=”background:rgba(255,255,255,1);padding:7px;”><div style=”border:2px solid #CEBB5B;　padding:10px; padding-left:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div></div>
<p>&nbsp;</p>

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,1); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

↑目次にもどる

シンプルなゴールド枠の囲み枠（透かし）

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,0.7); padding:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div><p>&nbsp;</p>

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”> <div style=”background:rgba(255,255,255,0.7);padding:7px;”><div style=”border:2px solid #CEBB5B;　padding:10px; padding-left:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div></div>
<p>&nbsp;</p>

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,0.7); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

↑目次にもどる

シンプルなカラー枠の囲み枠

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ; “>
<div style=”background:rgba(255,255,255,1); padding:10px; border:3px solid #4169e1;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,1); padding:10px; border:4px double #4169e1;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”> <div style=”background:rgba(255,255,255,1);padding:7px;”><div style=”border:2px solid #4169e1;　padding:10px; padding-left:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div></div>
<p>&nbsp;</p>

↑目次にもどる

角が丸いゴールドの囲み枠

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;border-radius:10px;”>
<div style=”background:rgba(255,255,255,0.8); padding:10px;border-radius:8px;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;border-radius:10px;”>
<div style=”background:rgba(255,255,255,0.8); padding:10px; border:3px solid #CEBB5B; border-radius:5px;”>
<p style=”margin: 1;”>文字を入力</p></div></div>
<p>&nbsp;</p>

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ; border-radius:10px;”>
<div style=”background:rgba(255,255,255,0.8); padding:10px; border:4px double #CEBB5B; border-radius:8px;”>
<p style=”margin: 2;”>文字を入力</p></div></div>
<p>&nbsp;</p>

↑目次にもどる

影付きのゴールド枠の囲み枠

文字を入力

<div style=” box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ; “>
<div style=”background:rgba(255,255,255,0.8); padding:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

文字を入力

<div style=” box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”> <div style=”background:rgba(255,255,255,0.9);padding:7px;”><div style=”border:2px solid #CEBB5B;　padding:10px; padding-left:10px;”>
<p style=”margin: 0;”>文字を入力</p></div></div></div>
<p>&nbsp;</p>

文字を入力

<div style=” box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,255,0.8); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

文字を入力

<div style=” box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;border-radius:10px;”>
<div style=”background:rgba(255,255,255,0.8); padding:10px; border:3px solid #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

文字を入力

<div style=” box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;border-radius:10px; “> <div style=”background:rgba(255,255,255,0.9);padding:8px;border-radius:5px;”><div style=”border:4px double #CEBB5B;　padding:10px; padding-left:10px;border-radius:5px;”>
<p style=”margin: 0;”>文字を入力</p></div></div></div>
<p>&nbsp;</p>

↑目次にもどる

パステルカラーの背景色の囲み枠

ベビーピンク

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,249,255,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

ベビーブルー

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(239,247,255,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

パステルパープル

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(247,239,255,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

パステルグリーン

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(239,255,247,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

パステルイエロー

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(255,255,239,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

↑目次にもどる

くすみカラーの背景色の囲み枠

アイボリー

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(250,247,238,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

グレージュ

文字を入力

<div style=”background-image:url(https://joujounet.com/column/column/wp-content/uploads/28-1.jpg); padding: 15px ;”>
<div style=”background:rgba(233,228,224,0.9); padding:10px; border:4px double #CEBB5B;”>
<p style=”margin: 0;”>文字を入力</p></div></div>
<p>&nbsp;</p>

↑目次にもどる

JUNKO

囲み枠が上手くできなかったり、ご質問があれば、お気軽にコメント欄から質問してくださいね。

同じデザインの色違いもあるよ！　→こちら★

まとめ・見やすく可愛いブログには囲み枠を使おう

アメブロで長い文章を書くときは文章をボックス(枠)で囲むと読みやすくなります。

ぜひ設定してあなたらしいかわいい”あなただけの”アメブロを完成させましょう！
お役に立てましたら嬉しいです♡

本日も最後までお読みいただき、ありがとうございました♡

大人かわいい囲み枠をもっと見る♡
https://joujounet.com/column/column/ameblo/header/
]]> https://joujounet.com/column/%e3%80%90%e3%82%a2%e3%83%a1%e3%83%96%e3%83%ad%e5%9b%b2%e3%81%bf%e6%9e%a0%e3%80%91%e5%a4%8f%e3%81%ab%e3%81%b4%e3%81%a3%e3%81%9f%e3%82%8a%e3%81%aa%e3%83%ac%e3%83%a2%e3%83%b3%e6%9f%84%e3%81%ae%e5%9b%b2/feed/ 0 アメブロのヘッダー画像を自分で簡単に設定する方法 https://joujounet.com/column/ameblo-kantancustomize/ https://joujounet.com/column/ameblo-kantancustomize/#respond Sun, 05 Dec 2021 07:14:22 +0000 https://joujounet.com/column/?p=1327

アメブロはヘッダーと背景であればCSSコードを編集しなくても設定することができるんです！！]]>

アメブロを使っていて、「私らしいオリジナルのヘッダー画像にしたい」と思ったことはありませんか？

けれども自分でやるとなんだか難しそうだし、外注してプロにお願いするほどでもない…

そんな時におすすめなのがヘッダーと背景のデザインだけ変えられる『簡単カスタマイズ』がおすすめ！
ぜひこの記事を読んで、自分で！簡単に！オリジナルのヘッダー画像を設定してみてくださいね。

この記事がおすすめな人
  • アメブロのヘッダーをオリジナル画像にしたい方
  • 自分で設定したいけどCSSとか難しいと抵抗がある方
  • アメブロのテンプレだけじゃ物足りない方
  • 自分の世界観でヘッダーを作りたい方
  • とにかくアメブロで自分らしさを出したい方

アメブロのヘッダー画像で印象が決まる！

ヘッダーはブログにとって、第一印象の顔となる、とっても重要な部分！

もしブログでヘッダーがなかったら、看板がないお店と同じで、
なんのお店なのか、開店しているのかさえ分からない、
お客さまからしたら入りづらいお店になっているのと同じ。

だからこそ、「なんのブログなのか」「どんな人に向けたブログなのか」が分かるようにヘッダーを設定しましょう。

初心者でも簡単！アメブロヘッダー画像の設定方法

今回ご紹介するヘッダーと背景のデザインだけ変えられる『簡単カスタマイズ』の手順はこちら。

  • カスタマイズ可能な設定にする
  • ヘッダー画像を設定する
  • デザインを調整する
  • 背景を設定する
  • 保存をしてデザインを反映する

では早速、アメブロヘッダーの設定の仕方を説明していきます！

1. カスタマイズ可能なブログデザインの設定にする

まずはじめにオリジナルヘッダーが設置できる、ブログデザインにします。
簡単カスタマイズできるデザインは一覧から簡単に探せます！

1-1.ブログ管理画面→［デザインの設定］を開きます

アメブロのブログ管理画面を開き、［デザインの設定］をクリックします。

アメブロブログ管理画面からデザイン設定を選択

1-2.カスタム可能デザインを開きます

画面下の方の「カテゴリから探す」の中から［カスタム可能］を選択します。

カテゴリからブログデザインを探すより、カスタム可能デザインを選択

1-3.デザインを選択します

カスタム可能デザインの中から「CSS編集用デザイン」と書かれたデザイン以外から選択し、［表示を確認する］をクリック。

カスタム可能デザインの中からCSS編集用意外のデザインを選択する
ジュジュ

「CSS編集用デザイン」以外すべてのデザインが、今回ご紹介する方法が使えるよ！

1-4.レイアウトを選び、保存します

表示されるレイアウトでお好きなタイプを選んでから【適用する】ボタンをクリックし、変更内容を保存します。

ジュジュ

おすすめは「２カラム・メニュー右」だよ！

レイアウトを選び保存する

1-5.デザインとレイアウトが適用されました

ブログデザイン適用後はこちらの画面からもデザインのカスタマイズ へ進めます。

2.ヘッダー画像を設定する

準備が整ったらいよいよ、アメブロのヘッダー画像を設定していきます！

2-1.ヘッダー画像を準備しよう！

ヘッダーは素材が豊富なCanvaでの作成がおすすめです。
サイズは横幅が980px、高さは0〜300pxの間で自分で指定することができますので、
このサイズの範囲内になるよう画像を作成しましょう。

ヘッダーの高さはここで設定を変えられます

2-2.ヘッダー画像を設定します

1.【オリジナル画像を使う】をクリック

ヘッダー画像をオリジナル画像を使う場合

2.【ファイルを選択】をクリック

3.ご自身のPCローカルフォルダ内の設定したいヘッダー画像を選択してから【アップロード】をクリック

自分のPCのフォルダ内からアップロードする画像を選ぶ

4.再度アップロードをクリック

ファイルをアップロード

5.画像を選択すると下図のようにヘッダーが反映されます。問題なければ右上の［×］をクリックして、画像追加画面を閉じてから【保存】をクリックします。

補足：画像の配置

画像の位置を左寄せ、中央揃え、右寄せか選択できます。
※ヘッダー幅を980pxにしている場合は配置を変えても画像の位置は変わりません。

画像の配置左寄せ、中央揃え、右寄せか選択


3.ブログタイトルと説明文の位置を調整しよう

ブログタイトルと説明文の位置を調整します。

3-1.画面の説明

  1. 文字サイズの調整
  2. 文字の配置の調整
  3. 上からの位置を調整
  4. 文字のカラーを変更
文字サイズの調整について

細かい文字サイズの指定はできませんが、大・中・小と選ぶことができます。それぞれの文字の大きさは下の写真を参考にしてください。

＜大＞

ヘッダー文字サイズ大

＜中＞

ヘッダー文字サイズ中

＜小＞

ヘッダー文字サイズ小

3-2. 文字のカラーを変更

ここをクリックすると文字の色を変更することができます。

文字のカラーを変更

好きな色をクリックして選び、右上の［×］で表示されているカラーウィンドウを閉じます

3-3. 文字の配置

文字の配置は左寄せ・中央揃え・右寄せから選択できます。

3-4. 文字の上からの距離

文字を上下どこに位置するか指定します。下に表示されるプレビュー画面を見ながら
ちょうどいい位置の数値を入力してくださいね。

4.背景のデザインを設定しよう

4-1. テンプレートから背景を設定する

背景のテンプレートは全部で27種類。この中から選んでもいいし、後ほど説明するオリジナル画像を使って設定することもできます！

ジュジュ

もともと用意されているだけあって、
簡単に設置できるのが便利！！

テープレートから背景画像を設定する場合
①画像の部分を選択してから、②背景画像を選択します。
背景画像を選択すると下のプレビュー画面に表示されます。

背景画像を選んだら、右上の［×］をクリックしてウィンドウを閉じます。

4-2. 背景の色を設定する

画像を使わずカラーの背景を使いたい場合は、右上のカラー変更部分をクリックすると背景色を変更することができます。

好きな色をクリックして選び、右上の［×］をクリックしてカラーウィンドウを閉じます。

4-3. オリジナル画像を背景に使う

［オリジナル画像を使う］をクリックするとオリジナル画像をアップロードし背景に設定することができます。

4-4.背景を設置しない

背景を何も設定しない場合は［画像をなしにする］をクリックします。

5.保存をしてデザインを反映しよう

あくまで下に表示されているのはプレビュー画面なので、
設定が終わったら【保存】ボタンをクリックして、デザインを反映させましょう！

保存が完了するとこちらの画面になりますので、［ブログを確認する］をクリックで設定したヘッダー画像を確認することができます。

デザインが反映されました！

ジュジュ

簡単ブログカスタマイズの設定はこれで完了！
ね、簡単でしょ?!

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

いかがでしたか？
自分でCSSコードをいじらずにお好きなヘッダーを設定することができます！

この簡単カスタマイズを使えば、ヘッダーと背景を変えるだけでも
アメブロのテンプレートを使うよりもグッと”あなたらしい”アメブロの世界観が手軽に作れます♬

もちろん世界観という点ではもっとカスタマイズして
お客様を迷わせない導線作りが大切になりますが、
そこまでは時間もお金をかられない、でもカスタマイズしたい！！という方におすすめ。

もし、あなたがもっとしっかりアメブロを育てていきたいのならば
フルカスタマイズしてしっかりと作り込むことをおすすめします！！

簡単にコピペで美しいアメブロの世界観が作れるアメブロ魅せるデザインテンプレートもご用意しています。

魅せるデザインテンプレートをCHECKする

この記事があなたのお役に立てれば嬉しいです♡

]]> https://joujounet.com/column/ameblo-kantancustomize/feed/ 0