ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

アメブロ – ヘッダー画像の変更

   

アメブロのカスタマイズをしてみたのでメモ的に投稿します。

無料ブログの場合は、デフォルトで広告が入ってきてしまったり、カスタマイズがうまくできなかったりすることが多いですね。

アメブロも例外ではなく、カスタマイズが少々面倒ですね。

SEO的な対策はどうかというと、あまり気にせず。。。

というか、無視しています。

アメブロを使った理由は幾つかあるのですが、

・スマホから軽く書けるブログ用にブログが欲しかった。

・被リンク送れれば良いかな。

・有名な無料ブログが良いかな。

という点でしょうか。

アメブロの場合はアフィリエイトでの活用は禁止されているので、広告を貼りつけるなどとは考えていません。

本当、軽い気持ちで、有名・無料・気軽・被リンク送るという点だけで選びました。

アメブロの場合、ヘッダー画像の大きさは、横980pix × 縦300pix以内です。

CSS編集ができるようにする

まずは、「ブログ管理」画面から、「デザインの変更」を選択し、その中の右下の「カスタム可能」ボタンをポチっとする。

20150925001

次に、「CSS編集用デザイン」を選択する。

20150925002

適当に、好みのデザインを選択して「適用する」ボタンをポチっとします。

20150925003

これでCSS編集できるようになっているはずです。

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

再び、「ブログ管理」画面から「デザインの変更を」選択し、「CSSの編集」のアンカーをポチっとします。

20150925004

まずはヘッダー画像とする画像をアップロードします。

画像は横980pix × 縦300pix以内です。

画像の保存形式は、jpg、gif、pngのいずれかの形式のものになります。

20150925005

CSSを編集する

次に、CSSを編集していきます。

編集するのは下記の範囲になります。

20150925006

①変更するのは下記部分です。


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

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

②{}の中に下記5行を追記します。

・追記するコード


background-image: url(コピーした画像のパス);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;

・追記後のコード


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(コピーした画像のパス);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

③()内の"コピーした画像のパス"に画像のパスを書き込みます。

画像のパスは下記になっているので、コピペすればオッケーです。

・コピーする画像のパス

20150925007

・編集後のコード


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20150925/10/31/EQ/p/o09800300pierre-551443144570406.png);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

最後に「保存」ボタンをポチッとして終了です。

まとめ

今回参考にさせていただいたサイトはこちら。

アメブロ用タイトルヘッダー画像の変更方法~その1基本編|どえむちゃん(´Д`*)日記

無料ブログもいっぱいあるし、都度カスタマイズしなければならないのでなかなか大変なのですが、一つづつ解決してメモ的にブログをアップしていけば、今後は効率があがると思います。

いろいろと手を出しすぎるのも良くないけどがんばります^^

 - アメブロ, 無料ブログ