Webデザイン アメブロ フリーランス

アメブロのヘッダー画像の設定方法

パソコンが苦手な女性フリーランスの方に寄り添いたいWebデザイナー絢です。
アメブロのカスタマイズやホームページを制作しています。

前回、スマホアプリを使ったヘッダー画像の作り方をご紹介しました。

Canvaを使ったアメブロのヘッダー画像の作り方

パソコンが苦手な女性フリーランスの方に寄り添いたいWebデザイナー絢です。アメブロのカスタマイズやホームページを制作しています。 アメブロのカスタマイズのご依頼理由を伺うと、「まずブログの見た目を整え ...

続きを見る

今回は実際にアメブロにヘッダーを設定する方法をご紹介いたします。

 

アメブロのヘッダー画像の設置方法

事前準備

  • ヘッダー画像
  • ヘッダー画像の高さ(px)

を準備します。

アメブロヘッダーの設定画面を開きます

アメブロにログインしたら、ブログ管理をクリックします。



デザインの設定をクリックします。



下の「他のカテゴリからブログデザインを探す」にある「カスタム可能」をクリックします。



アメブロの記事の表示レイアウトを選択します

注意

すでにカスタマイズされている方は、レイアウトを変更しますと設定がリセットされますのでご注意ください。

アメブロのヘッダーを設定するには、「css編集用デザイン」を選択する必要があります。

「css編集用デザイン」はブログのトップページを3種類のレイアウトから選択できます。

  • 記事一覧表示(最新のブログ記事の一覧が表示される)
  • トップ記事表示(最新の記事そのものが表示される)
  • タイル表示(最新のブログ記事の一覧が画像メインでタイル表示される)

この3つのレイアウトからお好みのものを選択します。
例として、トップ記事表示(下の赤枠の真ん中のもの)を選択します。


トップ記事表示レイアウトはさらに5パターンから選択できます。

  • 2カラム・サイドメニュー左
  • 2カラム・サイドメニュー右
  • 3カラム・右ワイドメニュー
  • 3カラム・左ワイドメニュー
  • 3カラム・右メニュー

この5つのレイアウトからお好みのものを選択します。
例として、2カラム・サイドメニュー右(下の赤枠の左から2番目)を選択し、「適用する」ボタンをクリックします。

 

ヘッダー画像をアップロードします

次にヘッダー画像をアップロードします。

「cssの編集をする」ボタンをクリックします。


「ファイルを選択」ボタンをクリックして、準備しておいたヘッダー画像を選択し
「アップロード」ボタンをクリックします。

※画像のファイルサイズが1MBを超えてアップロードできない場合は、画像を圧縮する必要があります。

こちらのサイトで圧縮できます。
https://tinypng.com/

赤枠のところに、圧縮したいファイルをドラッグアンドドロップします。




finished」になったら、「download」をクリックすると、ファイルがダウンロードされます。

「アップロードされた画像」の項目に、ヘッダー画像がアップロードされていることを確認します。

 

ヘッダー画像を設定します

次にヘッダー画像を設定します。

以下のコードをコピーします。

/* ヘッダー背景 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(#);
background-size: 100%;
width: 1120px;
height: 400px;
margin: 0 auto;
}

/* ヘッダータイトル */
.skin-headerTitle {
display:none;
}

「現在使用中のブログデザインCSS」の枠の中を一番下までスクロールし、
先ほどコピーしたコードを貼り付けます。


アップロードしたヘッダー画像のURL(青枠)をコピーします。
先ほど貼り付けたコード中の「#」を消し、そこに貼り付けます。(赤枠)

※#は貼り付ける場所の目印ですので、消してから貼り付けてください。

◇ヘッダー画像のURLを貼り付ける前


◇ヘッダー画像のURLを貼り付けた後


次にヘッダーの高さを設定します。
作成したヘッダー画像の高さを下の赤枠のところに入れてください。

※見本は400pxで作成したので、400になっています。
変更の必要がなければそのままでOKです。

 

ヘッダー画像の設定を確認し保存する

ヘッダー画像の設定ができたか確認します。
表示を確認する」をクリックします。




設定されていることが確認できました。
※まだ、この段階では保存されていません。




cssの編集画面へ戻ります。

ヘッダー画像の設定を確定します。
保存」ボタンをクリックして完了です。ブログを確認してください



ポイント

  • 既にカスタマイズしている場合、レイアウトを変更すると設定はリセットされる
  • アメブロの記事のレイアウトはcss編集用デザイン
  • ヘッダー画像がサイズオーバーしていたら、ヘッダー画像ファイルを圧縮する
  • コードを貼り付けたら、ヘッダー画像のURL高さの2つを設定
  • ヘッダー画像の設定が確認できたら、保存すること

 

女性フリーランスの方向けのアメブロカスタマイズをしています

WEB DESIGN La pureté (ラ・ピュルテ)では女性フリーランスの方向けにアメブロカスタマイズをしています。

ヘッダー画像で世界観をターゲットにアピールし、ナビゲーションメニューを設置してお申込み導線を整えます。

アメブロカスタマイズ詳細

 

お問い合わせ


WEB DESIGN La pureté ​へのお問い合わせはこちらからどうぞ。

お問い合わせ

LINE公式アカウントからもお気軽にご質問くださいませ♡

友だち追加
  • この記事を書いた人
WEB DESIGN La pureté 絢

WEB DESIGN La pureté 絢

藤本絢子 / Junko Fujimoto
Webデザイナー 東京都在住。
会社員時代はシステムエンジニアとしてソフトウエア開発に携わっていました。
女性や主婦の方が個人事業主として働く中で、本業に集中できるようパソコン関係のサポートを行っています。

-Webデザイン, アメブロ, フリーランス
-,

© 2020 WEB DESIGN La pureté