アメブロ カスタマイズレッスン

アメブロカスタマイズ/ブログヘッダーの設置方法

 

40代からのパソコンが苦手なお一人様起業の方のためのアメブロヘッダー・カスタマイズデザイン野口陽子です。

アメブロカスタマイズのメインはブログヘッダー。
こちらをまずカスタマイズしていきましょう。

今回は画像を設置するだけのシンプルな設置の方法です。

まずはヘッダー画像を用意します。
サンプル画像として2種類用意しました。

サイズは1120pxX500pxです。

 

 

 

まずは上の二つから画像を選んで、その画像の上をクリックします。

そうすると画像が表示されますので

それを画像の上で右クリックして

「名前を付けて画像を保存」で、保存しておいてください。

 

それから、アメブロのテンプレートを変更します。

 

 

ブログ管理→「デザインの設定」に移動して

下の方にスクロールすると「カスタム可能」がありますので

それをクリックします。

 

 

その中から「CSS編集用デザイン」を選びます。

 

この「スタンダード」のマークのモノをお選びくださいね。

 

それを選んでクリックすると
2カラムか3カラムかなど選べます。

今回は「2カラムメニュー右」を選んで「適用する」をクリック。

 

 

そのまま「CSSの編集をする」をクリックします。

最初にこちらのコードをコピーしてメモ帳などに保存しておいてください。

 

header, .skinHeaderArea{
background:url(**);
background-position: center top;
background-repeat: no-repeat;
height:500px;
}

 

 

 

 

「ブログヘッダ・背景用画像の追加」で

「ファイルを選択」をクリックして

先ほどダウンロードした画像を入れます。

 

 

「アップロード」をクリックすると画像がアップされます。

 

 

 

一番下にスクロールして
先ほどコピーしておいたコードを貼り付けます。

 

 

そのまま上に戻って今度は「この画像のパス」をコピー。

 

 

もう一度下にスクロールして

コードの(**)の部分の「**」のマークを消してから
かっこの中に画像のパスを貼り付けます。

 

 

 

「表示を確認する」をクリックして確認します。

 

 

このようになっていたらOK。
(テンプレートによってタイトルや説明文の位置が違う場合もあります)

まずは画像の変更の仕方を覚えてみましょう。

 

-アメブロ, カスタマイズレッスン
-, , , ,

Copyright© Design-feel.net , 2020 All Rights Reserved Powered by AFFINGER5.