ブログ

簡単にはてなブログにナビゲーションバー【カテゴリー】を追加する。

投稿日:7月 25, 2015 更新日:

ナビゲーションバーとは、ウェブサイトのトップにあり、カテゴリーに素早くアクセスさせることが可能です。ある特的の記事に興味がある人が見に来てくれた時でも、このナビゲーションバーで気になる記事だけチェックできます。

f:id:Daiki2013:20150725164420p:image

最初は、ほかのサイトの作り方を参照しようと思ったのですが、どのサイトもこのCSS MenuMaker | HTML, CSS, & jQuery Menusを使っています。以前このサイトは無料だったようですが、現在では年間14ドルのようです。(2015年7月)なので、今回は無料でナビゲーションバーを作れる方法を紹介します。
まず、最初にHTMLを作成します。HTMLは骨組みです。色や、形はおいといて、まず、どういうカテゴリーをナビゲーションバーに追加してかです。まず、このサイトに行って、好きなナビゲーションバーを作ってみてください。
このTabsという部分で、あなたが入れたいカテゴリーを追加します。それが完成したら、一番上にナビゲーションバーがすでに作成されています。すべてのカテゴリーが表示されているか確認してください。

f:id:Daiki2013:20150725164427p:image

f:id:Daiki2013:20150725164423p:image

もし、検索ボックスがいらない場合は、Search Input Boxの部分で、Disable Search Input Boxにチェックします。

f:id:Daiki2013:20150725164418p:image

完成したら、Grab the Menu Code ボタンをクリックします。

f:id:Daiki2013:20150725205122p:plain

このようなウィンドウが表示されるので、HTMLの箇所だけをコピーします。
f:id:Daiki2013:20150725205206p:plain
このHTMLをよく見ていくと、一つのカテゴリーに対して、liというタグで囲われています。このままだと、クリックした後のURLがないので、これを追加します。
<li class=”button”><a href=“#”>Top</a></li>
以下のように、hrefのあとに、ジャンプしたいURLをコピーペーストします。これをすべてのliタグに行います。
<li class=”button”><a href=”http://dnsyd.hatenablog.com/“>Top</a></li>
このHTMLをはてなブログのカスタマイズ、ヘッダ、タイトル下にコピーペーストします。これで、HTMLは終了です。次は、CSSです。CSSはデザインを決めます。
以下のCSSをコピして、はてなブログのカスタマイズ、デザインCSSにペーストします。
>||
#menu_wrap span {
display: none;
}
#menu_wrap, #menu_wrap ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#menu_wrap {
background-color: #F5F5F5;
;border-bottom: 5px solid #333333;
border-bottom: 5px solid #F55856;
float: left;
margin-bottom: 3%;
position: relative;
width: 100%;
}
#menu_wrap ul.subs {
background-color: #FFFFFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
color: #333333;
display: none;
left: 0;
padding: 2%;
position: absolute;
top: 54px;
width: 96%;
}
#menu_wrap > li {
border-bottom: 5px solid transparent;
float: left;
margin-bottom: -5px;
text-align: left;
-moz-transition: all 300ms ease-in-out 0s;
-ms-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
}
#menu_wrap li a {
display: block;
text-decoration: none;
-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
#menu_wrap > li > a {
color: #333333;
display: block;
font-size: 0.8em;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
}
#menu_wrap > li:hover > a, #menu_wrap > a:hover {
background-color: #F55856;
color: #FFFFFF;
}
#menu_wrap li.active > a {
background-color: #333333;
color: #FFFFFF;
}
||<
以上で、完成です。うまくいかないなどありましたら、コメントしてください。出来る限り返答していきます。
References:

ground-sesame.hatenablog.jp

akiueo.hatenablog.com

関連記事

はてなブログからwordpressへの移行の仕方【2015】

以前、はてなブログからwordpressに移行した理由を書いたので、移行の仕方についても書きます。自動化できたので、以外に簡単でした。 スポンサーリンク はてなブログエクスポート まず、はてなブログか …

簡単に、”続きを読む”ボタンの見栄えを良くする

はてなブログのトップページにある記事をすばやく閲覧してもらうために、”続きを読む”ボタンを配置しておく方は結構多いと思います。このボタンを追加するのは簡単で、以下の画像のように、文章中のどの箇所でもよ …

トラッキングがインストールされていません / Tracking Not Installed (Google Analytics)

グーグルアナリティクスをはてなブログに導入しようとしてみたけれど、データがうまく反映されていないことがありました。同じ経験する人が必ずいると思ったので、シェアしておきます。 スポンサーリンク

超簡単!記事中の見出し【サブタイトル】を自動的にもっと見やすくする!

はてなブログはフォントの大きさなどもちょうどよくて気に入っているんですが、他の人のブログを読んでいると、あーこんなんいいなぁと思うことがありまして、、 そのうちの一つがこれ!サブタイトル、見出しという …

私が使っているブログ設定、テンプレート選び、デザイン、プラグイン等を公開します!

ブログの設定、デザイン、会社選びなどについて質問されることが多くなってきたのでここでまとめておきます。 ブログを初めて間もない方、初めようと思っている方、分からないことが多いと思うのでなるべく丁寧に解 …

  • 2008年から2年間オーストラリアに留学。卒業後、シドニーでIT関連の仕事につく。留学中に出会った彼女と結婚しオーストラリアで生息中。ブログは「オーストラリア生活の予備知識」として、オーストラリア生活に役立つ情報を中心にブログを書いてます。 詳しいプロフィールはこちら!!