このマニュアル通りに設定すれば、上図のようなデザインテンプレートをアメブロに設定することができます。ヘッダ上部にグローバルメニューも設置できます。

 作業は大きく分けて「1. ヘッダ画像を設定する」「2. CSSを設定する」の2つだけです。※アメブロの仕様により、デザインテンプレートを設定できるのはパソコン用の画面のみです。

 

 

1. ヘッダ画像を設定する

(ア) Pixabayで無料の画像をダウンロードする

 
 まずヘッダー背景となる画像を用意しましょう。自分で撮影した画像でも設定可能ですが、Pixabayなら無料で1,200万枚以上のプロカメラマンが撮影した美しい画像をダウンロードできます。Pixabay(ピクサベイ)であなたの好きな画像を選んでください。

 

 

https://pixabay.com

 

 
 Pixabayは著作権のない画像を共有するクリエイティブコミュニティです。すべてのコンテンツはクリエイティブコモンズCC0の下で公開されています。これにより、たとえ商業目的であっても権利者に許可を求めることなく安心して使用できます。
 これらの画像は商用・非商用を問わずコピー・改変・再配布することができます。利用に関する許諾や使用料の支払いは必要ありません。

しかし画像の中には著作権・肖像権・商標権等に基づき保護されている例外が一部含まれているので注意が必要です。[無料ダウンロード]ボタンの上部に「CC0 Creative Commons 商用利用無料 帰属表示は必要ありません」と表示されている画像は大丈夫です。

 

 

 
 あなたのブログのヘッダに相応しい画像が決まったら、横1120px以上・縦570px以上のサイズの画像をダウンロードしてパソコンに保存してください。

 

 

(イ) 画像をヘッダサイズに合わせてトリミングする

 
 ダウンロードした画像をヘッダ画像のサイズに合わせて横1120px・縦570pxに縮小&トリミングしてください。

自分でトリミングするのが面倒であれば、GraphicParkに依頼することもできます。トリミングを依頼する場合はダウンロードした画像のファイル名を伝えるだけで解るようになっています。(サービスについては後述します)

 

 

(ウ) レイアウトを選択する

 
Amebaマイページへログインして[ブログ管理] → [デザインの設定]画面を開いてください。

 

 

 

 
[デザインの設定]画面下部の[カスタム可能]をクリックして画面を移動してください。

 

 

 

 
[デザインの変更]画面の中でテンプレートを設定できるタイプは全部で4種類ありますが、後述するデザインテンプレートに対応しているのは3つです。その中の一つを選んでください。
※既にデザインをカスタマイズしている場合、別のデザインを適応すると編集内容がリセットされます。ご注意ください。

 

 

リスト スタンダード タイル

 
それぞれのアイコンをクリックするとサンプルブログが表示されます。選んだタイプをメモしておいてください。サンプルブログはパソコンで表示させてください。最もお返しフォロー率の高いレイアウトは「スタンダード」です。

 

 

 
サイドメニューの位置と数を決めてレイアウトを選択し[摘要する]をクリックしてください。タイルに3カラムはありません。選んだレイアウトをメモしておいてください。最も人気が高いのは「2カラムメニュー右」です。

 

 

 

(エ) ヘッダ画像をアップロードする

 
自分でヘッダ画像をトリミングした場合はヘッダ画像をアメブロへアップロードしてください。ヘッダ画像のトリミングをGraphicParkに依頼する場合は後でアップロードします。

[デザインの変更]画面上部の[CSSの編集]をクリックして画面を移動してください。

 

 

 
[ブログデザインのCSSの編集]画面で横1120px・縦570pxにトリミングしたヘッダ画像をアップロードしてください。(1MB以内)

アップロードが完了したら「この画像のパス」の中の文字列を全てコピーしてパソコンの[メモ帳]等に保存してください。
※この画面以外でアップロードすると画像解像度が低くなります。

 

 
「デザインのタイプとレイアウト」・「この画像のパスのコピー」のメモを必ず保管してください。

 

 

2. CSSを設定する

(ア) デザインテンプレートをダウンロードする

 
アメブロのデザインを変更するにはHTML言語・CSS言語の知識が必要になりますが、GraphicParkからデザインテンプレートを購入すれば簡単にヘッダ画像とグローバルメニューを設定することができます。デザインテンプレートは全部で12種類あります。

 

タイプ レイアウト 価格(税別)
 リスト  2カラム・メニュー左 1,000円
 2カラム・メニュー右 1,000円
 3カラム・右ワイドメニュー 1,000円
 3カラム・左ワイドメニュー 1,000円
 3カラム・右メニュー 1,000円
 スタンダード  2カラム・メニュー左 1,000円
 2カラム・メニュー右 1,000円
 3カラム・右ワイドメニュー 1,000円
 3カラム・左ワイドメニュー 1,000円
 3カラム・右メニュー 1,000円
 タイル  2カラム・メニュー左 1,000円
 2カラム・メニュー右 1,000円
 
GraphicParkで販売しているデザインテンプレートセットの内容は「ヘッダ画像設定用:ソースコード1」と「グローバルメニュー設定用:ソースコード2」です。

 

 

