アメブロ CSS編集用デザインヘッダー上部にSNSボタンを設置！

こんにちは♪日向凛です。

「CSS編集用デザイン」でカスタマイズ、とりあえず完了しました！

ヘッダーエリアのCSSが言うことを聞かないので
（以前広告が表示されていたあたりがなんかおかしい）

仕方がないので、背景画像にヘッダーエリアのデザインを仕込んで
（1920×1080pxにしてみました）

あとは、フリースペースを利用してヘッダー上部にSNSボタンを設置。

Webクリエイター☆日向凛ネットショップやってます♪-アメブロカスタマイズヘッダー部分

多！（笑）

FacebookとLinkedinについては
あまりおおぴらに公開していませんので
リンクするのはちょっと見合わせました。

（リアルでお会いした場合にのみ、名刺でご案内しています）

CSSのどこを編集したのかを掲載しておきますので
真似したい人はやってみてください♪

/* skinBody ボディ */
.skinBody{
background-image: url("背景画像URL");
background-position:center top;
background-repeat:repeat-x;
}/* ←ブログ全体に背景を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:0px;
}

/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{
/* 注ベースのcssにwidth:980px;の記述有り */
margin-top:100px;
}

/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:10px 10px;
background:#1fb4b1;/* ←サイドメニューのタイトルに背景を敷きたいとき */
color:#ffffff;
font-weight:bold;
font-size: 120%;
}

/* その他、拡張があれば記述 */

/* ヘッダー画像をブログトップへのリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
padding:0;
}
.skinTitleArea{
display:block;
padding:0;
text-indent:-9999px;
}
.skinTitle{
display:block;
width:400px;
height:100px;
}
.skinDescriptionArea{
padding:0;
text-indent:-9999px;
}

/* ヘッダーメニュー設置 */
.skinContentsArea{
position:relative;
}
span.headmenu1 {
position:absolute;
top:-300px; left:540px;
}
span.headmenu2 {
position:absolute;
top:-300px; left:590px;
}
span.headmenu3 {
position:absolute;
top:-300px; left:640px;
}
span.headmenu4 {
position:absolute;
top:-300px; left:690px;
}
span.headmenu5 {
position:absolute;
top:-300px; left:740px;
}
span.headmenu6 {
position:absolute;
top:-300px; left:790px;
}
span.headmenu7 {
position:absolute;
top:-300px; left:840px;
}
span.headmenu8 {
position:absolute;
top:-300px; left:890px;
}
span.headmenu9 {
position:absolute;
top:-300px; left:940px;
}

そしてフリースペースに以下を記述。

<a href="リンク先"><img src="ボタン画像URL" alt="" border="0" width=40"></a>
<a href="リンク先"><img src="ボタン画像URL" alt="" border="0" width=40"></a>
<<a href="リンク先"><img src="ボタン画像URL" alt="" border="0" width=40"></a>
<a href="リンク先"><img src="ボタン画像URL" alt="" border="0" width=40"></a>
<a href="リンク先"><img src="ボタン画像URL" alt="" border="0" width=40"></a>
<a href="リンク先"><img src="ボタン画像URL" alt="" border="0" width=40"></a>
<a href="リンク先"><img src="ボタン画像URL" alt="" border="0" width=40"></a>
<a href="リンク先"><img src="ボタン画像URL" alt="" border="0" width=40"></a>
<a href="リンク先"><img src="ボタン画像URL" alt="" border="0" width=40"></a>

アメブロ CSS編集用デザイン ヘッダー上部にSNSボタンを設置！

アメブロ CSS編集用デザインヘッダー上部にSNSボタンを設置！