昨日から、アメブロをホームページ風に悪戦苦闘中！
《関連記事》
ずっとやりたかったんですが、暇になったらと思ってなかなかしませんでした。
いざ暇になっても私の性格上、追い詰められないとやらないようです（笑）
今週から短期のお仕事が決まりました。
だからかな昨日から作成しています。
いろんな方が丁寧に書かれていますので、
「アメブロ ホームページ風」や「アメブロ サブメニュー」と検索してみてください。
私の場合、いろんな方のをフリーページやCSSにコピペして試してみました。
うまくいかないことも多かったです。
いろんな方のを試してみることをお勧めします。
私が試したのを自分のために書き込んでおきます。
完成こんな感じ。
デザインはCSS編集用デザイン
ホームページ風にするためには、カスタム可能な「CSS編集用デザイン」にする必要があります。
アメブロ管理画面>デザイン設定>カテゴリから探す >カスタム可能
□は、新デザインで○は旧デザインみたいです。
それによってもCSSの書き込みが違うようです。
ここでも注意が必要です！
私は、□の最新版で作成したので、それを作成方法を伝えます。
アメブロのフリースペース編集
グローバルメニューのHTMLを作ります。
アメブロ管理画面>設定・管理>フリースペースの編集に以下のHTMLを貼り付けます。
このHTMLは新デザイン・旧デザインで共通です。
<nav class="menu"><ul class="menu-container"><!-- <br>
--><li class="menu1"><a href="menu1のURL">Menu1</a></li><!-- <br>
--><li class="menu2"><a href="menu2のURL">Menu2</a></li><!-- <br>
--><li class="menu3"><a href="menu3のURL">Menu3</a></li><!-- <br>
--><li class="menu4"><a href="menu4のURL">Menu4</a></li><!-- <br>
--><li class="menu5"><a href="menu5のURL">Menu5</a><!-- <br>
--><ul class="second-content"><!-- <br>
--><li><a href="サブメニュー1URL">SubMenu1</a></li><!-- <br>
--><li><a href="サブメニュー2URL">subMenu2</a></li></ul><!-- <br>
--></li><!-- <br>
--><li class="menu6"><a href="menu6のURL">Menu6</a></li></ul><!-- <br>
--></nav>※Menu1〜6は、URLも変更してください。
※[--><li class="menu1"]を確認！
コピペした場合は、ちゃんと順番に数字にする。
これを menu1 , menu2 , menu5 となっていて
“レッスンメニュー”が“SNS"になってしまい、かなり悩んでしまいました。
アメブロのCSSを編集
CSSを編集します。
アメブロ管理画面>デザイン設定>適用中のデザイン：CSSの編集に以下のHTMLを貼り付けます。
このHTMLは新デザイン用です。
/* 新デザイン 画像使用したグローバルメニュー */
.menu {
position: absolute;
margin: 0;
padding: 0;
top: -130px;/* メニュー高さ90px + メニュー下の余白40px */
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .menu, .skin-columnC .skin-blogSubA .menu, .skin-columnE .skin-blogSubA .menu, .skin-columnD .skin-blogSubB .menu {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .menu, .skin-columnD .skin-blogSubA .menu, .skin-columnC .skin-blogSubB .menu {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .menu {
left: auto;
right: -360px;
}
.menu-container {
margin: 0 auto;
padding: 0;
display:-webkit-flex;
display:flex;
-webkit-justify-content: space-around;
justify-content: space-around;
width: 1120px;/* メニューバー横幅 */
height: 90px;/* メニューバー高さ */
background: #fff;/* メニューバー背景色 */
list-style-type: none;
}
.menu-container li {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
line-height: 90px;/* メニューバー高さ */
height: 90px;/* メニューバー高さ */
}
.menu-container li a {
display: block;
text-decoration: none;
color: #fff;/* メニューボタン文字色 */
}
.menu-container li a:hover {
background-color: #FFE2E7;/* メニューボタンマウスオーバー背景色 */
color: #FF96A9;
}
.menu-container>li>ul.second-content {
visibility: hidden;
position: absolute;
top: 0;
margin: 0;
padding-left: 0;
list-style-type: none;
z-index: -1;
}
.menu-container>li>ul.second-content>li {
text-align: center;
width: 186px;
height: 50px;/* サブメニューボタンの高さ */
display:block;
box-sizing: border-box;
}
.menu-container>li:hover>ul.second-content {
visibility: visible;
top: 90px;/* メニューバー高さ */
z-index: 1;
transition: all .3s;
}
.menu-container>li>ul.second-content>li>a {
display: block;
height:50px;/* サブメニューボタンの高さ */
line-height: 50px;/* サブメニューボタンの高さ */
background: #FFE2E7;/* サブメニューボタンの背景色 */
color: #FF96A9;/* サブメニューボタンの文字色 */
text-decoration: none;
border-bottom: 1px solid #fff;/* サブメニュー仕切り線 */
box-sizing: border-box;
text-indent:0;
opacity: 1;
}
.menu-container>li>ul.second-content>li>a:hover {
background: #ff96a8;/* サブメニューボタンマウスオーバーの背景色 */
color: #fff;/* サブメニューボタンマウスオーバーの文字色 */
}
.skin-blogBody {
padding-top: 90px;/* メニューバーの高さ分余白作る */
}
/* メニュー項目背景画像 */
.menu1 a{
background:url(menu1画像URL);
background-position: center;
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:186px;/* ボタンの横幅 */
height:72px;/* ボタンの高さ */
padding:0;
text-indent: -9999px;
}
.menu2 a{
background:url(menu2画像URL);
background-position: center;
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:186px;/* ボタンの横幅 */
height:72px;/* ボタンの高さ */
padding:0;
text-indent: -9999px;
}
.menu3 a{
background:url(menu3画像URL);
background-position: center;
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:186px;/* ボタンの横幅 */
height:72px;/* ボタンの高さ */
padding:0;
text-indent: -9999px;
}
.menu4 a{
background:url(menu4画像URL);
background-position: center;
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:186px;/* ボタンの横幅 */
height:72px;/* ボタンの高さ */
padding:0;
text-indent: -9999px;
}
.menu5 a{
background:url(menu5画像URL);
background-position: center;
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:186px;/* ボタンの横幅 */
height:72px;/* ボタンの高さ */
padding:0;
text-indent: -9999px;
}
.menu6 a{
background:url(menu6画像URL);
background-position: center;
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:186px;/* ボタンの横幅 */
height:72px;/* ボタンの高さ */
padding:0;
text-indent: -9999px;
}
/* 標準ヘッダーナビを消す */
.skin-blogHeaderNav {
display: none;
}
今日は、ここまで。
画像を作成していないので、隠れていますが、
実は、メニューできているので探してみてください。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
メールマガジン「7日間で習得！ 今さら人には聞けないホリスティックケア」（人、ペット）