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

BAKANARY

バカがバカなりに調べた結果がこれだよ!!!

HTMLやCSSをよく分かっていない自分でも簡単にメニューバーが作成できたその一部始終

バカ調べ バカの挑戦 バカの挑戦-1ヶ月108記事チャレンジ

メニューバーがあるとブログ感がグッと出ていいですよね。

現在、1ヶ月108記事という意味の分からない企画をひとりでもくもくとやっているので、あとあと記事を読み返すためにもカテゴリー分けしたものをメニューバーからサクッと見られると非常に便利。

そんなわけでメニューバーを設置しようと思ったのですが、はてなブログってデフォルトでメニューバーを設置する機能がないことを知り絶望。

あれですよね。HTMLやCSSを駆使して自分で作れと。 

HTMLやCSSを知らなくてもメニューバーは作れるんだよ?

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

 

わたくし、以前Wordpressでブログをはじめるためにこちらの本を読んでHTMLとCSSを勉強してレンタルサーバーまで契約したんですが、結局一文字も記事を書くことなく12ヶ月のサーバーレンタル期間が終了したという金ドブ捨て経験を持っておりまして。

HTMLやCSSのことなんて完全に忘れたよ!

いや、こちらの本は非常に分かりやすく素晴らしいものだったんですけど。

HTMLやCSSのことなんて完全に忘れたよ!

というのは紛れも無い事実でして。

メニューバー設置を断念せざるを得ない状況に陥いりました。

…でも、そんなときでも大丈夫だよ。

ググればすれば親切な人が教えてくれているはずだよ!

はてなブログ」「メニューバー」で検索してみたところ、暇を持て余した神々の遊び状態でザクッザクと出るわ出るわ。

いくつか拝見させてもらったんですが、一番分かりやすかったもので挑戦してみました。

ぽめ山ぽめ次郎さん解説がマジ親切で分かりやすかったス。

みなさん上記ブログを見てね!

                              ー糸冬ー

 

とは言え、せっかくこの記事に足を運んでくれた方のためにもこれで終わるわけにはいきません。

ほぼ、上記サイトの模写みたいな形になってしまいますが、やり方を解説します。

これから書くやつをコピー&ペーストすればいいよ!

まずはHTMLから

ダッシュボードを開いて「デザイン」をクリック 。

f:id:yody_baka:20160404214504j:plain

続いてレンチの形をしたアイコンをクリックして、「ヘッダ」をクリックすると一番下に「タイトル下 HTMLを記述できます」というところが出てくる。

f:id:yody_baka:20160404214512j:plain

 そこに以下のコードをコピー&ペースト。

<div id="menubar">
<ul>
<li><a href="カテゴリーURL" title="カテゴリー名">カテゴリー名</a></li>
<li><a href="カテゴリーURL" title="カテゴリー名">カテゴリー名</a></li>
<li><a href="カテゴリーURL" title="カテゴリー名">カテゴリー名</a></li>
<li><a href="カテゴリーURL" title="カテゴリー名">カテゴリー名</a></li>
<li><a href="カテゴリーURL" title="カテゴリー名">カテゴリー名</a></li>
</ul>
</div>

 赤字のカテゴリーURLは、メニューバーに入れたいカテゴリーを自分のブログ記事からクリックし、出てきたURLを「http://〜」全て入力します。

f:id:yody_baka:20160404223018j:plain

自分の場合はこんな感じのURL。

http://bakanary.hatenablog.com/archive/category/バカ調べ

 2つある赤字のカテゴリー名は、メニューバーに表示させるカテゴリー名を記入します。

今、メニューに表示させるカテゴリーは5つになっているけど、増やしたいなら</ul>と</ul>の間に<li><a href="カテゴリーURL" title=“カテゴリー名" >カテゴリー名</a></li>を加えるだけ。減らしたいときは削ってください。

続いてはCSS

 CSSも先ほどと同じく「ダッシュボード」→「デザイン」→「レンチアイコン」とクリックしていき、一番下にある「デザインCSS」をクリックして入力画面を表示。f:id:yody_baka:20160404224132j:plain

 そこに以下のコードをコピー&ペースト。

#manubar{
width:100%; }
#menubar ul{
display:table;
width:100%;
margin: 0;
padding: 0;
background-color: #FFFFFF; }
#menubar li{
display: table-cell;
width:20%;
padding:0;
background-color: #000000; }
#menubar li a{
display: block;
margin:0 auto;
padding:5px;
border: 1px solid #FFFFFF;
text-decoration: none;
color: #FFFFFF;
text-align: center;
font-size: 18px; }
#menubar li a:hover{
background-color: #333333; }

注意しなければならないのは、赤字の20%のところ。

メニューのカテゴリーが5つならそのままで大丈夫ですが、それ以上になるとバランスがおかしくなる可能性があるので、例えばカテゴリーが6なら100÷6=16.6666となり、小数点以下を切り捨てて16%に。カテゴリーが7なら100÷7=14.2857となり、小数点以下を切り捨てて14%に。といった風にパーセンテージを変更してください。

また、HTMLの方で記載したカテゴリー名があまりにも長くなると、枠からはみ出てしまうので、そちらも適宜調整してください。

f:id:yody_baka:20160404230328p:plain

以上で、こんな感じのメニューバーが完成するよ!

メニューの色を変えたいとか形を変えたいとかは各自でお願いするよ!

 

1ヶ月108記事チャレンジ 11/108記事目