新アメブロのカスタマイズ~メッセージボードの背景を装飾する~

アメブロカスタマイズ

 

アメブロのヘッダー画像を自分だけのオリジナル画像に変えたいという方はこちら

 

これはアメブロの新しいスキン「css編集用デザイン」に対応しています。

今回のカスタマイズはアメブロのメッセージボードを装飾してみます。

アメブロカスタマイズ

 

今回はこのようなコルクボード調にします。

アメブロカスタマイズ

 

この画像では分かりにくいと思いますが、実際のイメージとしては参考サイトのようになります。

今回のカスタマイズではメッセージボード用に画像を3つ用意する必要があります。

アメブロカスタマイズ

アメブロカスタマイズ

アメブロカスタマイズ

 

ボタンを簡単に作成することができる無料ソフトでお勧めなのはInkscape

Inkscapeのダウンロードや使い方はこちらをご覧下さい。

メニューボタンを作成する際に気をつけなければならないのがボタンのサイズ。

「CSS編集用デザイン」はブログのメインコンテンツ部分の横幅は470pxなので、

横幅470pxの画像を作成するとピッタリです。(3カラムの場合)

 

それではカスタマイズ開始。

「ブログを書く」⇒「アメブロを書く」⇒「画像フォルダ」で、作成した画像をアップロードしておきます。

アメブロカスタマイズ

 

次に「ブログを書く」⇒「デザインの変更」⇒「CSSの編集」とクリック。

アメブロカスタマイズ

 

そしてcss編集欄の一番下までスクロールさせ、以下を全てコピペし各所を編集、保存します。

.skinMessageBoard{
padding:0 0 48px 0;
background:url(ここにアップロードした画像のURL) no-repeat left bottom;
}

.skinMessageBoard2{
background:url(ここにアップロードした画像のURL) no-repeat;
padding-top:48px;
margin:0;
}

.skinMessageBoard3{
padding:0px 30px 0px 30px;
background:url(ここにアップロードした画像のURL);
color:#000000;
}

赤字のところは人によって異なるのでそれぞれ編集してください。

アメブロカスタマイズ

 

どこにどの画像を指定するかはこちらを参考にしてください。

アメブロカスタマイズ

 

「C」の画像についてですが、この部分はメッセージボード内の文字数によって、

繰り返し表示される部分です。

だからあんまりクネクネした画像などを使用すると、

繰り返し表示される際のつなぎ目がおかしくなったりするので、

初心者の方はCの画像はなるべく直線的なものが良いかと思います。

 

人気ブログランキングで今何位?

アメブロのヘッダー画像を無料で作成

  • このエントリーをはてなブックマークに追加

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓

にほんブログ村 釣りブログ バスフィッシングへ にほんブログ村 釣りブログ 東海釣行記へ にほんブログ村 釣りブログへ

この記事の著者

kazushi釣りと生き物をこよなく愛するWEBデザイナー

釣りと焼酎が好きなWEBデザイナー。夜な夜な真っ暗な部屋で水槽を眺めながら呑んでいます。最近のマイブームはハンドメイドルアー制作。琵琶湖のほとりでひっそりとWEB制作事務所を営んでいます。

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る