先日、「アメブロの規約が厳しくなったから、バックアップを取りましょう」という記事を書いたところ、多くの「いいね」を頂きました。
https://www.healing-solutions.jpblog/archives/610
ありがとうございます。
ただ、同時に多くの方に不安を煽ってしまったようです。
すみません。
アメブロ自体が悪いわけではないですし、今もサロンの活動にとって有益なブログサービスの1つであるのは間違いないと思います。
ただ、何か起こった時に困らないためにも、バックアップは取っておきましょうね・・という気持ちを込めて、バックアップの方法をお伝えさせて頂きました。
手のひらを返して、アメブロ活用法を(笑)
弊社は、フットワークが軽いことで有名なので(一部地域のみが対象となります)
今度は、アメブロのカスタマイズ方法をお伝えします。
コピペだけで実現する便利な無料コード付き。
アメブロのカスタマイズといえば、一番大きな部分はヘッダー画像。
ヘッダー画像の変更方法は、以下の3つのステップで対応できます。
この3つと、おまけの「サイドメニューのタイトルを変える」を含めた、4つについて、
今回も無料で、すべて公開して行きます。
アメブロのカスタマイズは、やろうと思えば色んなことが可能ですが、
今回はサロンオーナーさんに特化して、できるだけシンプルな方法をお伝えします。
ヘッダー画像を準備する
まずは、ヘッダーに使用する画像を準備します。
アメブロは、現在のデザインでは横幅が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の世界は平和を取り戻したかのように思えます。
しかし、全体を観て見ると・・・
なんか寂しいっす。
どうやら、大魔王は第二形態まで倒さないといけないようです。
背景を設定してみる
背景を設定するだけで、ぐっとレベルをあげることが可能です。
今回は特別に、アメブロの背景に使える4つの色パターンを準備しておきました。
画像を右クリックでダウンロードして、自由にお使い下さい。
ピンク系デザイン
/* ▼全体の背景を指定 */ .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業者にご相談下さい。