こんにちはセッコです
みんなにブログを見てもらいたい!
ブログ始めた人はそんな気持ちでいっぱいですよね?
私も見てもらいたい気持ちでいっぱいです(笑)
でも、見づらいブログじゃダメだろと言うわけで
今回はメニューバーの位置・サイズ等の調整についてカンタン解説
CSSでメニューバー調整
初心者の方はCSS?何それ状態かと思いますが
ブログ全体のデザインを決めているコードとでも思えばいいです
現在のデザインでメニューバー設定するとこんな感じ
【問題点】
・タイトル画像にカブって見づらい⇨画像の下に設定したい!
・全体的に左に寄っててバランスが悪い⇨等間隔で配置したい!
ライブドアブログの設定画面からCSSを調整します
①ブログ設定⇨デザイン/ブログパーツ⇨PC
③変更したのはコレ!
・メニューバーの位置を変更
.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右に移動
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;
}
メニューバー設定変更にチャレンジ!
選んだブログデザインによって表示のされ方はそれぞれです!
ですが、更に見やすくする工夫はできますよ!
素人なのでこんなもんしか出来ませんが、もっと見易くする工夫はドンドンしていきたい!
意外と簡単でしょ?