自宅サロンママのためのネット集客術

WordPressで作るホームページ制作サービス

自分でできるアメブロカスタマイズの方法【2016年最新版】

August 22, 2016
25841 views
約 5 分
自分でできるアメブロカスタマイズの方法【2016年最新版】

この記事は、

『アメブロカスタマイズはしたいけど、まだプロに頼むほどでもない。でも自分でできる範囲で、ちょっとやってみたい!』

という方向けに、

誰でも簡単にできる、必要最低限のアメブロカスタマイズ方法をご紹介します。

※この記事はすべてパソコン上でのお話です。
※2016年3月の新CSS対応です。(プロフィール写真が丸いもの)

 

2種類のアメブロデザイン

アメブロのデザインには、大きくわけて2種類あります。

1,カスタマイズできないもの

あらかじめデザインされたものを当てはめるだけの簡単なもの。季節ごとに変えたり、気軽に設定できる。

ameblo-design

 

設定方法は、

管理画面の「デザインの変更」から、お好きなデザインを選ぶだけです。

 

2,カスタマイズ可能なもの

例えば、全体のデザインは気に入っているけどヘッダーにオリジナルの画像を入れたい、色だけ変えたい・・

そんな時は、カスタマイズ可能なデザインを選んで、自分で設定することができます。

どんなものがあるかというと・・・

管理画面の「デザインの変更」で、一番下までスクロールして「カスタム可能」をクリックします。

 

 

カスタム可能

すると・・・

カスタマイズ可能

 

意外といっぱいでてきます!

 

 

カスタマイズ可能デザイン

上記であげた2,カスタマイズ可能のデザインの中にも、2種類あります。

①最初からデザインがついていて、CSSをいじらなくてもヘッダーや背景を変えられるもの

②全くシンプルで、自分でCSSを編集していくもの

 

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。

HTMLクイックリファレンス

 

まずは、一番簡単な①の方法をご紹介します。

 

CSSをいじらないカスタマイズ

 

↓こんなデザインが・・・

カスタマイズ前

 

 

↓こうできます。

 

カスタマイズ後

さっそく方法をご紹介しますね。

 

①管理画面の「デザインの変更」から、一番下の「カスタム可能」をクリックし、カスタマイズ可能なデザインの一覧を表示します。

 

②一覧の中から、ベースにしたいデザインを選びます。
ここでは、「Simple Flower」を選びました。※配置は変わる可能性があります。

画像を選ぶ

 

③レイアウトの画面が表示されるので、お好きなカラムとメニュー配置を選び「適用」をクリック

レイアウト決定

 

デザインを簡単カスタマイズするをクリック

適用完了

 

ヘッダー、タイトル、背景を変更できる画面が表示されます。
まずは、わかりやすい背景から変えてみます。

背景を変更する

「背景」の「画像をなしにする」をクリックします。

背景設定

 

すっきりします。
背景なし

背景は、オリジナルの画像にしたり、色をつけたり、テンプレートから選ぶことも可能です。

 

ヘッダー画像を変更する

オリジナルのヘッダー画像に変更したい方は、まずは自分で画像を作ります。
※この方法では画像にタイトル文字を入れることはできません。ヘッダー画像にタイトルを埋め込みたい方はこの後の方法で行います。

サイズは幅が980ピクセル、高さは300ピクセルまでとなります。

作成方法は、こちらの記事を参考にしてください

「ブログやホームページのヘッダー画像を格安で頼む方法」
「アメブロのヘッダーをスマホのアプリで作る方法」

アメブロのヘッダーをスマホのアプリで作る方法①作成したヘッダー画像をアップロードします。「オリジナルの画像」をクリックして、保存した画像をアップロードしてください。オリジナル画像を使う
②追加された画像の上をクリックすると設定できます。アップロードオリジナルのヘッダー画像が設定できました。
タイトル文字の位置や高さなどを変更できますので、画像に合わせて調整してみてください。カスタマイズ後
これだけで充分!という方は、
こんな感じでお好きなカスタマイズ可能デザインをベースにチャレンジしてみてくださいね。以上です。

 
〜その他のアメブロカスタマイズ〜

・タイトル画像に文字を入れたい!
「アメブロにオリジナル画像を設定する方法」
・サイドバーや記事タイトルのラインや、文字を好きな色にしたい!
アメブロでサイドバーや記事タイトルの文字と下線の色を変える方法

まとめ

・アメブロデザインの中には、デザインを編集できるものとできないものがある。

・デザインを編集できるものの中にも、CSSを編集せずにカスタマイズできるものと、CSSの編集をしないとできないものがある。

・CSSを編集せずにカスタマイズできるものは、制限はあるが難しい知識なしで簡単にできる。

・ヘッダー画像に好きなフォントでタイトルを埋め込みたい、細かい部分の色を変えたい!といった場合には、CSS編集可能なデザインを選ぶ必要がある。