Everything has meaning

読者です 読者をやめる 読者になる 読者になる

Everything has meaning

たくさんの情報が溢れる世の中で文系大学生の必死にもがく様子をお届けします。

メニューバーを追加したぞ!

デザイン

しゃっす!どうもまくろ(@makuroblog)です!

 

前回のデザインについての記事に引き続き、今回はメニューバーを追加しました!

 

トップページの記事表示についての記事はこちら

makurooo.hateblo.jp

 

メニューバーとは?

 「メニューバー」とは、ウインドウやアプリケーションの操作命令を「ファイル」「編集」「表示」などの大項目で分けてメインメニューとして並べ、それぞれのメニューを選択するとドロップダウンでさらに細かい命令が表示され、選択できる操作領域(バー)です。

引用:「メニューバー」とは - パソコン用語解説

まぁ説明する必要ないと思いますが、トップページにある「HOME」「Contact」「プロフィール」など選択できるやつです。はい。

 

PV数があるブログでは基本的にあります。

 もちろんこれがマストではないと思いますが。

 

私のやり方 

私はもともとProgateをやっていたのである程度のHTML要素やCSSのコードがわかります。(やっておいてよかった)

Progate、おすすめです。

 

ただ、一からコードを書いて試行錯誤するのは厳しいです。

なのでサンプルとしてコードを提供してくれるwebサイトを探しました。

(実際にwebサイト制作で生計を立てている人も一からコードを書く人はとても少ないようです。)

 

www.tagindex.com

 

私は「メニューバー サンプル」で検索して一番上に出てきたこのサイトを利用しました。

 

f:id:makurohirata:20170219221810p:plain

 

最初はこんなショボいものでした。

 

これにProgate上級編コースのデザインを組み合わせた結果、こうなりました。

 

f:id:makurohirata:20170219233821p:plain

 

おしゃれ〜〜〜(だまれ)

 

我ながら良い出来ですね。

一月になる点は「width:100%;」で打ち込んだのにうまいこと引き伸ばされなかったことですね。

なので、スマホで見ると少しダサくなるのが今のところの悩みです。

 

詳しい方いましたら教えてください。

 

 

まぁこのように一から自分でコードを打ち込むよりも(パクって)他のwebサイトから良いと思う部分を検証してもってくることで圧倒的に時間を短縮できるということです。

検証の仕方はググってください。はい。

 

日頃からいろんなサイトを訪れたときにコンテンツだけでなくデザイン面も気にしてみるのがいいかもしれませんね。

 

でわ!!!

 

まとめ

結果的にこれが、、、

f:id:makurohirata:20170219235610p:plain

 

こうなりました。

 

f:id:makurohirata:20170219235552p:plain

 

よきかな。

 

P.S.

どうでしたか?

ちゃくちゃくとブログらしくなってきていますね。

 

次はアドセンス収益化だ!