BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» livedoorブログ メニューバーカスタマイズ④ メニューバーの形を変更する方法

このエントリーをはてなブックマークに追加

livedoorブログ メニューバーカスタマイズ④ メニューバーの形を変更する方法

   投稿日: 2016/11/17    投稿者:webコラム

d49b78842f76d6a9f4d19bcae4c553cd_s.jpg

こんにちは! ライターのモモタロウです。

今回は前回に引き続きlivedoorブログのメニューバーのカスタマイズです。

livedoorブログ メニューバーの「形」を変更する方法をお伝えしましょう。

以下の画像のメニューバー部分の形を変更します。

20161016-1.jpg

メニューバーの「形」を変更するには?


デフォルトでは角ばったメニューバーになっています。

これを丸みを帯びた形に変更してみよう。

まずは、livedoorブログの管理画面にログインします。

その後、「デザイン設定」→「PC」→「カスタマイズ」タブをクリックして、

CSS編集画面にします。
20161029-3.jpg


/*ナビ を探します。
20161029-4-1.jpg

.ldb_menu{background: #504341;
 部分の下一行に、以下の通りタグを付け加えます。

border-radius: 10px;

20161029-5-1-1.jpg


プレビューすると・・・

20161029-6.jpg

丸みを帯びたメニューバーとなりました。

さらに、
10px を 20pxに変更すると・・・

20161029-7.jpg

丸みの幅が大きくなりました。


まとめ

いかがでしたか?

ほんの僅かな設定によってオリジナルのブログが出来上がります。

是非、試してみて下さいね。

カテゴリ:

TOPへ