Change Forward

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

【はてなブログ限定】メニューバーは3分で表示できた件

 

はてなブログ限定】メニューバーは3分で表示できた件

   

【はてなブログ限定】メニューバーは3分で表示できた件

 

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

 

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

 

少し惜しみたいところではありますが、今回はこちらのメニューバーを表示するコードをなんと特別価格(0円)でご提供致します!

 

今ならキャンペーンでオプション設定のノウハウもお付けします。

 

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

 

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

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

 

ジャ〇ネットタ〇タみたい。。

 

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

 

 

メニューバーは最初からそこにあった

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

 

どういうことでしょうか。

 

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

 

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

 

これまではCSSを編集することで見た目を変更する方法をご紹介してきましたが、今回はなんと、こちらにでき上がったものがございます。

 

今度は3分クッキ〇グみたいだな。。

 

そのため、CSSには触れずにHTMLを編集することで、メニューバーを表示できる状況になっているのです。

 

HTMLファイルの編集については初めてのご紹介となりますので、これより手順をご紹介いたします。 

 

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

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

 

ブログテーマとは、サイトの開設時に選ぶデザインのパッケージで、その時は好みで選ばれたのではないかと思います。

 

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

※ブログテーマを変更する際、これまでの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側の編集が初めての方はこちらの記事に手順を掲載しておりますので、ご参照いただければと思います。

 

www.biz-thinking-k.com

 

【追加するコード】

 

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

 

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

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

 

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

 

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

 

www.biz-thinking-k.com

 

 

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

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

 

.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が表示されるような動きが設定できます。

 

 

アレンジ⑥スマホに対応する(2019/6/23追加)

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

1分でできますのでぜひ。

 

www.biz-thinking-k.com


 

メニューバーの活かし方

このように、はてなブログにはエネルギーを使わずにオシャレなデザインができるテーマがあります。(私はinnocentしか知らないのですが、他にもありそうです)

 

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

 

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

 

押していただけるとわかるのですが、私のメニューバーは左から、

 

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

 

としています。標準機能では本来並べづらい「トップページへのリンク」「記事へのリンク」「カテゴリへのリンク」を同じメニューバーの中で並列で並べることで、サイトの巡りやすさを意識しました。

 

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

 

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

 

このように、デザインがよくなっただけではなく、それをどう活かせるかというところも一緒に考えていくと、ブログがどんどん良くなるのではないかと思っています。

 

僭越ではありますが。。

 

 

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

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

 

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

また、ほかによい使い方が見つかったら、シェアしていただけると嬉しいです。

 

今回もご覧くださり、ありがとうございました。

 

このブログははてなブログで運営しています。
スター・ブックマーク・読者登録いただけると励みになります。
 

 

2019.6.16 掲載

2019.7.6 更新