アメブロトップデザインの編集の仕方

シャンプーソムリエ こと関川忍です。

僕のブログを覗いていただきありがとうございます。

あなたにとって何か得る物があれば・・・と思って
心を込めて記事を書かせていただいております。

 

アメブロ歴はかなり長いのですが、これで3度目のリニューアルを昨夜ちゃちゃっとやってみました。

自分自身デザイン的に飽きてきたのと、使っている写真が嘘くさいと言われるので・・・。

 

そこで、最近TSUTAYAさんの集客で使っていただけてた写真を使ってTOPデザインをまず変えてみました。

 

 

このやり方は、カンタンです。

 

1:ホーム画面

ブログ管理をクリック

 

2:ブログ管理画面

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

 

3:デザインの変更画面

基本はCSS編集デザインの[CSSの編集]をクリックします。

 

4:ブログデザインのCSSの編集画面

 

このに過去のブログヘッダー画像がありますが、この画面の下の方にスクロールしていくと以下のようのところが出てきます。

 

↓ ↓ ↓

 

/* (3-2) ブログヘッダー

——————————————–*/

 

/* skinHeaderArea ブログヘッダー980pxエリア */

.skinHeaderArea{

background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20190819/00/9c/k0/p/o09800295izasekikawa1566142468977.png);

background-repeat: no-repeat;

background-position: center top;

width: 980px;

height: 300px;

margin-bottom: 15px;

}/* ←ブログヘッダーに背景画像を敷きたいとき */

 

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */

.skinBlogHeadingGroupArea {}

 

 

そして、この赤字のところに入れたい画像を入れるとブログヘッダーが変わります。

 

じゃあ、ブログヘッダーに入れたい画像は?

 

僕の場合はKeynoteで作っています。

 

こんな感じです。

 

そして、出来た画像をスクリーンショットしています。

こんな感じです。

ただし、このままだと画像が大きすぎるので画像のいいきさを調整します。

 

 

加工前は幅が1842ピクセル、高さが554ピクセルですが、ブログヘッダーにハマるには幅が980ピクセル、高さが300ピクセル以内になります。

 

 

調節すると僕のブログヘッダー画像は幅が980ピクセル、高さが295ピクセルになりましたので、まあまあぴったりです。

 

今度は、サイズ加工した画像をアップロードしますので、「ファイルを選択」をクリックしてアップロードします。

次に、指定の画像のURLをコピーします。

 

 

コピーしたら先ほどの

 

/* (3-2) ブログヘッダー

——————————————–*/

 

/* skinHeaderArea ブログヘッダー980pxエリア */

.skinHeaderArea{

background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20190819/00/9c/k0/p/o09800295izasekikawa1566142468977.png);

 

この赤字のところにペーストします。

 

 

ペースト出来たら保存を押して完成です。

 

また、メッセージボードも変更しました。

これは、僕が何に重きを置いて動いているか?を知って欲しいのと、読者の方にも共有したい情報だからです。

関連記事一覧