アメブロ 既存のデザインから自由にデザインを変更するには(1時間でヘッダー画像設置まで完成) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:
こんにちは、パソコンワンポイントレッスン!

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札幌・ライフデザインスクール
川上 雄大

川上 雄大☆パソコンインストラクターさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント