アメブロ開設時に行ったこと～ブログのメニュー画面作成～

yozuです

前々回と前回に引き続、アメブロ開設時の流れの記録です

個人的に残しておけば、後日変更するときに調べなくてもよいので・・・

今回はブログのメニューについてです

このブログが、記録残すログとしての活用になりそうなので、

画像一覧から記事を見るという導線が不要で動画一覧に至っては投稿するのかな？といったところ

最近ほとんどの方がスマホで見るらしいので、

誰にも見られない可能性が高いのですが、

誰よりも表示チェック中の私が！！よく見る画面なので設定していきます

やる事としては

①メニュー画像を作成

②フリースペース枠の設定

③CSSの編集

になりそうだな～とネットにあふれる手順書を読み、イメージしながら作業していきます。

▽変更前

①メニュー画像を作成

まず、必要な画像のリストアップ

・「ブログトップ」

・「記事一覧」

・「プロフィール」

・「連絡先」

必要な画像の個数がわかることで、作成する画像の横幅が決まってきます

今回は4つなのでヘッダーの時の横幅（1120px）/4で280pxです　※高さは70px

見るからに手書き！安心！

記事に乗せた後HTML表示にして、画像のURLを取得しておく

②フリースペース枠の設定

設定・管理＞表示設定　をクリックし、サイドバーにフリースペースを表示させる

設定・管理＞フリースペース設定　をクリックし、下記を入力する

<nav class="menu"><ul class="menu-container"><li class="menu1"><a href="https://ameblo.jp/yozu343/">トップページ</a></li><li class="menu2"><a href="https://ameblo.jp/yozu343/entrylist.html">記事一覧</a></li><li class="menu3"><a href="https://profile.ameba.jp/yozu343">プロフィール</a></li><li class="menu4"><a href="https://msg.ameba.jp/pub/send/index?toAmebaId=yozu343">連絡先</a></li></ul></nav>

③CSSの編集

設定・管理＞デザインの設定　をクリック

CSSの編集で　適切な場所に下記を記入し、レイアウトの確認

問題なければ保存

/* メニューバーを設置する */
.menu {
position: absolute;
margin: 0;
padding: 0;
top: -110px;
}

.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: 70px;
background: #fff;
list-style-type: none;
}

.menu-container li {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
line-height: 70px;
height: 70px;
}

.skin-blogBody {
padding-top: 70px;
}

/* メニューバーのデザイン（ボタン4個） */
.menu1 a{
background:url(https://stat.ameba.jp/user_images/20240227/18/yozu343/23/dc/p/o0280007015406698967.png);
background-position: center;
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:280px;/* ボタン横幅 */
height:70px;/* ボタン高さ */
padding:0;
text-indent: -9999px;
}
.menu2 a{
background:url(https://stat.ameba.jp/user_images/20240227/18/yozu343/9f/ef/p/o0280007015406698965.png);
background-position: center;
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:280px;/* ボタン横幅 */
height:70px;/* ボタン高さ */
padding:0;
text-indent: -9999px;
}
.menu3 a{
background:url(https://stat.ameba.jp/user_images/20240227/18/yozu343/bc/93/p/o0280007015406698962.png);
background-position: center;
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:280px;/* ボタン横幅 */
height:70px;/* ボタン高さ */
padding:0;
text-indent: -9999px;
}
.menu4 a{
background:url(https://stat.ameba.jp/user_images/20240227/18/yozu343/60/29/p/o0280007015406698960.png);
background-position: center;
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:280px;/* ボタン横幅 */
height:70px;/* ボタン高さ */
padding:0;
text-indent: -9999px;
}

/* 標準のヘッダーナビを非表示 */
.skin-blogHeaderNav {
display: none;
}

最後に

表示を確認します

今回は画像だけでなくリンクの設定もしているので

リンクが誤ったところに飛んでいないか、リンク切れを起こしてたりしないかを確認しておくとよいです

おわり