WEBデザイナーが教えるアメブロカスタマイズ
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

WEBデザイナーが教えるアメブロカスタマイズ

アメブロをオリジナルデザインする方法を教えます♪

皆さんブログ楽しんでいますか～？
ブログを楽しむ方法のひとつとして、
ブログを自分オリジナルデザインにしたい！という方も多いと思います。
読みやすくて見ていて楽しいブログはアクセスアップにも繋がります！

でも、カスタマイズってなんか難しそうですよね...
そこで、webデザイナーをしている私が
ブログのカスタマイズを優しく（多分w）解説します！！

| WEBデザイナー日記 |
| わたしの制作実績 |
Amebaでブログを始めよう！
次ページ >>

メッセージボードのデザインをカスタマイズ！

メッセージボードとは、アメブロのトップページ上部に表示できるフリースペースのことです！

$アメブロカスタマイズ-メッセージボードカスタマイズ

この箇所のデザインを変更する方法です。


メッセージボードにコメントを


まずはメッセージボードにコメントを登録してください。

各種設定 > メッセージボード

で編集可能です。


css編集


cssを編集します。
表示させたい背景画像などがあれば、あらかじめ画像をアップロードしておきます。

そして、以下をcssの一番下に追加します。


.skinMessageBoard
{
font-size: 12px; /* 文字の大きさ */
color: #95580d; /* 文字の色 */
background:#eeeeee; /* 背景の色 */
}



※自分で上記を変更してください^^



これでOK。
メッセージボードは初めてブログを見に来た人にとって一番重要なPRできる枠です。
デザインで惹き立てると良いと思います！！






ブログ内の見出しデザインを変更する

アメブロのブログ記事部分って読みにくいですよね。

見出しが無いし、画像の大きさも管理画面ではうまく設定できない！！

そこで、見やすいようにデザイン変更する方法です。

デフォルトでは文字を太くしたりフォントのサイズ調整、フォントカラーの変更が備わっていると思うのですが正直それでは見えにくい！！

例えば…
これ↓↓↓









これが見出し2です


ここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れて

これが見出し3です


ここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れて

これが見出し4です


ここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れて

これが見出し5です

ここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れて

これが見出し6です

ここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れてここに文章を入れて








こうやって背景に色を置いてあげると、文章に段落が出来て見る人にもとても優しい文章になります。

そして、SEOにも最適^^

見出しタグ（h2,h3...）というタグでくくっています。




さて、では、その設定について説明しまーす！！

とっても簡単^^




以下をcssの一番下に貼り付けてください^^




/* 記事見出しタグ */
.articleText h2
{
font-size: 16px;
font-weight: normal;
background: #f59825;
color: #54330b;
margin: 0px -10px;
border-radius: 3px; /* CSS3 */
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px; /* Firefox用 */
border-bottom:1px dotted #ccc;
padding: 9px 10px 5px;
}

.articleText h3
{
font-size: 16px;
font-weight: normal;
color: #54330b;
border-radius: 3px; /* CSS3 */
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px; /* Firefox用 */
border-bottom:1px dotted #ccc;
padding: 9px 10px 5px;
margin: 0px -10px;
border-left:3px dotted #e7045f;
}

.articleText h4
{
font-size: 14px;
font-weight: normal;
background: #eee;
color: #f59825;
border-radius: 3px; /* CSS3 */
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px; /* Firefox用 */
margin: 0px -10px;
border-bottom:1px dotted #ccc;
padding: 9px 10px 5px;
}

.articleText h5
{
font-size: 14px;
font-weight: normal;
color: #f59825;
border-radius: 3px; /* CSS3 */
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px; /* Firefox用 */
margin: 0px -10px;
border-bottom:1px dotted #ccc;
padding: 9px 10px 5px;
border-top:1px dotted #ccc;
}

.articleText h6
{
font-size: 14px;
font-weight: 800;
color: #f59825;
border-radius: 3px; /* CSS3 */
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px; /* Firefox用 */
margin: 0px -10px;
padding: 9px 10px 5px;
}








そして、記事を実際書く時は、以下のように見出しタグで囲ってタイトルを書いてください。


$アメブロカスタマイズ-アメーバカスタマイズ見出しの設定




これでOK^^

倍に見やすくなるはずですー！お薦めです！



背景にオリジナル画像を挿入する

背景に自分の好きな画像（柄）に変更したい時の方法です。

このブログも自分で変更した画像を仕様しています！

画像を用意＆画像をアップロード



まずは、変更したい画像を用意してください。

ブログデザイン > デザインの変更 > cssの編集 > ブログデザインヘッダ・背景用画像の追加で用意した画像をアップロード。（下記画像参照）


$アメブロデザイナーのブログ


そして、アップされた画像のパスをコピーしてください！



アップした画像をcssに挿入



アップロードされた画像をcssにて記述します。

記述するcssの箇所は以下。(3-1) ボディ（全体）という箇所にbackground: url(画像のパス);を書いてあげればOK


/* (3-1) ボディ（全体）
--------------------------------------------*/


/* skinBody ボディ */
.skinBody{
background: url(ここに画像のパスを貼り付ける);
}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}



ここで注意点！！

アップさせたい背景画像が縦も横も繰り返しても良いのであれば上記の記述ですが、
もし、繰り返したくない場合や、横だけ繰り返したい時、縦だけ繰り返したい時は、
以下を記述する必要があります。


繰り返しさせたくない

background: url(ここに画像のパスを貼り付ける); no-repeat

横だけ繰り返し

background: url(ここに画像のパスを貼り付ける); repeat-x

縦だけ繰り返し

background: url(ここに画像のパスを貼り付ける); repeat-y






これで大きな好きな写真が画像をアップすることができます～^^






次ページ >>