fbpx
1ヶ月無料キャンペーン開催中!詳細はこちらへ >>

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

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

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

 

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

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

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

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

 

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

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

 

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

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

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

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

 

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

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

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

 

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

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

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

 

カスタマイズの方法

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

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

 

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

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

 

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

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

 

デザインの選択方法

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

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

 

注意点

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

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

 

カスタマイズできる場所

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

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

  1. ヘッダー(メインとなる画像)
  2. グローバルメニュー
  3. サイドバー
  4. メッセージボード
  5. 記事タイトル
  6. 本部スペース
  7. ブログ全体の背景画像

 

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

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

 

ヘッダーのカスタマイズ

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

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

 

ヘッダーの設置方法

ヘッダー部分の画像をアメブロへアップロードし、下記のコードをデザイン設定のフリースペースへ入力してください。画像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; /*表示設定*/
}

 

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

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

 

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

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

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

 

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

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

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

 

<注意事項>

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

<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>

 

サイドバーのカスタマイズ

アメブロのサイドバーにおいてのカスタマイズはバナーの設置が代表的です。メルマガや公式LINE、他のサイトへの誘導リンクとしてバナーが活用されていますので、下記にてバナーの設置方法をご紹介します。

なお、バナー設置の他にもSNSのリンクを表示することもできますので、自分に合ったサイドバーの活用方法を実践してみることをおすすめします。

 

【サイドバーに画像を設置する方法】

  1. アメブロへログイン
  2. ブログ管理を開き「設定・管理」をクリック
  3. サイドバーの設定より「配置設定」をクリック
  4. フリースペースを使用する機能の上段に配置
  5. 記事投稿にて画像をアップロードする
  6. HTML表示に切り替え、画像URLをコピー
  7. サイドバーの設定より「フリースペース編集」をクリック
  8. 画像URLを貼り付ける
  9. 幅の調節等を行う
  10. 保存するを押して完了

 

画像がはみ出る場合には横幅の調節を行えば、サイドバー内に収めることができます。また、2カラムと3カラムでは、サイドバーの幅が違いますので随時修正が必要になってきます。

 

その他、アメブロ集客を効率的に行っていきたいという方はコンサルティングサービスの利用をご検討ください。

このサービスは多くの業種で実績があり、アメブロ集客から収益化、自社メディアの構築など多岐にわたるコンサルティングを実施しています。お申し込みによるお得な特典もありますので、ぜひ上記よりご覧ください。

 

まとめ

アメブロカスタマイズを0円で行う方法についてご紹介してきましたが、いかがでしたでしょうか?

アメブロのカスタマイズは初心者でも簡単に行うことができますので、ぜひ取り組んでみてください。特にヘッダーやグローバルメニュー、サイドバーといったところはブログ内においても重要な箇所となりますので、デフォルトのデザインよりカスタマイズされたデザインの方が集客効果も上がってくると思います。