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

ヘッダーを簡単に設置できる『Luxbar』レスポンシブもばっちり!

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

こんにちは!プロクラスの渡辺です。
ここ最近、急いでサイトを作る機会があり、時間短縮のためにいろいろなツールを探していました。

img
レスポンシブ対応をしているヘッダーを組むのも早くない自覚があるので簡単に素早く設置できる何かがないかと思っていたところ、『Luxbar』にたどり着きました!!
超初心者でも問題ありません!

『Luxber』がどんなものか試してみる!

Demoページがあるのでそれで試してもらったらいいと思います!
Demoページのウィンドウを縮めたりして試してみてください、ばっちりレスポンシブ対応していますよね!
【Luxber Demoページ】https://balzss.github.io/luxbar/

これ、すべてcssだけでできているんですが、配布されているものをダウンロードするか、CDNがあるのでいろんな環境に合わせて使い分けてください 😉 

Luxberを設置する①

ヘッダーのhtmlはまだ組まないで!!ちょっと待ってください! 😥

とりあえず、CDNを設置しましょう!
ダウンロードして使いたい方はその下のボタンからダウンロードも可能です 😀 
03赤枠で囲ったコードをコピぺするだけです。こんなに簡単でいいんでしょうか…!:-D  

次です。
Demoページ、CDNやダウンロードの項目の次はこんな感じになっています。
01

なにやらいろいろ設定できそうです。もっとスクロールするとコードが見えてきます。
なんと、上の部分で色々設定したコードがコピーできちゃうんです!すごい!!
02

こんなことが変更できます▼▼
変更すると、Demoページのナビも変わるのでいろいろ試しながら作りたいものに一番近いものにしておくといいと思います!

Menu builder

デフォルトのメニューの数が4つです。
Item4の横にある「+」を押すと「メニュー名を記入して」メニューを増やせます。
メニューを減らすときは「メニュー(Item1とか)」にカーソルを合わせるとバッテンが出てくるので、クリックすると削除できます。

Navbar Style ナビバーのスタイルを設定できます。
最初は「Fixed」になっています。
Default:上下左右にpaddingがついています
Static:ナビバーが上部にくっついたままです
Fixed:ナビバーが付いてくるやつです
Fixed Bottom:ナビバーが下部にあります
Menu Alignement メニューの位置です。
Left:左寄せ
Right:右寄せ
Brand Visibility よくある、サイトのロゴ(サイト名)部分の表示についてです。
Demoページでは「Luxbar Demo」となっている部分です。
Show:表示する
Hide:非表示にする
Hamburger Animation スマホ時のハンバーガーメニューのアニメーションも選べます!
Spin:3本線がするすると×に変わります
Doublespin:上記に比べてくるくる回りながら×に変わります
色の変更も可能です。
右側のボックスにある、色のリストから試したい色を押すと変わります。
ただし、ここは自分でcssで書き変えることも可能なので何色でもいいかもしれないです。

Luxberを設置する②

Demoページでいろいろ設定したら、『Generated Code』のコードをコピーして、ヘッダー部分にペーストします 😎 
04
※必要最低限というか、Luxberしか設置していません 🙄
こんな感じで、PCとスマホときれいにレスポンシブが完成できているのではないでしょうか!

05

ちゃんとレスポンシブもできてたらOKです!
後はメニュー名を変えたり、ロゴを追加したり、、自分のサイトに合うようにカスタマイズしていきます!
とっても簡単にヘッダーが設置出来ました~~!! 😳

 

番外編!ドロップダウンメニューを追加する

すごく簡単にヘッダーナビができるのは分かっていただけたかと思うのですが、ここで一つの思いが…

06ドロップダウンメニューは Luxbarを使って 追加できないのかな??』

ああ~~わかります!私も思ってました!!結論は、「できます!」
ただ、英語がまったくわからないので、見落としていただけでした。▼ここ
07

『ドロップダウンメニューはここをクリックしてね!』ってことらしいです。

「check out this link.」をクリックしましょう。するとGitHubのページが開くと思います。
そこに書いてあるコードを<header></header>タグの中にコピペするだけ!
08

これでドロップダウンメニューができました!

09
こんな感じです!後はさっきと一緒で、自分のサイトに合わせてカスタマイズをしていくだけで簡単にドロップダウンメニューも実装できちゃいました! 🙂 

おわり

お疲れ様でした! 😳 
すっごく簡単にできるので、初心者の方でも安心して設置できると思います。(不必要なダウンロードも必要ないですし、、)
時間がなくてもきれいにヘッダーナビを作りたいですし、こういったものを使うのも手ですね! 😮

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
好評につき、大阪会場もスタート!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら