テーマ:

こんにちは!やんやんです(・ω・)ノ

いよいよブログの顔ともいうべき「ヘッダー画像の変更」に挑戦です。


カスタマイズテスト用ブログを用いて説明していきます。

カスタマイズテスト用ブログはhttp://ameblo.jp/sample-01/ です。


まずヘッダーの位置を確認してみます。




メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)



タイトルとブログの説明の位置がヘッダー画像を置く場所になります。

ヘッダーの幅は初期値で980px(ピクセル)なので、今回はそのまま利用♪

ヘッダーの高さは任意で設定できるので、好きな大きさの画像を作ってください。


↓こんな感じの画像を作ってみました。



メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)


それでは、ヘッダー画像を表示させる手順です。


1.メニューの[①ブログを書く]→[②デザインの変更]→[③CSSの編集]を選択。


メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)

2.(1)「①ブログデザインヘッダ・背景用画像の追加」より画像をアップロード

  (2)②にアップされた画像を確認

  (3)③に表示された画像のURL(画像の場所を示すアドレス)を確認



メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)

3.2と同ページの下部の「現在使用中のブログデザインCSS」の中のCSSを編集します。

  (1)CSSをスクロールして、「(3-2) ブログヘッダー」を探してください。


メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)

4.下記のように書き換えて、下部の保存ボタンを押してください。 


【変更前】

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */


【変更後】

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height:278px;/*作成した画像の高さを指定*/
background-image:url(画像のURL);/*画像の場所URL*/
background-repeat:no-repeat;/*画像のリピート無し*/
background-position:top center;/*画像の位置は上寄せ・中央寄せ*/
}/* ←ブログヘッダーに背景画像を敷きたいとき */




ちなみに画像のURLは2-(3)にて表示されたURLを利用してください。


サンプルブログ(http://ameblo.jp/sample-01/ )の場合はこうなっています。

【変更後】

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height:278px;;/*作成した画像の高さを指定*/
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20111103/17/68/b2/j/o09800278sample-011320307717810.jpg);/*画像の場所URL*/
background-repeat:no-repeat;/*画像のリピート無し*/
background-position:top center;/*画像の位置は上寄せ・中央寄せ*/
}/* ←ブログヘッダーに背景画像を敷きたいとき */



これでヘッダー画像が追加されました。


メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)



ヘッダーに写真が入るだけでかなり雰囲気が変わりますね。


画像のURL指定ですが、上記ではアメブロにアップして利用する方法を用いましたが

アメブロにアップすると大きい画像の場合、画質が劣化することがあります。


もし既にホームページをお持ちの場合はそこに画像をアップしてURLを指定するほうがいいかもしれません。


【変更箇所】

background-image:url(http://www.自社のドメイン.com/フォルダ名/画像名.jpg);/*画像の場所URL*/


画像とブログタイトル&説明文が重なっているので、
次回ブログタイトル位置と、説明文の位置調整を行います(*・▽・)ノ


テーマ:

まずはマイページにログイン。

1.カスタマイズ準備
(1)メニューの[①ブログを書く]→[②デザインの変更]→[③カスタム可能]を選択。

メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)


(2)「カスタム可能」デザインの中から、CSS編集用デザインを選択。

メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)


(3)今回は[①2カラム・メニュー右]を選択し、[②適用]。

メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)



2.タイトル設定
(1)メニューの[①ブログを書く]→[②アメブロの設定]
(2)「タイトル」と「説明」を入力

メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)



これで準備完了です。

実は「タイトル」の設定にはSEO的に非常に重要な意味があるんです!!

SEOとは「検索エンジン最適化」と呼ばれるもので、
簡単にいうと、「Yahoo!やGoogleなどの検索で上位表示されやすくしよう!」というもの。

その中でもタイトルはHTMLページタイトルとして利用されるので、
非常に重要な検索キーワード対策になります。


ですから、ブログ自体の存在を知らないと探せないタイトルで書くと(例えば「やんやんのブログ」)、
他のユーザーの検索に表示されない、つまり見つけてもらえない事態となります。

スクールなら「英会話なら〇〇スクール-東京都港区」、サロンなら「〇〇スタッフブログ-大阪市中央区の美容室」など
検索させたいスクール(またはサロン)名とキーワード、そして地名を入れる必要があります。

アメブロは読者つながりなどで、アクセス数を増やすという方法もありますが、
できれば通常の検索にも表示されるよう、一工夫しておくとよい思います。

メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)


テーマ:
こんにちは!やんやんです(・ω・)ノ
今日からアメブロカスタマイズの記事を更新していきます。
HTMLやCSSの知識が全くない方にはちょっと難しいかも知れませんが、
できるだけわかりやすく説明していきますので、一緒にブログカスタマイズ頑張りましょう!

