仕組みさえ理解できれば誰でも簡単に上図のようなデザインテンプレートをアメブロに設定することができます。ヘッダ上部にグローバルメニューも設置できます。

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

 

 

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

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

 
 無料で1,200万枚以上のプロカメラマンが撮影した美しい画像をダウンロードできるPixabay(ピクサベイ)であなたの好きな画像を選んでください。

 

 

https://pixabay.com

 

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

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

 

 

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

 

 

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

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

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

 

 

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

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

 

 

 

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

 

 

 

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

 

 

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

 
それぞれのアイコンをクリックするとサンプルブログが表示されます。選んだタイプをメモしておいてください。サンプルブログはパソコンで表示させてください。

 

 

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

 

 

 

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

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

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

 

 

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

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

 

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

 

 

2. CSSを設定する

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

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

 

タイプ レイアウト
 リスト  2カラム・メニュー左
 2カラム・メニュー右
 3カラム・右ワイドメニュー
 3カラム・左ワイドメニュー
 3カラム・右メニュー
 スタンダード  2カラム・メニュー左
 2カラム・メニュー右
 3カラム・右ワイドメニュー
 3カラム・左ワイドメニュー
 3カラム・右メニュー
 タイル  2カラム・メニュー左
 2カラム・メニュー右
 
GraphicParkで販売しているデザインテンプレートは1セット926円(税別)でセットの内容は「ヘッダ画像用:ソースコード1」と「グローバルメニュー用:ソースコード2」です。更にヘッダ画像を横1120px・縦570pxにトリミングするサービスが無料で付いています。

初めてのショッピングでは500pt(500円相当)がもらえますので、実質426円(税別)でデザインテンプレート1セットを購入することができます。

 

 

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

 
デザインテンプレートの[購入完了のお知らせ]メールにPixabayからダウンロードした画像のファイル名を入力して返信してください。ファイル名で画像を検索できますので画像を添付する必要はありません。横1120px・縦570pxにトリミングされたヘッダ画像がメールで納品されます。

 

 

 

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

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

 

 

 

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

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

 

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

 

 

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

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

 

 

 

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

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

 

 

 

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

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

 

 

 

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

 

 

 

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

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

 

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

 

 

 

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

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

 

 

 

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

 

 

 

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

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

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

 

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

 

 

 

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

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

 
「ブログタイトルと説明」は初期設定のままですとテキストベースですが、ヘッダ画像に埋め込むと更にアーティスティックになります。また背景画像にマッチした文字色に変更することができます。

 

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

 

 

 

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

 
Pixabayからダウンロードした画像や無地の背景に人物の画像を切り抜いて重ねることもできます。人物自体が最高のアイキャッチですから背景をボカしてタイトル文字は抑えたトーンにしても良いかもしれませんね。

 

 

 

 
GraphicParkにはヘッダ画像への文字の埋め込み・人物画像の切り抜き・CSS設定代行や様々なオプションが用意されています。オプション価格はGraphicParkでご確認ください。
 
 こちらはお客様のアメブロにデザインテンプレートを設定させていただいた実例です。制作過程も記事にしてありますのでよろしかったらご覧ください。