【初心者必見】アメブロカスタマイズを０円で行う方法

この記事では「アメブロカスタマイズを０円で行う方法」についてご紹介していきます。

アメブロは豊富なカスタマイズ機能があり、初心者でも簡単に行うことができます。デザインを外注する方法などありますが、ここでは自分で行うことによってカスタマイズを０円にする方法を具体的にご紹介していきますので、ぜひ参考にしてみてください。

1 アメブロのカスタマイズとは？
2 カスタマイズの方法
- 2.1 デザインの選択方法
- 2.2 注意点
3 カスタマイズできる場所
4 ヘッダーのカスタマイズ
- 4.1 ヘッダーの設置方法
5 グローバルメニューのカスタマイズ
- 5.1 グローバルメニューの設置方法
6 サイドバーのカスタマイズ
7 まとめ

アメブロのカスタマイズとは？

アメブロのカスタマイズには２つの種類が存在しています。

【アメブロカスタマイズ】

アメブロ側で用意されたテンプレートの利用
カスタマイズ可能なテーマを利用する

アメブロ側で用意されたテンプレートを利用する際にはワンクリックで変更が可能です。すでに用意されているテンプレートの利用方法や詳細は「【アメブロ】３種類のデザイン設定を徹底解説」をご覧ください。

これを利用すれば面倒な設定をせずとも、印象的なブログや見やすいブログをすぐに作ることができます。HTMLやCSSなどといった言語を知っている必要もありませんので、ブログを始めたばかりの人にはおすすめの方法と言えます。

テンプレート利用の注意点

アメブロでテンプレートをそのまま使ってしまう場合の注意点としては、他の人とデザインが被ってしまうことが挙げられます。

例えば、自社で商品を販売している場合、同じようなブログがあると、同一のブログだと思われる可能性があり、販売する機会が失われてしまいます。

そのため、自社商品を販売している場合や他の人のブログと差別化を図りたいと考えている方の利用は非推奨となっています。自分だけのオリジナルブログや自分らしさを表したブログなどを作りたい場合にはカスタマイズを行うことが推奨されます。

0円でカスタマイズする方法

アメブロのカスタマイズを0円で行うためには自分で実践する必要がありますが、アメブロのカスタマイズは初心者でも行いやすいようになっています。

そのため、下記でご紹介しているカスタマイズできる部分を把握し、画像やバナー等を作成した上で配置することをおすすめします。

1,000円〜30,000円でカスタマイズする方法

アメブロでのカスタマイズを外注する方法もあります。専門のデザイナーにヘッダーやバナーを依頼することによって、クオリティが高い画像を作ることができ、ブログ全体を質の高いものに構築することができます。

格安でデザイナーに依頼することができる代表的なサービスはクラウドワークスやココナラとなっていますので、もし外注を利用して手取り早く画像を作成したい方は利用をおすすめします。

関連記事アメブロ集客で色彩心理学を活用する４大メリット

2021.08.08

カスタマイズの方法

【アメブロカスタマイズの方法】

アメブロへログイン
アメブロ管理を開く
左のメニュバーにある「デザイン管理」をクリック
カテゴリから探すで「カスタム可能」なデザインを選択
基本的な色やデザインなどを元にデザインを選択
（※推奨デザイン：CSS編集用デザイン）
「表示を確認する」をクリック
カラム数を選択
「適応する」をクリックして完了

カスタマイズの方法としては、上記写真でも挙げたように「カスタム可能」を選択します。これでヘッダーやサイドバー、背景のカスタマイズが可能になります。

全体や部分的なものを自分でカスタマイズしていきたい方は必須の項目です。カスタマイズできるようになれば修正のたびに外部へ依頼せずに済み、全て０円で行うことができます。

また、カスタマイズ可能なデザインの中にも2種類あり、最初からデザインがあるものと真っ白の状態でゼロから構築するものです。前者は設定を編集しなくても簡単に変えられるものは初心者におすすめのものです。

後者はある程度、編集ができる方かにはおすすめのものとなっています。CSSを変更したりする場合はしっかりとした知識が必要になるので、色々なサイトなどを参考にしてみることが推奨されます。

デザインの選択方法

デザインの選択方法としては、自社商品で扱っているカラーなどがあるとそれにあった色を選択することが賢明です。また、見出し等のデザインでも選択していくことができるでしょう。