まずはじめに!!
「アメブロは無料ブログサービス」です。
無料の理由(ワケ)は「あなたのブログに広告が表示される」からです。

これから新たにブログを始める方は初めから大きめの広告がデフォルトで表示されますが、
既にアメブロを利用されている方はサイドメニューに控えめなバナー広告と記事内、フッターにテキスト広告がある程度だと思います。

これがアメブロカスタマイズのためにデザインを変えると↓↓↓

メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)

(ブルーの部分がアメブロの広告スペース)

という感じに、広告が非常に目立つブログに早変わり(・ω・;)

広告をできるだけ表示させたくない方は、カスタマイズをするときはご注意ください!
現在使っているブログデザイン(スキンテンプレート)は、変更するまでそのまま使えますが、
一度デザインを変えると、以前のブログデザイン(スキンテンプレート)に戻すことはできません。

だからといって、アメブロをカスタマイズしないほうがよいのか?といったら答えは「NO!」です。
カスタマイズによって、ブログはよりスクールやサロンの魅力を伝えられるブログに変わります!


「んや、俺の(あたいの)ブログには絶対広告いらないんだ!!」という方にはアメブロが月額980円で広告を非表示にするサービスをしているので、検討してみるのもいいかもしれません。

個人的な感想としては、広告はそのまま表示させてていいんじゃないかと思います。

理由としては3つ

理由①:ブログを訪問ユーザーは広告に慣れ、飛ばし読み(広告を意識していない)する傾向がある。
理由②:月額980円なら年間11,760円なので、同じ金額で新しいドメインとサーバーを借りてホームページを持つ事が可能。
理由③:広告により訪問ユーザーを迷わせないように、カスタマイズによってナビゲーションを導入すればよい。

からです。

たまに広告の位置を変更や非表示・文字を見えにくくするカスタマイズをされているブログもありますが、
アメブロの規約違反になるので避けておいたほうがいいでしょう。

広告表示についてあまり難しく考えるとブログ自体が重荷になっていまします。
無料で自サービスがアピールできる1つのアイテムと捉えて、
一緒に活用できれば!と思っています。

ということで、アメブロカスタマイズ一緒にがんばりましょう!!

メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)



テーマ:
こんにちは!やんやんです(・ω・)ノ

ビーダッシュのお客様はアメブロを利用されている方が多いので、
ただいま休日を利用してカスタマイズ用テンプレートを作成しております。

しばらくの間、ブログの仕様がコロコロ変わると思いますが、
予めご了承ください(>ω<;)スミマセン

アメブロカスタマイズの目的はズバリ「ナビゲーション導入!」

スクールであればコース紹介、サロンであれば施術例など、
ブログの訪問者に是非読んでほしい記事やテーマがあると思います。
しかしながら、ブログの記事は新しい日付順に表示する仕組み・・・。

そこでグローバルナビゲーション(横メニュー)を導入して、テーマ別や見せたい記事に直接リンクさせたり、
メッセージボード・フリースペースでバナーやギャラリーを導入し、特長をアピールしよう!というものです。

ある程度形になったら少しずつカスタマイズ方法を記事にしていきたいと思います。


しかし、アメブロの仕様が色々と変わっていてビックリでした。
その1つが広告。

アメブロさん、ちょっと広告多すぎませんか?

↓現在の広告表示

メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)

広告だらけです・・・。
特に上部とサイドの大きな広告バナーが目立ちます。

無料サービスなので、仕方ないですね。
(広告を非表示にするには月額980円・・・\高いョ・・・)

以前よりアメブロを利用していて、あまり大きく広告表示したくない場合のカスタマイズにはご注意ください!
デザインテンプレートを変えると自動的にドデカイ広告バナーがもれなくついてきます。



テーマ:

こんにちは!やんやんです(・ω・)ノ


寒いのか暑いのか、ビミョーな季節ですね。

夏はバラバラにお昼寝していた我が家の猫も、こんな感じ↓


メイクサロン・スクール集客サポートブログ b-dash(ビーダッシュ)


昨日、レイトショーで「猿の惑星-創世記(ジェネシス)」を観てきました!


やっぱり虐待シーンが辛かったです(;ω;)シーザー・・アゥゥ

猿の惑星シリーズとは全く別モノだったのですが、観に行ってよかったです。

映画では本物のお猿さんを1匹も出演させず動物愛護団体から賞をもらっているとか。

言葉がなくてもお猿さんの豊かな表情のCGにどっぷり引き込まれました。


これから観に行かれる方はエンドロール始まっても、すぐ帰っちゃダメですよ!


Amebaおすすめキーワード