アメブロにヘッダーをつける方法 | サロンのホームページ制作 Healing Solutions

アメブロにヘッダーをつける方法

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

https://www.healing-solutions.jp/blog/archives/610

ありがとうございます。

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

MS251_hontosumimasenkyoushi500

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

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

 

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

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

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

 

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

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

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

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

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

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

 

ヘッダー画像を準備する

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

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

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

ameblo01

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

 

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

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

ameblo02

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

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

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

スクリーンショット 2014-02-22 7.48.47

 

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

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

ameblo03

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

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

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

ameblo04

 

 

ブログの設定を変える

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

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

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

スクリーンショット 2014-02-22 9.07.40

 

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

スクリーンショット 2014-02-22 9.09.38

 

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

スクリーンショット 2014-02-22 9.11.05

 

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

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

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

スクリーンショット 2014-02-22 9.12.20

 

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

スクリーンショット 2014-02-22 9.14.24

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

スクリーンショット 2014-02-22 9.15.49

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

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

スクリーンショット 2014-02-22 9.16.28

決められる項目は、

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

のようです。

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

スクリーンショット 2014-02-22 9.17.26

 

 

・・・怒られた(笑)

スクリーンショット 2014-02-22 9.18.45

 

そうなんです。

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

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

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

 

CSS・・・だと・・・。

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

 

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

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

 

CSSの扉を開く

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

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

スクリーンショット 2014-02-22 9.29.03

 

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

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

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

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

スクリーンショット 2014-02-22 9.30.11

 

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

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

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

スクリーンショット 2014-02-22 9.49.13

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

スクリーンショット 2014-02-22 9.52.31

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

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

スクリーンショット 2014-02-22 9.53.08

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

今回、画像は

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

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

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

 

CSSの剣を手に入れる

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

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

スクリーンショット 2014-02-22 9.55.10

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

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

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

スクリーンショット 2014-02-22 9.56.32

 

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

 

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

 

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

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

 

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

スクリーンショット 2014-02-22 10.12.35

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

スクリーンショット 2014-02-22 10.14.42

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

 

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

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

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

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

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

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

スクリーンショット 2014-02-22 10.20.10

 

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

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

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

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

説明の色や大きさを調整

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

 

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

スクリーンショット 2014-02-22 10.26.17

 

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

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

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

スクリーンショット 2014-02-22 10.28.38

 

なんか寂しいっす。

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

 

背景を設定してみる

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

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

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

ピンク系デザイン

ameblo_bkg01

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

 

ブラウン系デザイン

ameblo_bkg02

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

 

グリーン系デザイン

ameblo_bkg03

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

 

ブルー系デザイン

ameblo_bkg04

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

 

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

スクリーンショット 2014-02-22 10.42.11

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

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

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

 

 

 

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

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

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

side_bkg

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

 

/* ▼サイドメニューのタイトル設定 */
.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;
}

 

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

スクリーンショット 2014-02-22 10.54.26 スクリーンショット 2014-02-22 10.54.37

 

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

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

 

まとめ

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

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

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

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る
こんな記事も読まれています
mautic is open source marketing automation