こんにちは、パソコンインストラクターの川上雄大です。
昨日、札幌の私のパソコン教室でレッスン受けに来られた方に、ブログカスタマイズをしました～！
１．ヘッダー画像の作成
２．メニューバーの作成
３．サイドバーの調整
だけですが。
３時間かかりました^^;
元のブログはコレ↓
そして、３時間後はコレ↓
あれ？もう記事で書いてますねぇ～^^!!
ちゃんとメニューバーが動いているかどうかは、この方のブログをチェックしてみてください～～（笑）
あ、ちなみに、この方のカスタマイズは、２ページ目の「CSS編集用デザイン」を使っています。（最新デザインの顔写真が丸いのはないデザイン、昨年の新デザインです。）
そして、次のCSSコードを最後の方にペタンと貼りました～～！
/* ■サイドバーの枠指定■ */
/*サイドメニュー枠の角を丸くする */
/*サイドメニューのブロックの色を変更 */
/*メニューの枠*/
.skinMenu{
border-radius:6px;/*角を丸く */
background-color:#ffffff;/*白色*/
border: 1px solid #F96BA2; /* タイトル領域の枠線－pink色 */
width: auto;
margin-right: 8px;
box-shadow: 6px 6px 6px #AAA;
}
/*メニューのヘッダー*/
.skinMenuHeader{
padding: 6px 6px; /* タイトルと枠の間の余白 */
background-image:linear-gradient(#F72C7D,#F96BA2,#F7B4CF,#F7D9E5);/* pinkのグラデーション */
background-color: #F96BA2; /* タイトル領域の背景色－pink色 */
width: auto;
box-shadow: 6px 6px 6px #AAA;
}
/*サイドメニュータイトル文字*/
.skinMenuTitle{
color:#ffffff;/*白色*/
/*text-shadow: 1px 1px 3px #000;*/
font-size: 12px; /* タイトル文字サイズ */
font-weight: bold; /* タイトル文字を太字に */
}
/*枠内の色*/
.skinMenuBody{
background-color:#ffffff;/*白色*/
}
/* ▼▼▼ グローバルナビゲーションメニュー１ */
/* メニュー設置用スペース */
.skinContentsArea{
padding-top:50px;
position:relative;
}
/* メニューエリア */
#topmenu{
width:980px; /* メニュー全体の幅 */
position:absolute;
margin:0;
padding:0;
top:0px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
}
/* メニューリストのグループ */
#topmenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
/* メニューリスト */
#topmenu ul.menu li{
width:189px; /*1つの幅*/
margin:0.5px; /*メニューのスキマ*/
border:3px double #ffffff;/*線の太さ 種類 色*/
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
background-color: #F72C7D; /* タイトル領域の背景色－pink色 */
display:inline;
list-style:none;
float:left;
}
/* メニューリストのリンク */
#topmenu ul.menu li a{ /*通常時*/
display:block;
font-size:14px; /*ボタンの文字サイズ*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字*/
text-decoration:none;/*下線(なし)*/
background-image:linear-gradient(#F72C7D,#F96BA2,#F96BA2,#F7D9E5);/* pinkのグラデーション */
background-color: #F96BA2; /* タイトル領域の背景色－pink色 */
}
/* メニューリストのリンク（マウスオーバー時） */
#topmenu ul.menu li a:hover{ /*カーソルが乗った時*/
color:#000000; /*文字色(黒)*/
font-weight:bold; /*太字*/
text-decoration:underline;/*下線(あり)*/
background-color:#698fff; /*背景色(薄い青)*/
}
/* ヘッダー画像 */
.skinHeaderArea {
background:url(ヘッダー画像URL) left top no-repeat; /* 画像を配置 */
height: 300px;/* ヘッダー画像の高さ */
padding-bottom:10px;/*ヘッダ画像とメインの間のスペース*/
}
/* ヘッダー画像をリンクする */
h1.skinTitleArea a{
width:980px;/* 画像の横幅 */
height:300px;/* 画像の高さ */
display:block;/* ブロック要素とする */
position:absolute;/* 位置を固定 */
text-indent:-9999px; /* テキストを範囲外へ移動 */
}
/* 説明文を非表示 */
.skinDescriptionArea{
display:none; /* 非表示にする */
}
/* ヘッダー上下の余白をなくす */
.skinBlogHeadingGroupArea{
padding-top:0;
padding-bottom:0;
}
/*記事枠の角を丸くする */
.skinArticle{
border-radius:20px;
border: 1px solid #F96BA2; /* タイトル領域の枠線－pink色 */
}
/*プロフィール画像調整*/
/*画像表示エリアサイズ調整*/
.skinSubA .userProfileImageArea{
width:150px !important;
height:150px !important;
float:none;
margin:0 auto;
}
/*画像サイズ調整*/
.skinSubA .userProfileImage, .skinSubA .userProfileImage img{
width:150px !important;
height:150px !important;
margin-left:0px;
}
/*プロフィールタイトル調整*/
.skinSubA .profileUserNicknameArea{
width:200px;
text-align:center;
float:none;
padding:10px 0 0 0;
margin:0 auto;
}
.userProfileImage{
border:1px solid #efefef;
}
.readerHeader{
font-size:150%;
text-align:center;
}
.readerHeader em{
font-size:150%;
}
＜蛇足＞
あ、今回どうして３時間かかったのかというと･･･
この方のヘッダー画像で使用する写真で、口元の乱れている髪の毛をなくす、という加工をしたものでして（笑）
以上、ブログカスタマイズでした。
LIDS札幌・ライフデザインスクール
川上 雄大
