Ameba ブログ ヘッダ画像設置方法 マニュアル 胡慶弘 1
著作権について Ameba ブログ ヘッダ画像設置方法マニュアル ( 以下 本冊子と表記 ) は 著作権法で保護されている著作物です 本冊子の著作権は 発行者胡慶弘 ( えびすよしひろ ) にあります 本冊子の使用に関しましては 以下の点にご注意ください 使用許諾契約書 本契約は 本冊子を入手した個人 法人 ( 以下 甲と称す ) と発行者 ( 以下 乙と称す ) との間で合意 した契約です 本冊子を甲が受け取り開封することにより 甲はこの契約に同意したことになりま す 本契約の目的 : 乙が著作権を有する本冊子に含まれる情報を 本契約に基づき甲が非独占的に使用する権利を 承諾するものです 禁止事項 : 本冊子に含まれる情報は 著作権法によって保護されています 甲は本冊子から得た情報を 乙の書面による事前許可を得ずして出版 講演活動および電子メディアによる配信等により一般公開することを禁じます 特に当ファイルを第三者に渡すことは厳しく禁じます 損害賠償 : 甲が本契約の第 2 条に違反し 乙に損害が生じた場合 甲は乙に対し 違約金が発生する場合 がございますのでご注意ください 契約の解除 : 甲が本契約に違反したと乙が判断した場合には 乙は使用許諾契約書を解除することができるも のとします 責任の範囲 : 本冊子の情報の使用の一切の責任は甲にあり この情報を使って損害が生じたとしても一切の 責任を負いません 2
目次 1 章 : はじめに 2 章 : ヘッダ画像設置方法 3 章 : 最後に 3
1 章 : はじめに この度は 胡慶弘のレポート Ameba ブログ ヘッダ画像設置方法マニュアルをダウンロードして頂き 誠にありがとうございます 心より感謝致します 本レポートは実践してナンボの内容となっていますので ぜひ実践してみてください その際 今のデザインが変更されてしまう事が考えられます 必ず CSS やフリースペースはバックアップを取るようにしてください 4
2 章 : ヘッダ画像設置方法 右上のアイコンをクリックします デザインの変更 をクリックします 5
現在適用中のデザインが表示されます ページ右下にあるカスタム可能を選択します 6
カスタム可能デザインが表示されます 今回はベーシックオレンジを例に説明して行きます 7
クリックすると 以下の画面のようになります レイアウトを選択し 適用する をクリックします 適用が完了すると 以下の画面に遷移します 8
ブログを確認する をクリックし デザインの適用を確認します 正しく変更されています 次に デザインを簡単カスタマイズする をクリックします 9
ブログ上部にカスタマイズ出来る事が表示されます 必要に応じて入力して行きます オリジナル画像を使う をクリックし 画像を選択します 配置を中央にしてバランスを合わせます ヘッダの高さを変更し ヘッダ画像が一番きれいに表示され高さを調整します 高さは 300pxまでです 10
ブログタイトルと説明文の文字サイズや文字色を選択します 配置場所も設定できるので 一番都合の良い場所に移動させます 簡単カスタマイズの場合 CSS の変更が出来ないため ブログタイトルを非表示にすることができません 今回はヘッダデザインがグレーなので 出来ませんがヘッダデザインが白などの場合は 文字色を白にすることで見えにくくすることが可能です 今回はブログタイトルと説明文を中央に設定し 文字色は青色にしました 11
続いて 背景の設定をします オリジナル画像 もしくはテンプレートからデザインを選択します オリジナル画像を選択した場合です 少し分かりにくいかもしれませんが オリジナル画像を繰り返し並べるようにしています 画像をつかう場合は 境界線に違和感が出ないように注意が必要です 12
テンプレートから選択する場合は ピンクの水玉部分をクリックし 背景画像をテ ンプレートから選びます 今回は緑の芝生を選択してみました 13
最後にデザインの変更を保存すれば 出来上がりです 更にブログタイトルの文字色を見えにくくしてみました 14
デザインをしっかりと考えて 変更可能箇所に当てはまるように設定すれば 簡単カスタマイズでも見映えの良いブログデザインを作成することが出来ます 再度変更したい場合は デザインの変更からカスタマイズをクリックしてください 15
次により柔軟にデザインを変更したい場合の説明です 先ほどのヘッダ画像に タイトルやサブタイトルが表示されるのが嫌な方はコチラで設定をしてください デザインは CSS 編集用デザインを選択します レイアウトを選択し 適応する をクリックします 16
まずは ブログを確認する をクリックします すると このように殺風景なブログができます 17
次に CSS の編集をする をクリックします まずはヘッダ画像をアップロードします 参照をクリックし 画像を選択し アップロードをクリックします 18
アップロードが完了すると ヘッダ画像が表示されます (1-2) ブログタイトル文字の前にヘッダ画像表示用のコードを挿入します 19
/* ヘッダ画像設置 --------------------------------------------*/ #header,.skinheaderarea{ background-image:url( ヘッダ画像の URL); background-repeat:no-repeat; /* 繰り返さない */ background-position:center top; height:200px; /* 高さはヘッダ画像の高さにより調整 */ } ヘッダ画像の URL は 下の画像の青い四角で囲まれた部分の URL です クリックすると選択できますので Ctrl+C でコピーしてください ヘッダ画像の URL と記載されている所に Ctrl+V で貼り付けをします 20
作成したコードを CSS に追加します 一番下の表示を確認するをクリックします 変更後のイメージが表示されます 高さなどが合わない場合は 調整を行います 21
このように表示されました 特に問題がないので 保存をクリックします 22
今回はタイトルとサブタイトルを消したいので CSS を修正します 今回はタイトルとサブタイトルを消したいので CSS を修正します /* skintitle ブログタイトル文字 */.skintitle,.skintitle:visited,.skintitle:hover,.skintitle:focus{ color:#000000; font-weight:bold; font-size:2.11em; /* ブログタイトル文字を非表示に変更 */ visibility:hidden; } /* skindescription ブログの説明文字 */.skindescription{ color:#333333; /* ブログサブタイトル文字を非表示に変更 */ visibility:hidden; } 23
このようになります 24
先ほどと同様に表示確認をしてみます タイトル文字とサブタイトル文字を非表示にすることが出来ました その他 背景などの変更も出来ますが 今回はヘッダ画像設置マニュアルで すので 割愛させて頂きます CSS の編集をすれば このようにメニューバーを作成することも出来ます 25
他にもマウスが載っているときは別の画像を表示することも出来ます 通常時 マウスが乗っている時 26
CSS の設定や画像の作成など ご要望や質問がございましたら お気軽に連 絡ください 分かりやすく説明させて頂きます (^^ 本レポートを最後までお読みいただいた方には特別プレゼントがあります デザイン料金割引プレゼント ヘッダ画像作成は通常 5,500 円で対応させて頂いております 今回はプレゼントとして 以下の金額で対応致します ヘッダ画像作成特別価格設定 作成料金 4,000 円 必ずレポートを見たと伝えてください 更に アメーバブログカスタマイズやその他デザイン案件についても特別価格 で対応致します 以下のアドレスに直接ご連絡をお願い致します hiro.liberty@gmail.com 件名を以下に設定頂けるとスムーズです 件名 : デザインレポート特典について 27
3 章 : 最後に この度は 胡慶弘のレポート Ameba ブログ ヘッダ画像設置方法マニュアルを最後までお読み頂き 誠にありがとうございます 本冊子が あなたに何かしらの気付きや学びを与える事を 心から願っています またお会いできる日を楽しみにしております! Facebook にも登録していますので メッセージを頂けると幸いです http://lifesiz.com/fb_ebisu 28