はてぶにメニューバーを追加できるようになりました！
こんにちは、ろばみみです。
先週のランサーズを振り返ってみて、いい仕事をするには
自己PRをしたらいいんじゃなんかと思いました。
私がどんなキャラか、何が得意で何が苦手か・・・
ワケありですが、わかってもらえたら最高にお得ですよ！？
そんな感じのブログにしたらいいかも・・・？？？
まずはデザイン。
初心者向けデザインを紹介しているサイトを参考に、今回はUnderShirtにしました。
スマホ・PC両方に対応したスッキリデザイン。
本文、背景、メニューが見やすい感じなのが気に入りました。
カスタマイズしよう
今まで使っていたテーマ「Minimalism」の作者さんのブログを参考にしました。
2017年の記事で、ブログの記事も９個しかないのにどれもすっごい面白い。
こういうのを書けたらかっこいいですね！
ざっくり読んで、ヘッダーを追加できたらいいなーとと思ってチャレンジ。
ブログの設定→デザイン→ヘッダー→ヘッダー下のHTMLを書き込むコーナーがあります。ここにコードを追加していけばOKというわけ。
で、やってみたのだけど・・・
FontAwesome（かっこいいアイコン）と、デフォルトのはてなヘッダーを非表示にするパーツがどうやっても効きません。
<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>
#globalheader-container {display:none;}
しばらく悪戦苦闘したけれど無理だったので後回しに。Pro版にしたらできるのかな。
「メニュー」を追加してみました
お次は「メニュー」グレーの棒に「HOME」「ABOUT」・・・とカテゴリーが並んでいるコーナーです。
まずはメニューのタイトルとカテゴリを決めます。
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="https://robamimim.hatenablog.com/">HOME</a></div>
<div class="menu"><a href="https://robamimim.hatenablog.com/archive/category/ADHD">ADHD</a></div>
<div class="menu"><a href="https://robamimim.hatenablog.com/archive/category/本・マンガ・映画など">本・マンガ</a></div>
<div class="menu"><a href="https://robamimim.hatenablog.com/archive/category/お料理">お料理</a></div>
<div class="menu"><a href="https://robamimim.hatenablog.com/archive/category/お仕事">お仕事</a></div>
<div class="menu"><a href="https://robamimim.hatenablog.com/archive/category/日記">日記</a></div>
</div>
</nav>
この、メニューを決めるのが大変で！過去の記事を読み返して、あれはこっちで、それはあっちで・・・と読み返していたらもう！時間が宇宙の彼方に消えてっちゃいました。
Hubble Observes One-of-a-Kind Star Nicknamed ‘Nasty’
宇宙はいいよね。ハップル望遠鏡の宇宙画像・・・癒されますね・・・
しばらくコネコネしてできたメニューが、いま上にあるやつです。これをブログの設定→デザイン→ヘッダー→ヘッダー下のHTMLに貼り付けると完成です。
ですが、薄いグレーのデフォルトが並んでいるだけなので、見た目をCSSで指定します。こちらもひつじの雑記帳を参考にさせていただきました。このコード、単に色と形を指定するだけではなく、ちょっと右に、ちょっと余白、そのこだわりがすごいと思いませんか！？
メニューの形と大きさを指定する設定
<style type="text/css">
/* メニューのバックグラウンドの色と余白*/
#gnav {
background: #3f3f3f;
font-size: 0;
margin-top: 0;
padding: 0 0 0;
}/* メニューの字の設定*/
#gnav .menu a {
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
padding: 11px 11px 0px;
height: 40px;
text-align: center;
overflow: hidden;
box-sizing: border-box;
}/* メニューの位置と余白の設定*/
#gnav .gnav-inner {
width: 100%;
height: 38px;
padding: 0 10px;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}/*メニューを横並びにします*/
#gnav .menu {
display: inline-block;
}
/* ### スライドメニューを横いっぱいに広げる ### */
#top-editarea .section {
width: 100% !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 0em;
}
</style>
さらにメニューを開いたときにプルプルする効果を追加したのですが、こちらは動きませんでした。。。FontAwesome（かっこいいアイコン）もそうでしたので、Javascriptが動かない・・・という事なのでしょうか。
さらにひつじの雑記帳では「コードをみる」メニューをクリックすると、たたまれているコードがしゅるんと出てくる効果が使われていて、一体どうやっているか気になってしょうがありませんでした。。。こうしてあっちこっちひっくり返していると、時間が飛んでってしまんうですね。
ろばみみはブログにメニューの棒を作れるようになった！
ついにメニュー棒ができました！！！
ブログって面白いですね。
ブログにメニューの棒を追加したいと思いましたら、ぜひこちらよりご依頼ください！
ではまた！
