アメブロ新デザイン用のカスタマイズ【まとめ】

●　アメブロ新デザイン用のカスタマイズ【まとめ】

こんにちは。高橋好美です＾＾

レッスン用に新デザイン用のカスタマイズのまとめを掲載しています。

2017.06.24　アメブロの仕様変更があったようで、ＣＳＳ修正しています。

<div class="nav-wrap"><nav>
<ul class="nav-body">
<li><a href="＊＊">プロフィール</a></li>
<li><a href="＊＊">メニュー</a></li>
<li><a href="＊＊">お客様の感想</a></li>
<li><a href="＊＊">アクセス</a></li>
<li><a href="＊＊" target="_blank">お問い合わせ</a></li>
</ul>
</nav></div>

/* グローバルナビゲーションメニュー */
.nav-wrap {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-wrap,
.skin-columnC .skin-blogSubA .nav-wrap,
.skin-columnE .skin-blogSubA .nav-wrap,
.skin-columnB .skin-blogSubB .nav-wrap {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-wrap,
.skin-columnD .skin-blogSubA .nav-wrap,
.skin-columnC .skin-blogSubB .nav-wrap {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .nav-wrap {
left: auto;
right: -360px;
}
.nav-body {
margin: 0;
padding: 0;
}
.nav-body:after {
display: block;
clear: both;
content: " ";
height: 0;
visibility: hidden;
}
.nav-body>br {
display: none;
}
.nav-body li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.nav-body li a {
display: block;
text-decoration: none;
}
.skin-blogBodyInner {
padding-top: 90px; /* メニューバーの表示場所確保 */
}
.nav-wrap {
top: -90px; /* メニューバーの上下位置調整 */
}
.nav-body {
width: 1120px; /* メニューバー横幅 */
background: #FFFFFF; /* メニューバー全体の背景色 */
}
.nav-body li a {
width: 222px; /* ボタンの横幅 */
border-right:2px #fff solid;/* ボタン同士の隙間 */
line-height: 50px; /* ボタンの高さ */
color: #fff; /* 文字の色 */
background: #ffcccc; /* ボタンの色 */
}
.skin-blogHeaderNav {
display: none;
}

/* ヘッダーの背景色とヘッダー画像 */
.skin-bgHeader > div {
background: no-repeat scroll center;
display: block;
margin-left: auto;
margin-right: auto;
background-color: #fff;
background-image: url(***);
width: 1120px;/* ヘッダーの横幅 */
height: 300px;/* ヘッダーの高さ */
}

/* ヘッダー hover処理 */
.skin-bgHeader > div:hover {
opacity: 0.9;
-ms-filter: "alpha(opacity=90)";
filter: alpha( opacity=90 );
}
/* リンク高さ指定 */
.skin-bgHeader > div > a {
height: 100%;
}
/* ブログタイトルと説明文非表示 */
.skin-headerTitle {
display: none;
}

阪急西院駅徒歩７分のアメブロカスタマイズ講座
あなたのためのパソコン教室：高橋好美

受付時間　１０：００～１７：００（月～金）

京都市右京区西院西今田町１２－１６
080-8333-6539

・無料メルマガ／メール講座
・ヘッダーカスタマイズ依頼
・アメブロ講座案内
・教室アクセス
・お客様の声／ヘッダー作成事例
・お問い合わせフォーム
・電話予約　080-8333-6539

☆京都市西院、西京極、太秦、二条、大宮、烏丸御池、京阪三条、伏見、長岡京、八幡、高槻、大阪市内、吹田、枚方、兵庫、愛媛、岡山などからお越しいただいております。

☆アメーバブログ初心者向けの講座、ヘッダー画像などのブログカスタマイズ。初心者にもわかりやすい説明で、自分のビジネスが魅力的に伝わるブログスキルが身に付きます。