なお、CSS編集用デザインを選択した場合、デザイン等が入っていませんのでゼロから自由に設定していくことが可能です。

注意点

アメブロデザインには2種類のものがあり、「カスタマイズできるもの」「カスタマイズできない」ものがありますので、必ずカスタム可能なデザインを選択しましょう。

カスタマイズができないテンプレートデザインの場合、CSSなどの編集ができませんのでジブのオリジナルのブログを作ることができなくなります。

カスタマイズできる場所

アメブロのカスタマイズできる場所は主に以下の７点です。なお、これは３カラムを想定しており、２カラムの場合にはサイドバーがひとつになりますので、３番がひとつ減ることになります。

【アメブロでカスタマイズできる７箇所】

ヘッダー（メインとなる画像）
グローバルメニュー
サイドバー
メッセージボード
記事タイトル
本部スペース
ブログ全体の背景画像

そして、主にカスタマイズしてやっていく場所はヘッダーやグローバルメニュー、サイドバーとなります。追加のオプション的なものでメッセージボードなどをやっていくといいでしょう。

この記事ではヘッダーとグローバルメニュー、サイドバーについて解説していきますので、ぜひ下記より参考にしてみてください。

ヘッダーのカスタマイズ

１つ目に、アメブロのカスタマイズの代表格であるヘッダーの作成方法をご紹介していきます。

ヘッダーはブログを開いたときに一番最初に目につく場所でもあり、どのようなことを発信しているのかイメージさせるのにとても重要なものです。そのためテンプレートにあるようなものではなく、オリジナル画像を作成し設置することが推奨されます。

関連記事アメブロのヘッダー作成方法と集客効果を解説

2022.02.13

ヘッダーの設置方法

ヘッダー部分の画像をアメブロへアップロードし、下記のコードをデザイン設定のフリースペースへ入力してください。画像URLはコード内の画像のところへ設置することで表示されます。

/*ヘッダー画像*/
.skin-bgHeader {
background:url(画像の URL) #ffffff center no-repeat; /*画像*/
height: 300px; /*画像の高さ*/
}
/*ブログタイトル、説明文位置初期化*/
.skin-blogMainTitle,.skin-blogSubTitle{
margin:0; /*マージン*/
padding:0; /*余白*/
}
/*ヘッダー画像のリンク設定*/
a .skin-blogMainTitle {
width:1120px;/*画像の横幅*/
height:300px;/*画像の高さ*/
display:block; /*表示設定*/
position:absolute; /*位置設定*/
text-indent:-9999px; /*ブログタイトルを隠す*/
}
/*ブログ説明文を非表示*/
.skin-blogSubTitle{
display:none; /*表示設定*/
}

ヘッダーの画像は横長の物ですが、サイズが決まっているので使う場合には事前に変更しておく必要があります。

利用する画像をアップロードして、オリジナル画像をクリックして必要なものを選んで適用すれば変更することができます。なお、適切なヘッダーサイズは「【集客力向上】アメブロの最適なヘッダーサイズを徹底検証」をご覧ください。

グローバルメニューのカスタマイズ

グローバルメニューはヘッダー下に最大５つまで配置可能なメニューバーを指します。

自社商品を販売している場合、サービス内容や商品概要、お客様の声、問い合わせフォームなどを設置しておくと、ユーザーが迷わず購入することができます。設置方法も簡単ですので、５個のメニューを作成し設置することをおすすめします。

グローバルメニューの設置方法

【フリースペースへHTMLタグを入れる方法】

アメブロへログイン
「設定・管理」をクリック
フリースペースをクリック
下記のHTMLコードをコピー
フリースペースへ貼り付け

＜注意事項＞

【URL1〜５】はリンク先のURLとなります。
【ボタンの文字1〜５】は表示するボタンのテキストです。

<div class="nav-wrap"><nav><ul class="nav-body">
<li><a href="【URL1】"><span>【ボタンの文字1】</span></a></li>
<li><a href="【URL2】"><span>【ボタンの文字2】</span></a></li>
<li><a href="【URL3】"><span>【ボタンの文字3】</span></a></li>
<li><a href="【URL4】"><span>【ボタンの文字4】</span></a></li>
<li><a href="【URL5】"><span>【ボタンの文字5】</span></a></li>
</ul></nav></div>