まずは「ペイント」でヘッダー作成
ぷちアメブロカスタマイズ
はじめに
【推奨環境】 このレポート上に書かれている URL はクリックできます。できない場合は最 新のAdobeReader をダウンロードしてください。(無料) http://www.adobe.co.jp/products/acrobat/readstep2.html 【著作権について】 このレポートは著作権法で保護されている著作物です。 下記の点にご注意戴きご利用下さい。 このレポートの著作権は作成者に属します。 著作権者の許可なく、このレポートの全部又は一部をいかなる手段におい ても複製、転載、流用、転売等することを禁じます。 このレポートの開封をもって下記の事項に同意したものとみなします。 このレポートは秘匿性が高いものであるため、著作権者の許可なく、この 商材の全部又は一部をいかなる手段においても複製、転載、流用、転売等 することを禁じます。 著作権等違反の行為を行った時、その他不法行為に該当する行為を行った 時は、関係法規に基づき損害賠償請求を行う等、民事・刑事を問わず法的 手段による解決を行う場合があります。 このレポートに書かれた情報は、作成時点での著者の見解等です。著者は 事前許可を得ずに誤りの訂正、情報の最新化、見解の変更等を行う権利を 有します。 このレポートの作成には万全を期しておりますが、万一誤り、不正確な情 報等がありましても、著者・パートナー等の業務提携者は、一切の責任を 負わないことをご了承願います。 このレポートを利用することにより生じたいかなる結果につきましても、 著者・パートナー等の業務提携者は、一切の責任を負わないことをご了承 願います。もくじ 1. 作成前に ... 5 初心者なのに、無理をしていませんか? ... 5 ちょっとしたカスタマイズ ... 5 2. 早速始めましょう! ... 6 まずはアメブロにログインしてください ... 6 3. 写真を2枚用意しよう! ... 7 4. 画像編集ソフト「ペイント」を使おう! ... 8 もう1枚もやってみよう ... 13 連絡先の記入場所を作ろう ... 14 5. さっそく、アメブロにアップしてみよう♪ ... 16 ヘッダーをアップロードする ... 16 6. 最後に ... 19 発行者情報 ... 20
はじめまして、レポートをダウンロードしていただき、ありがとうございます。 さとう未来(みく)と申します。 私は、現在、セラピストで独立起業し、さらなる複数の収入源を持つ事が重要 と考え、国内転売、アフィリエイトを行っています。 とくにセラピストとして独立起業した時、広告費は一切かけず、無料ブログと 無料のホームページだけで集客に成功しました。 この経験を生かして、これから自分を表現して収入を得たいと思っている方に、 情報提供をしようと作成しました。 なお、こちらのレポートでは、Windows にもともと内臓されている、「ペイント」 という画像編集ソフトを使って、アメブロのヘッダーを作成する方法を公開し ます。 それでは、どうぞよろしくお願い致します。
1. 作成前に
初心者なのに、無理をしていませんか?
自宅でサロンや教室を始めようとした時、欠かせないのがホームページです。 ですが、自分で一から作るとそれ相当の勉強が必要になってくるので、いつま でたっても始められません。 当たり前の話ですが、始めたって、すぐに明日からお客さんがじゃんじゃん来 るわけはないのです。 やはり、地道に宣伝をして、お客様になっていただくものです。 まずは、一番簡単な方法で、スタートを切るのです。 やっていくうちに、改良していけばいいんですから・・・。 ここでは、初心者の方におすすめな、アメブロを使うことです。しかも、アメ ブロをホームページのように使う方法です。 アメブロは無料ですし、利用者も圧倒的に多いです。 お店ブログには非常に適しています。 ですので、いきなり無理をせず、まずはアメブロを使っていきましょう。 ちょっとしたカスタマイズ
アメブロをホームページ風にするには、カスタマイズしなければいけません。 ですが、このカスタマイズも、本当に少しだけやればいいのです。 ① トップ画像を変える ② メニューボタンを作る ③ サイドバーをいじる これだけで十分です。 必要以上のカスタマイズは時間がもったいないです。 まずは、必要最低限のカスタマイズですまし、一日も早く、まだ見ぬお客様に公開できるようにしましょう。
2. 早速始めましょう!
まずはアメブロにログインしてください
ログインして、管理画面のデザインの変更をクリックして下さい。 デザインの変更を押すと、いろいろなデザインを選べます。 今は、お好きなデザインに設定されていると思いますが、 ヘッダー(トップの画像)を変更するためには、決められたデザインを使用し ないといけません。 下のほうを見ると こうゆう画面がありますので、カスタム可能を選んでください。一番左上にある、「CSS 編集用デザイン」を選んでください。 このようになっていたら事前準備はOK です。 それでは早速、ヘッダーを作っていきましょう♪
3. 写真を2枚用意しよう!
自分で撮った写真を使う 写真は何でもいいんですが、なるべく自分のイメージに合うものがいいです。 マッサージのお店なのか、ネイルのお店なのか、その写真を見て、一発でわか るほうがいいです。もし、モデルさんがいるのなら、お願いして、撮らせても らってもいいです。 無料写真素材を使う ネット上には、無料で使える写真素材がたくさんあります。 「写真 無料」で検索するとたくさん出てきます。 ここでは、写真AChttp://www.photo-ac.com/というサイトがあるので、 こちらを利用します。 サイトにアクセスして、メールアドレスを登録し、ログインして下さい。 たくさん写真が出てきましたね。 自分のイメージに合う写真を2枚ダウンロードして、わかりやすい場所に保存 して下さい。4. 画像編集ソフト「ペイント」を使おう!
Windows に元々内臓されている「ペイント」を使う 確かに、ヘッダーは、自分のサイトの顔になるので、じっくり作りたいし、お しゃれなのが良いと思います。でも・・・作れます?自分で。 デザインのセンスって、そう簡単に培われるものじゃありません。 何度も作成してみて、始めてうまくなるものです。 ですので、最初から素敵でかっこいいなんて、目指す必要はないんです。 もしも、最初からかっこよくしたいのであれば、お金を払ってプロにヘッダー だけ作成してもらうことをおすすめします。 でも、今はまだ、変わる可能性がある時に、プロに頼んだらもったいなくない ですか? まずは、自分で作成しましょう! そのためにも、超簡単なペイントでサクっと作ってしまいます。 ペイントを起動しましょう お使いの Windows によって、格納されている場所は違うとおもいますが、通 常は、「アクセサリ」の中にあります。 これを起動すると こういう画面がでてくればOK です。 ベースを作成しよう アメブロのヘッダーは、きれいに見えるであろうサイズが決まっています。 「縦300×横980ピクセル」で作成します。 ペイントは起動していますね。 ① サイズ変更をクリックすると ② サイズ変更と傾斜という画面が出てきます ③ 単位をピクセルに変更して ④ 水平に 980 ⑤ 垂直に 300 ⑥ 縦横比を維持するのチェックを外し、OK を押します。 これが、ベースになりますので、この範囲内に写真を張り付けたり、文字を張 り付けたりします。 作成したベースは、デスクトップなど、わかるところに保存しておいて下さい。
保存した写真を開いてみよう
さきほど、ダウンロードした写真の保存場所はわかりますか? その写真をペイントで開いてみましょう。
該当の写真をダブルクリックして下さい。
開いた写真もサイズ変更します。 ① サイズ変更を選び ② ピクセルを選び ③ 垂直方向のみ300に変更 ④ 縦横比の維持はチェックを入れて下さい。 これで、縦300 ピクセルの写真にサイズ変更できました。 この写真を先ほど保存したベースに貼り付けます。 ① 選択を押し ② 画像全体をドラックします これで、写真自体を選べるようになりました。
写真全体を選択した後、 「切り取り」を押します。 写真が切り取られました。
切り取ったファイルが閉じずに、小さくしておいて下さい。
左の「張り付け」を押すと、ベースの上に、写真が張り付けられます。 ※この時、周りに点線が出ていますが、この状態であれば、場所を移動できま す。 ドラッグして移動し、上書き保存します。 これで1枚分の写真が完成です。
もう1枚もやってみよう
もう1枚も、ペイントから開いて下さい。 同じ手順で開き、サイズ変更のところだけ注意して下さい。 先ほどは、縦のサイズを300ピクセルにしましたが、 今回は、250ピクセルにして見て下さい。 先ほどと同じ手順で、サイズ変更し、切り取り、貼り付け、移動をすると、こ のようになります。これで、写真2枚が貼り付けられました。 このままでもいいのですが、少し寂しいので・・・ 2枚目の写真にピンクの囲いをしてみます。 ① 図形の中の角丸四角を選び、 ② 輪郭を「クレヨン」にしました ③ 色1をピンクにすると このようにピンクで囲われます。
連絡先の記入場所を作ろう
左側の空白部分には、お店の名前などを入れるので、右下に、連絡先を入れま す。電話番号や、メールアドレスです。 ① 真四角の図形を選び④ 右下に枠を作ります。
「A」 の場所を押し、文字入力をしていきます
先ほど作成した、白枠の中に、カーソルを持っていって、
「文字の種類」「フォントサイズ」を変更して、自分の連絡先を入力します。
「地域+簡単なサービス名+店名」 「キャッチフレーズ」を先ほどと同じ手順で入力してください。 ※文字入力の際、フォントには注意して下さい。 DF超極太ゴシック、明朝体など、いろいろな種類があると思いますが、 フォントの先頭に「@」がついているのは、「縦書き」用です。 横書き入力の際は、フォント選びに注意してくださいね。 これでヘッダー作成は終了です。 お疲れさまでした。 ちょっと寂しい気もしますが、最初はこれくらいで大丈夫です。 まずは開業し始めること、やり始めることの方が大切です。
5. さっそく、アメブロにアップしてみよう♪
ヘッダーをアップロードする
ログインし、管理画面から、デザインの変更をクリックして下さい。 先ほど、設定したので、この画面になってますよね? 「CSSの編集」をクリックして下さい。先ほど保存した、ヘッダーをアップロードします。
参照を押して、自分が保存したヘッダーがある場所を選択します。 出来たら、アップロードを押します。
正常に、アップロード出来たら、このようになります。
すぐ下にある、「現在使用中のブログデザインCSS」を少しだけいじります。
この「(3-2)ブログヘッダー」を探し出します。 (真ん中くらい)
赤線で引いてあるところに、先ほどコピーした「画像のパス」を貼り付けます。 その際、( )やその他文字列を消さないように、十分注意して下さいね。 これで保存を押せば終了です。 自分のブログを見てみましょう。 私のブログですが、きちんと反映されました。 いかがですか?ちょっと寂しいけど、そんなにひどいわけでもないですよね? 慣れれば超簡単なので、ペイントもあなどれませんよ。 補足ですが、赤枠で囲ってある部分はグローバルメニューといいます。 ここも、少しカスタマイズが必要になります。 ですが、決して難しくないので、次回にでもお伝えします。