先日、「アメブロの規約が厳しくなったから、バックアップを取りましょう」という記事を書いたところ、多くの「いいね」を頂きました。

https://www.healing-solutions.jpblog/archives/610

ありがとうございます。

ただ、同時に多くの方に不安を煽ってしまったようです。
すみません。

アメブロ自体が悪いわけではないですし、今もサロンの活動にとって有益なブログサービスの１つであるのは間違いないと思います。

ただ、何か起こった時に困らないためにも、バックアップは取っておきましょうね・・という気持ちを込めて、バックアップの方法をお伝えさせて頂きました。

 

手のひらを返して、アメブロ活用法を（笑）

弊社は、フットワークが軽いことで有名なので（一部地域のみが対象となります）
今度は、アメブロのカスタマイズ方法をお伝えします。

コピペだけで実現する便利な無料コード付き。

 

アメブロのカスタマイズといえば、一番大きな部分はヘッダー画像。

ヘッダー画像の変更方法は、以下の３つのステップで対応できます。

1. ヘッダー画像を準備する
2. ブログの設定を変える
3. ブログのデザイン設定（CSS）を変える

この３つと、おまけの「サイドメニューのタイトルを変える」を含めた、４つについて、
今回も無料で、すべて公開して行きます。

アメブロのカスタマイズは、やろうと思えば色んなことが可能ですが、

今回はサロンオーナーさんに特化して、できるだけシンプルな方法をお伝えします。

 

ヘッダー画像を準備する

まずは、ヘッダーに使用する画像を準備します。

アメブロは、現在のデザインでは横幅が980pxとなっています。

今後、変更する可能性もありますが、まずはこの980pxで画像を作ります。

注意点としては、アメブロの通常テキストをどこに配置するか決めることです。

 

「アメブロの通常テキストは、画像で消しちゃう」という手法もあるんですが、
Googelに「隠しテキスト」と判断されると、順位が上がらなくなる場合もあります。

多くの場合は、大丈夫みたいですが、今回はせっかくなので、
アメブロのテキストを活かせるようにスペースを準備しておきましょう。

サロンらしい画像を配置して行きます。

この時に、PhotoShopなどの画像編集ソフトがあると便利です。

今は、1000円／月　から導入することができるので、期間を区切って使用するのも方法です。

 

背景にサロンの写真を配置してみます。

うん、実にサロンらしい。

実際に、背景に使用する画像は、こんなイメージとなります。

写真を配置して、ロゴマークを置いて、テキストを置いただけです。

今回は、高さを350pxにしてみました。

 

 

ブログの設定を変える

今度は、アメブロのほうでデザイン変更可能なテーマを選択します。

まずは、ブログを書く画面を出します。

いろんな入り口はあると思いますが、マイページのプロフィールの下に並んでいるここから入ることができます。

 

ブログを書く画面の左にある、「デザインの変更」をクリックします。

 

すると、いろんな魅力的なデザインが並びます。

 

ただ、この中から選んでしまうと、ヘッダーのカスタマイズができないので、
ぐっとこらえて、一番下を観ます。

そこには、「カスタム可能デザイン」というものがあります。

この中のデザインテーマは、ヘッダーのカスタマイズが可能なので、ここから選択をします。

 

かわいいので、試しに「Simple Flower」をクリックしてみます。

うん、かわいらしい感じですね。これで保存をしてみましょう。

保存をすると、「簡単カスタマイズ」という項目が出てきます。

ここで、簡単にカスタマイズできるようです。

決められる項目は、

• ヘッダー部分
• タイトル部分
• 背景

のようです。

ヘッダーの高さを350pxに設定して、みましょう。

 

 

・・・怒られた（笑）

 

そうなんです。

アメブロの「簡単カスタマイズ」だと、ヘッダーの高さは300px以内にしなければいけません。

300px以下でヘッダーのデザインを作る場合は便利なんですが、それ以上のキャッチーな画像を使う場合は、別の方法をとる必要があります。

それが、「CSS編集用デザイン」です。

 

CSS・・・だと・・・。

カスタム（C）・・したくて（S）・・しょうがない（S）。
※正しくは、カスケード・スタイル・シート、カスケーディング・スタイル・シート　のようです。

 

この禁断の扉を開く必要があります。

さぁ、あなたも勇者の剣を握りしめ、大魔王ミルドラースの待つCSSの世界へ一歩踏み出しましょう。

 

CSSの扉を開く

大魔王ミルドラースがいるCSSの世界へ行くには、「カスタムの扉」を開く必要があります。

それには、「カスタム可能デザイン」の、左上に君臨するこのボタンを押す必要があります。

 

クリックすると、まったく味気ないブログデザインが出てきます。

これこそが、大魔王に色彩を奪われてしまった白の世界。

CSSで編集可能なデザインなのです。

あなたはここで、ヘッダー画像の兜と、CSSの剣と、サイドバーの盾を入手する必要があります。

 

ヘッダー画像の兜を入手する

まずは、ヘッダー画像をアメブロに登録してみましょう。

いよいよ、「CSSの編集」から、CSSの扉を開きます。

すると、画像をアップロードするための画面が表示されます。

ファイルを選択から、先ほど作った画像をアップロードします。

アップロードが完了すると、アップロード画面の下に、画像が表示されます。

「この画像のパス」という表示の下に、黄色いボックスがあり、その中に画像のURLが入っているのがわかります。

今回、画像は

