Change Forward

「かわる」をアシストする

【はてなブログ限定】メニューバーを3分で表示する方法

【はてなブログ限定】メニューバーを3分で表示する方法

   

メニューを表示してPVをアップ!

 

先日当サイトのタイトル下にメニューバーを表示してみました。

 

このメニューバー、動きを付けていることもあってか、画面をスタイリッシュにしてくれるだけではなく、サイト内の閲覧滞在時間を上げてくれる効果もありそうです。

 

自分の手によってサイトがブラッシュアップされていく喜びを感じていただけたら幸いです。

 

【この記事を読むメリット 】

  • はてなブログのサイトにメニューバーを表示できるようになる
  • デザインとサイトの利便性を関連させて考えられるようになる

 

それでは今回のコンテンツです。

 

   

メニューバーは最初から用意されている

 

【はてなブログ限定】メニューバーを3分で表示する方法

これは私も知って驚きました。実はメニューバーははてなブログがあらかじめ用意してくれていたのです。
どういうことでしょうか。

 

ブログのページを表示するには、2つの要素が必要です。

 

  • 画面に表示される文字や、段落を設定するHTMLファイル
  • 文字の装飾や見出しのデザインを設定するCSSファイル

 

そのうち、後者のCSSファイルの設定はすでに用意されているため、CSSには触れずにHTMLを編集することで、メニューバーを表示できる状況になっているのです。
ここで意味がわからなくても表示できますのでご安心ください。

 

それでは、HTMLファイルの編集方法について、手順をご紹介します。 

 

手順①メニューバーが使用できるブログテーマを選ぶ

まずはメニューバーの機能が利用できるブログテーマを選びます。

 

ブログテーマとは、サイトの開設時に選ぶデザインのパッケージで、その時は好みで選ばれたのではないかと思います。
実はこのブログテーマにはCSSの初期設定がされており、ここにメニューバーの”もと”が入っています。

 

早速デザイン画面から、機能の設定されているテーマをインストールしにいきましょう。

※ブログテーマを変更する際、これまでのCSS設定がリセットされてしまうため、ワードにコピーしておくなど、控えておくようにた方がよいです。

 

ダッシュボードからデザインページへ行きます。

 

【はてなブログ限定】メニューバーを3分で表示する方法

 

メニューを下にスクロールして「テーマストアでテーマを探す」をクリック。

 

【はてなブログ限定】メニューバーを3分で表示する方法

 

移動した先の画面の中ほどに「Innocent」というテーマがあるため、そちらをクリック。

 

【はてなブログ限定】メニューバーを3分で表示する方法

 

「プレビューしてインストール」をクリック。
対象のブログを選択します。

 

【はてなブログ限定】メニューバーを3分で表示する方法

 

 

【はてなブログ限定】メニューバーを3分で表示する方法

 

「このテーマをインストール」をクリック。
テーマがインストールされます。

 

【はてなブログ限定】メニューバーを3分で表示する方法

 

再度デザイン画面に戻り、インストールしたテーマ」から「Innocent」を選び、「変更を保存する」をクリックすれば準備は完了です。

 

【はてなブログ限定】メニューバーを3分で表示する方法

 

【はてなブログ限定】メニューバーを3分で表示する方法

 

これでCSSの準備は完了。あとはHTMLだけ!

 

手順②タイトル下のHTMLを編集する

先ほど記載したとおり、今回はCSSの編集は不要です。代わりにHTMLのデータを編集する必要があります。

 

難しいことはまた別の機会にご紹介しますので、今回は下記手順のとおり進めてみてください。

 

デザイン画面から「ヘッダ」をクリック。入力エリアが表示されます。

 

【はてなブログ限定】メニューバーを3分で表示する方法

 

【はてなブログ限定】メニューバーを3分で表示する方法

 

表示された入力エリアに、下記のコードを編集して入力すれば、メニューバーが出てきます。

それぞれ赤字の個所に、表示したいメニュー名とページのURLを入れてみてください。

URLを間違うと違うページに行ってしまったり、リンク切れになってしまうので注意が必要です。 

 

<nav class="main-navigation">
<div class="menu-toggle">スマホでのメニュー名</div>
<div class="main-navigation-inner">
<ul>
<li><a href="URL1">メニュー名1</a></li>
<li><a href="URL2">メニュー名2</a></li>
<li><a href="URL3">メニュー名3</a></li>
<li><a href="URL4">メニュー名4</a></li>
<li><a href="URL5">メニュー名5</a></li>
</ul>
</div>
</nav>

 

メニューバーは出ましたでしょうか。

 

このように、デザインの設定はCSSで行うのですが、HTML側の準備が整っていないと表示ができないのです。

 

今回ははてなブログの用意しているブログテーマCSSの中にメニューバーの設定があったので、それをHTMLで呼んであげるような設定をしました

 

それでは、ここからはオプションのお時間です。

 

すぐに使えるコード集を置いておきますので、それぞれのアレンジをお楽しみいただければと思います。

 

