ライブドアブログのメニューバー位置の調整方法【初心者向け】

こんにちはセッコです
みんなにブログを見てもらいたい!
ブログ始めた人はそんな気持ちでいっぱいですよね?

私も見てもらいたい気持ちでいっぱいです(笑)

でも、見づらいブログじゃダメだろと言うわけで
今回はメニューバーの位置・サイズ等の調整についてカンタン解説

CSSでメニューバー調整

初心者の方はCSS?何それ状態かと思いますが
ブログ全体のデザインを決めているコードとでも思えばいいです

現在のデザインでメニューバー設定するとこんな感じ
【問題点】
・タイトル画像にカブって見づらい⇨画像の下に設定したい!
・全体的に左に寄っててバランスが悪い⇨等間隔で配置したい!
スクリーンショット 2018-08-12 13.23.48

ライブドアブログの設定画面からCSSを調整します
①ブログ設定⇨デザイン/ブログパーツ⇨PC

スクリーンショット 2018-08-12 14.54.23

②CSSはここ!CSS内のメニューバーのコードを変更します
スクリーンショット 2018-08-12 14.57.58

③変更したのはコレ!
・メニューバーの位置を変更

.ldb_menu-list {
    position: absolute;
    bottom: 0;    ←bottom:を削除(コレが位置の指定をしている場所です)
    background: rgba(247,247,247,0.7);
    zoom:100%;
    width: 940px;
    margin: 0 auto;
}

◎やってみよう!
例えばこんなコードで設定が変更できます

bottom: 10px; 元の位置から10px上に移動
top: 10px; 元の位置から10px下に移動
left: 10px; 元の位置から10px右に移動
right: 10px; 元の位置から10px左に移動

・メニューバーの縦を狭めて、横サイズを設定
・文字サイズを小さく変更

.ldb_menu-list li a{
    padding: 18px;  padding:に縦と横を設定12px 50px;(バー枠のサイズ設定)
    line-height: 1.4;
    display: block;
    font-size: 15px;  font-size:(フォントサイズ!これは分かりやすいです)
    color: #333;
    text-decoration: none;

}

CSS画面でいうとココ!赤字で解説
スクリーンショット 2018-08-12 14.58.16

④変更後のCSS画面です
スクリーンショット 2018-08-12 15.08.23

⑤設定変更後の画面!どんっ!
 見やすくなりましたね!
スクリーンショット 2018-08-12 13.26.42

メニューバー設定変更にチャレンジ!

選んだブログデザインによって表示のされ方はそれぞれです!
ですが、更に見やすくする工夫はできますよ!

 

素人なのでこんなもんしか出来ませんが、もっと見易くする工夫はドンドンしていきたい!

意外と簡単でしょ?

最後に

せっかく設定したデザインの「保存」は忘れずに!
スクリーンショット 2018-08-12 15.54.21