http://stat.blogskin.ameba.jp/blogskin_images/20140222/09/b6/99/p/o09800350blogstyle-test031393030382322.png

という場所にあることがわかりました。

この地図を元に兜を探せば、ヘッダー画像の兜が手に入ります。

 

CSSの剣を手に入れる

さて、いよいよCSSの剣を取りに行きましょう。

アップロードした画像の下には、こんなボックスがあります。

うぐ・・・なにやら大魔王が強力そうな呪文を唱えていますね。

めげずに一番下までスクロールすると、「その他、拡張があれば記述」という部分があります。

ここが、大魔王の弱点です。ここに、一気に呪文を唱えましょう。

 

ヘッダー画像の枠を広げる呪文

 

/* ▼ヘッダー画像の高さを指定 */
#header,
.skinHeaderArea{
    height:350px;
}

 

ヘッダー画像を入れる呪文

/* ▼ヘッダー画像を指定 */
#header,
.skinHeaderArea{
    background-image:url(先ほどの画像URL);
    background-repeat:no-repeat;
    background-position:center top;
}

 

まずは、ここまでの呪文を唱えます。

これでブログを確認すると、画像がはいっています。

次は、タイトルや、説明を整える呪文を唱えます。

 

タイトルと説明位置を決定する呪文

タイトルの位置を下げたいので、上部に空白を入れます。

また、左側にも少し空白が欲しいので、左にも空白を入れるようにします。

/* ▼ブログの説明の位置を指定 */
.skinBlogHeadingGroupArea{
    text-align: left;/*テキストを左寄せ*/
    margin-top: 150px;/*上部の空白*/
    margin-left: 25px;/*左部の空白*/
    width: 300px;/*説明の横幅*/
}

これで、タイトルと説明が、いい感じの場所に収まりました。

数値を変えて、チャレンジしてみてください。

 

テキストのスタイルを決定する呪文

ただ、テキストが大きすぎたり、色がいまいちなので、この辺りを調整します。

タイトルの色や大きさを調整

/* ▼ブログのタイトルのデザイン */
.skinTitle, .skinTitle:visited, .skinTitle:hover, .skinTitle:focus{
    color: #604638;/*色を指定*/
    font-size: 140%;/*フォントの大きさ*/
}

説明の色や大きさを調整

/* ▼ブログの説明文のデザイン */
.skinDescription{
    color: #604638;/*色を指定*/
    }

 

すると、ヘッダーのデザインにマッチしてきました。

 

数値を変えて、テキストの折り返しなどを調整してみてください。

これで、CSSの世界は平和を取り戻したかのように思えます。

しかし、全体を観て見ると・・・

 

なんか寂しいっす。

どうやら、大魔王は第二形態まで倒さないといけないようです。

 

背景を設定してみる

背景を設定するだけで、ぐっとレベルをあげることが可能です。

今回は特別に、アメブロの背景に使える４つの色パターンを準備しておきました。

画像を右クリックでダウンロードして、自由にお使い下さい。

ピンク系デザイン

/* ▼全体の背景を指定 */
.skinFrame{
    background-color: #FFEEED;
    background-image: url(背景画像のURL);
    background-repeat: repeat-y;
    background-position: center;
}

 

ブラウン系デザイン

/* ▼全体の背景を指定 */
.skinFrame{
    background-color: #CBC0A6;
    background-image: url(背景画像のURL);
    background-repeat: repeat-y;
    background-position: center;
}

 

グリーン系デザイン

/* ▼全体の背景を指定 */
.skinFrame{
    background-color: #DDECDB;
    background-image: url(背景画像のURL);
    background-repeat: repeat-y;
    background-position: center;
}

 

ブルー系デザイン

/* ▼全体の背景を指定 */
.skinFrame{
    background-color: #E6F5F8;
    background-image: url(背景画像のURL);
    background-repeat: repeat-y;
    background-position: center;
}

 

背景をつけると、デザインがぐっとレベルアップしますね。

これで、大魔王のHPをかなり奪ったはずなのですが・・・どうやら、まだ倒れていないようです。

サイド部分がまだまだ味気ない・・。

いよいよ、大魔王は第三形態まで、姿を現しました。

 

 

 

サイドメニューのタイトルデザインを変える

とどめに、サイドメニューのデザインを変えてみましょう。

サイドメニューは、こんなタイトルを背景に入れてみます。

この画像は、オリジナルなので使っちゃダメよー、ダメダメ。
出典：　日本エレキテル連合様

 

/* ▼サイドメニューのタイトル設定 */
.skinMenuHeader{
    background-image: url(サイドメニューの画像URL);
    background-repeat: no-repeat;
    font-size: 120%; /*フォントの大きさ*/
    font-weight: bold; /*フォントを太文字に*/
    height: 30px; /*メニュータイトルの高さ*/
    display: block;
    padding-left: 20px;
    padding-top: 12px;
    padding-bottom: 0px;
}

 

これで、サイドメニューのタイトルも、レベルアップしました。

 

そしてCSSの世界には、平和が訪れたのでした。

しかし、浜の真砂は尽きるとも、第二第三の大魔王がやってくるのであった・・・（もうええっちゅーねん）
※出典：　石川五右衛門様　辞世の句

 

まとめ

今回は、サロン向けということで、比較的わかりやすい内容にまとめるようにしました。

ただ、アメブロはヘッダーにメニューを表示したり、色々とカスタマイズが可能です。

さらなるパワーアップを目論む方は、ぜひお近くのゲームショップ　アメブロ対応WEB業者にご相談下さい。