アレンジ①色を変える

バーの色を変えるには、CSSに下記のコードを追加します。

CSS側の編集が初めての方はこちらの記事に手順を掲載しておりますので、ご参照いただければと思います。

 

【保存版】はてなブログで自由なデザインを設定する方法【CSS】 - Change Forward

 

【追加するコード】

 

.main-navigation,
.main-navigation ul ul{
background-color: #5f9ea0;
}

 

こちらの赤字の部分を編集してみてください。お好みの色でバーが表示できます。

文字の色を変えるには下記のコードを追加してください。

 

.main-navigation a {
color:#ffffff;
}

 

カラーコードはこちらからどうぞ。

 

グラデーションカラーコード一覧 - Change Forward

 

アレンジ②サイズを変える

バーの縦幅を変えたいという方はこちらをご参照ください。

 

.main-navigation a {
padding-top:0.3em;
padding-bottom:0.3em;
}

 

これは、メニューバーの中に表示されている文字と、バーの上下の間隔を設定するコードです。

数字を大きくするほどバーは太く、小さくするほどバーは細くなります。

 

アレンジ③配置を変える

下記に「right」「center」「left」と記載することで、メニュー名を表示する位置が変更できます。当サイトは「left」です。

 

.main-navigation-inner {
text-align: center;
}

 

アレンジ④ふわっとアンダーラインを出す

以前ご紹介したこちらのコードです。

 

.main-navigation ul li {
transition: 0.2s ;
}

.main-navigation a {
position: relative;
display: inline-block;
text-decoration: none;
}

.main-navigation a::after {
position: absolute;
bottom: 0px;
left: 0;
content: '';
margin:0 10% 0 10%;
width: 80%;
height: 2px;
background: #ffffff;
opacity: 0;
visibility: hidden;
transition: .3s;
}

.main-navigation a:hover::after {
bottom: 10px;
opacity: 1;
visibility: visible;
}

 

赤字のカラーコードを編集すれば、色が変更できます。

 

アレンジ⑤サブメニューを増やす

こちらは、最初に設定したHTMLの方を編集する必要があります。

赤字の部分を参考に編集してみてください。

HTMLの編集は最初に記載のとおり、デザイン>ヘッダ>タイトル下 から行います。

 

<nav class="main-navigation">
<div class="menu-toggle">スマホでのメニュー名</div>
<div class="main-navigation-inner">
<ul>
<li><a href="URL1">メニュー名1</a></li>
<li><a href="URL2">メニュー名2</a></li>

<ul class="second-content">
<li><a href="URL2-1">メニュー名2-1</a></li>
<li><a href="URL2-2">メニュー名2-2</a></li>
</ul>
</li>

<li><a href="URL3">メニュー名3</a></li>
<li><a href="URL4">メニュー名4</a></li>
<li><a href="URL5">メニュー名5</a></li>
</ul>
</div>
</nav>

 

変更した点は赤字です。</li>の位置が少し変わりますのでご注意ください。

 

この記載をすることで、メニュー名2にマウスを置いたときに、下にメニュー名2-1と2-2が表示されるような動きが設定できます。

 

アレンジ⑥スマホに対応する

スマホでも利用できるように、追加の対応をしておくこともできます。
1分でできますのでぜひ。

【はてなブログ限定】スマホ対応メニューバーを表示する - Change Forward

 

メニューバーの活かし方

このように、はてなブログにはエネルギーを使わずにオシャレなデザインができるテーマがあります。

 

そして、せっかくですので、この機能の活かし方も考えました。

 

このメニューバーの良いところは、「自分で見せたいリンクを決められる」点です。

 

例えば

 

  • トップページへ飛ぶ
  • おすすめ記事10選(記事)に飛ぶ
  • ○○カテゴリーに飛ぶ

 

などと、標準機能では本来並べづらい「トップページへのリンク」「記事へのリンク」「カテゴリへのリンク」を同じメニューバーの中で並列で並べることもできるようになり、閲覧者がサイト内を巡りやすくすることもできます。

 

また、本来一つの記事でしかないおすすめ記事10選へ、閲覧者の方を導きやすいようにしています。

 

このように、「自分の見せたい記事を一覧にした記事」などをアピールするにはとてもよい機能ではないかと思います。

 

機能とアイデアでサイトは洗練される。

 

 

メニューバー表示は3分でできる 

以上のとおり、はてなブログの隠れ標準機能を利用することで、簡単にメニューバーは表示することができます。

 

ぜひ、いろいろなアレンジをして楽しんで頂ければと思います。

 

【デザインを整えたら収益化も】

アフィリエイトは自分のサイトに広告を表示し、申込の件数によって報酬がもらえる仕組みです。メディアを持っていれば、働かなくても収入が得られるビジネスとして、根強い人気があります。
興味のある方は下記のリンクからご覧ください。

 

【バリューコマース】

【もしもアフィリエイト】