(イ) ヘッダ画像のファイル名を返信する

 
画像のトリミングをGraphicParkへ依頼する場合は、Pixabayからダウンロードした画像のファイル名を入力してinfo@graphicpark.org宛に「トリミング希望」と書いてメールしてください。ファイル名で画像を検索できますので画像を添付する必要はありません。横1120px・縦570pxにトリミングされたヘッダ画像がメールで納品されます。トリミング料金は1,000円(税別)です。

 

 

 

(ウ) 納品されたヘッダ画像をアップロードする

 
[デザインの設定]画面上部の[CSSの編集]をクリックして画面を移動してください。

 

 

 

 
[ブログデザインのCSSの編集]画面で納品されたヘッダ画像をアップロードしてください。

アップロードが完了したら「この画像のパス」の中の文字列を全てコピーしてパソコンの[メモ帳]等に保存してください。
※この画面のアップロード以外は画像解像度が低くなる場合があります。

 

 
「この画像のパスのコピー」を必ず保管してください。

 

 

(エ) 「この画像のパス」とグローバルメニューの情報を返信してください。

 
テンプレートを購入した方は、アップロードしたヘッダ画像の「①この画像のパス」と「②グローバルメニューの情報」を「画像納品メール」に記載して返信してください。必要な情報が組み込まれたデザインテンプレートがメールで納品されます。

 グローバルメニューは、必要に応じてアメブロの特定ページや別サイトへリンクすることができます。このページ最上部のグローバルメニューを参考にしてください。

 

 

 

(オ) アメブロのCSS設定に追記する

 
「ソースコード1:ヘッダー画像用」と「ソースコード2:グローバルメニュー用」がメールで納品されたら、[デザインの変更]画面上部の[CSSの編集]をクリックして画面を移動してください。

 

 

 

 
GraphicParkから届いた[デザインテンプレート納品]メールの「ソースコード1」をコピーしてください。

[ブログデザインCSSの編集]画面下部の[現在使用中のブログデザインのCSS]の入力欄に既に入力済みのソースコードの末尾に改行してスペースを作り、「ソースコード1」をペースとして[保存]してください。※既に記述されているソースコードは削除しないでください。

 

 

 

 
ここまでの作業で下図のようにテンプレートが設定された状態になりまます。グローバルメニューはまだ表示されません。表示が変わらない場合は次の「(カ) キャッシュをクリアする」を実行してください。

 

 

 

(カ) キャッシュをクリアする

 
テンプレートを設定しても新しいデザインが反映されない場合があります。パソコンの「キャッシュ」という機能が古い情報を表示してしまうためです。下記の「Amebaヘルプ:キャッシュの削除について」を見てキャッシュをクリアしてから画面を再読み込みしてください。

 

キャッシュの削除について

 

 

 

(キ) グローバルメニューをフリースペースに入力する

 
[設定・管理]画面上部の[フリースペース編集]をクリックして画面を移動してください。

 

 

 

 
[フリースペース編集]画面の入力欄にメールで納品された「ソースコード2」をペーストして[保存]してください。空行・改行は入れないでください。

 

 

 

(ク) 配置設定を変更する

 
[設定・管理]画面上部の[配置設定]をクリックして画面を移動してください。

 

 

 

 
2カラムで「右メニュー」を選択している場合は[フリースペース]を右に、「左メニュー」を選択している場合は[フリースペース]を左にドラッグして[保存]してください。

 

 

 

 
3カラムで「右ワイドメニュー」を選択している場合は[フリースペース]を右に、「左ワイドメニュー」を選択している場合は[フリースペース]を左にドラッグして[保存]してください。

 

 

 

 
下図のようにグローバルメニューが表示されればテンプレートの設定は完了しています。表示が変わらない場合は次の「(ケ) キャッシュをクリアする」を実行してください。

 

 

 

(ケ) キャッシュをクリアーする

 
テンプレートを設定しても新しいデザインが反映されない場合があります。パソコンの「キャッシュ」という機能が古い情報を表示してしまうためです。下記の「Amebaヘルプ:キャッシュの削除について」を見てキャッシュをクリアしてから画面を再読み込みしてください。

 

キャッシュの削除について

 

 

 

3. もっとプロ仕様にする

(ア) ブログタイトルをヘッダ画像に埋め込む

 
「ブログタイトルと説明」は初期設定のままですとテキストベースですが、ヘッダ画像に埋め込むと更にアーティスティックになります。また背景画像にマッチした文字色に変更することができます。GraphicParkでは10,000円(税別)から承っております。

 

 
「ブログタイトル・説明」を画像に埋め込むとAmebaマイページ[ブログ管理] → [設定・管理] → [基本設定]画面で「タイトル・説明」を変更してもヘッダ画像に反映されなくなりますので、「ブログタイトル・説明」を変更する場合はヘッダ画像も差し替える必要があります。

 

 

 

(イ) 無地の背景またはPixabayの画像に人物画像を重ねる

 
GraphicParkではオリジナルのヘッダ画像制作も30,000円(税別)から承っております。

 

 

 

 
GraphicParkではヘッダ画像への文字の埋め込み・人物画像の切り抜き・CSS設定代行や様々なオプションが用意されています。
 
 こちらはお客様のアメブロにオリジナルデザインのヘッダー画像を設定させていただいた実例です。