css編集なしで簡単なアメブロのヘッダー設置方法

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

以前、アメブロのヘッダーを自分で作成し、設置する方法をご紹介しました。

こちらの方法でもヘッダーの設置が難しい、しかし少しは自分らしさを出したブログになんとかしたいという方に向けて、画像の上にアメブロに設定しているブログタイトルと説明文をそのまま表示するだけの簡単なヘッダーの作成方法をご紹介します。

こちらが完成したヘッダーです。

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

事前準備

• ヘッダー背景に設置する画像を準備
• ブログのタイトルと説明文の設定

ヘッダー背景に設置する画像について

今回のヘッダーは、アメブロに設定しているブログタイトルとブログ説明文が設置する画像の上に文字として表示されます。

ですから、ヘッダー背景に準備する画像は、全体的にごちゃごちゃしたものではなく、上にタイトルが表示できるようなシンプルなエリアのある画像を選びます。

ブログタイトルと説明文を設定します

ブログのタイトルと説明文はアメブロの管理画面から設定します。

管理画面→設定→基本設定
タイトルと説明を入力し、最後に一番下にある保存ボタンをクリックして保存します。

画像のサイズを調整します

今回使用するテンプレートに合わせて、画像のサイズを1120px × 300px に調整します。

オンラインで画像のサイズを変更します

こちらのサイトで画像のサイズを調整していきます。

https://www.peko-step.com/tool/resize.html

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

「ファイルを選択」ボタンから画像を選択するか、または画像をドロップしてアップロードします。

画像の縮尺を変えずに幅を980pxに拡大・縮小します

画像の縮尺を変えずに幅を980pxにします。画像の幅の赤枠の部分を980とし、サイズ変更ボタンをクリックします。

画像を高さ300pxでトリミングします

左のメニューよりハサミマークの「切り抜き」をクリックします。

幅980、高さ300に設定し、ヘッダー画像に使いたいエリアに点線の枠をマウスで移動させます。
位置が決まったら、「選択範囲を切り抜く」ボタンをクリックします。

サイズ調整ができた画像を保存します

Windowsの場合、画像の上で右クリックをし「名前を付けて画像を保存」をクリックします。わかりやすい場所に画像を保存します。

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

ブログのデザインを変更しますと、現在使用している設定には戻せない場合があるためご了承の上お進みください。

簡易カスタマイズできるテンプレートを設定します

一番下の「カテゴリから探す」から、「カスタム可能」をクリックします。

カスタム可能デザインの中でも、今回の簡易カスタマイズできるテンプレートは「css編集用デザイン」以外です。
「css編集用デザイン」以外から選択します。

この例では、2ページ目の「circlefabric」を選択しました。

お好みのブログのレイアウトを選択し、「適用する」ボタンをクリックします。

テンプレートが選択できましたので、続いて「デザインを簡単カスタマイズする」をクリックします。

ヘッダー画像の設置

右の「ヘッダー」エリアから設定します。

「ヘッダーの高さ」を300に変更し、「オリジナル画像を使う」ボタンをクリックします。

矢印のエリアをクリックし、サイズ調整して保存したヘッダー画像を選択し、「アップロード」ボタンをクリックします。

アップロードされた画像をクリックすると、ヘッダーが設定された状態が確認できます。
右上の×をクリックして設定を終えます。

次に真ん中の「ブログタイトルと説明文」を設定します。
ヘッダーの赤枠で囲んだあたりに、タイトルと説明を入れたいと思います。

ここでは

• 表示する文字の大きさは「中」
• 色はピンク
• 配置は右
• 上からの距離は130（だいたい真ん中に見えるあたり）

で設定しています。

変更した設定は、すぐ下のプレビュー画面で確認できるため、確認しながら微調整していきます。

最後に背景を設定します。

背景にも色や画像を設定できますが、今回はすっきりと背景なしにします。

「画像をなしにする」をクリックします。

背景が白になりました。今回はこちらで完成なので、「保存」ボタンをクリックします。

完成しました。

css編集なしでヘッダー画像を設定してみましょう

このようにアメブロでは、cssというウェブページのレイアウトを記述する言語を知らなくてもヘッダー画像を設定することができます。

少しでも簡単なところからトライしてみてくださいね。