なにか書きたい。

自由気ままに生きる29歳が思いのままになにか書きます。

グローバルナビを設定しました。

 

じゃん!

これです!

 

f:id:naa67:20170610205941p:plain

⬆ここんとこです!

 

変なところこだわり子な私

フォントがちょっとだけ小さくてスキッとしてるところと、

 

f:id:naa67:20170610210020p:plain

 

このアイコンのところが地味に気に入っています!

 

 

がしかし

 

 

ページを読み込んでるときになんか上の棒が向こうから出現して飛んでくるーー!

f:id:naa67:20170610210322p:plain

 

なにこの何かがうまくいってない感じ!

は〜気になるヨ〜〜!!

 

どうぞみなさま…

存分にページを読み込んでいただき棒が飛んでくるのをお楽しみください、、笑

 

あのね、なんとなく原因はわかるんだ。ナビのサイズがブログページの横幅いっぱいに作ってあるからその左端から棒が出現して飛んで来るってことだよね?ね!?でも横幅を560pxくらいに設定したら今度はTOPの上の棒が半分くらいしか表示されないんだよなぜか!も〜なんで〜〜!もう今の状態が一番マシだしこのままにしてあるんだも〜〜(どうでもいいので小文字)。

 

あと!

 

ナビのすぐ下から本文が始まるのもすごく気になる。

あとちょっと!あとちょっとだけ隙間が欲しい!

でもここの数値をどこで調節してるかわからナーイ!

 

なんかjavaScript(?)も渋滞してるみたいだし、まだまだ直さなきゃいけないところがいっぱいみたいで思考停止中です。もう我は疲れたよ…( ˘ω˘ )これって私が理解してどうにかできるレベルなのだろうか…

 

これ以降、このナビをどのサイトで作ったか紹介しようと思うのですが、画像が多いので、今回はじめて「続きを読む」差し込んでみようと思います!笑

よろしければご覧ください♪

 

 

 

* 

 

 

このグローバルナビ、MenuMakerというサイトで作りました。

 

f:id:naa67:20170610225323p:plain

CSS MenuMaker | HTML, CSS, & jQuery Menus

 

英語のサイトだけど、とても簡単に使えます。

 

でもね!

読んでくださった方があとでガッカリされないように言っておきますと‥

 

このサイト、有料です!

 

デザインするまでは無料でできるんだけど、最後cssとかを表示するのに「ここからは19ドル払ってください」みたいな画面出ます。なにげに高いじゃないか!

 

私は試しにデザインしてみたら気に入っちまったので払いました、19ドル。

2000円くらいかな〜と思ったら2200円くらいしました。笑

 

せっかくなので使い方をざっとご紹介します♪ 

 

f:id:naa67:20170610232238p:plain

デザインの種類が豊富〜!

ドロップダウンメニューも簡単に作れます。

 

デザインを選んで編集します。

 

f:id:naa67:20170610232909p:plain

 

プレビューを見ながら編集できるから、もうこの時点で楽しい!!

 

「Home」を編集する時は、左の一覧の「Home」の編集ボタンをポチッとすれば簡単に編集できます。私は「Home」を「TOP」にしています。

 

f:id:naa67:20170610233747p:plain

 

アイコンの種類もいっぱい!♡

(お気に入りポイント)

f:id:naa67:20170610233938p:plain

 

もちろんナビの色も簡単に変更できます。

 

f:id:naa67:20170610235239p:plain

 

細かく色を変えると自分の好みのデザインに早変わりします。

 

f:id:naa67:20170611000348p:plain

 

おお〜!

このデザインもいいかな!?

ピンクの圧がすごいかな!?

 

デザインが完成したらプレビュータブの横のタブをポチポチしていくと、html、cssなどなどが表示されますので、それぞれコピーしてブログのデザイン設定のとこに貼り付けます。 

 

ちなみに19ドル払ってアカウントを作れば、デザインを記憶しておいてくれます。

 

f:id:naa67:20170611003200p:plain

  

 

以上、紹介おわり!

 

わ〜

 

ざっと〜すごいざっと〜〜

 

「デザイン設定のとこに貼り付け」 のとことかもっと詳しく説明しておきたいんだけど、私もあんまりうまくいってないし、これが合ってるのかも定かでないから今回は書かないでおきます…orz

 

ちゃんと解決できるかな…

解決できたらリライトします!!😭

 

デザインしてみるまでは無料だし、とっても簡単でなかなかオシャレにナビが作れちゃうので、結構面白いと思います。ぜひ使ってみてくださいね♪

 

CSS MenuMaker | HTML, CSS, & jQuery Menus

 

 

 

にほんブログ村 その他日記ブログ アラサー女性日記へ
にほんブログ村