PCインストラクターの川上です。
アメブロのデザインを自由にカスタマイズするためには、
アメブロが用意してくれている既存のデザインをやめて、
「カスタム可能デザイン」内の「CSS編集用デザイン」にする必要があります。
「CSSの編集」をクリックするとは(2013年11月13日)
すると、いったん殺風景なデザインになってしまいますが、気にしないで進んでいきましょう(笑)
で、CSSってどこ?という方は、こちらをご覧くださいませ↓↓↓
CSSコードを自分で追加したり、修正したり、削除したりするには(2015年01月08日)
まず、ヘッダー画像をエクセルで作成しますね。
(もちろん、ペイントやPhotoshopや他の画像ソフトで作成してもOKです)
エクセル(Excel)でヘッダー画像を作るには(2014年02月05日)
作成したら、画像をアップロードして、画像URLを取得します。
ヘッダー画像がどうしても小さくなってしまうのですが・・・(CSSでのヘッダー画像の挿入方法)2014年02月19日
その後、次のCSSコードを、一番下にコピペします↓↓↓
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background:url(画像URL) left top no-repeat; /* 背景 */
height:300px; /* 高さ */
margin-bottom:10px; /* 記事エリアまでのスペース */
}/* ←ブログヘッダーに背景画像を敷きたいとき */
/* ヘッダー画像にリンクを張る */
h1.skinTitleArea a{
width:980px;/* 画像の横幅 */
height:300px;/* 画像の高さ */
display:block;/* ブロック要素とする */
position:absolute;/* 位置を固定 */
text-indent:-9999px; /* テキストを範囲外へ移動 */
}
/* 説明文を非表示 */
.skinDescriptionArea{
display:none; /* 非表示にする */
}
/* ■サイドバーの枠指定■ */
/*サイドメニュー枠の角を丸くする */
.skinMenu{
border-radius:10px;
}
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
.skinMenu{
background-color: #fceeeb;/*さくら色*/
}
/*メニューのヘッダー*/
.skinMenuHeader{
background-color: #ea9198;/*ピンク色*/
}
/*サイドメニュータイトル文字*/
.skinMenuTitle{
color:#ffffff;/*白色*/
}
/*枠内の色*/
.skinMenuBody{
background-color:#ffffff;/*白色*/
}
/* skinBody ボディ */
.skinBody{
background-color:#FBDADE;/*うすいピンク色*/
}
そして、アップロードした画像URLを置き換えてあげます。
すると、1時間ほどで、しかも自分の手で、このように、ここまできますので!!
(私が隣に張り付いていましたけど^^;)
あ、カーペットについたユリの花粉をきれいにとっていただいて、ありがとうございました!
『絨毯に付いてしまったユリの花粉の取り方♪』
とても助かりました~~(^^♪
以上、パソコンワンポイントレッスンでした。
LIDS札幌・ライフデザインスクール
川上 雄大