はてなブログでメニューバーを自作する方法!一工夫でカルーセルも設置可能!【誰でもできる簡単手順】

メニューバー、カルーセルアイキャッチ
かまさん
かまさん

こんにちは[はてなブロガー]のかまさんです。

はてなブログを使ってCSSとHTML+αを勉強しつつ趣味ではてなブロガーをやってます。

かまさん
かまさん

何故かスマホでやるって制限つけてます・・・

ちなみにWordPressの方はスマホで出来る範囲(記事編集や作成)のことはスマホでやってますけど、プラグイン等のサイトのことではパソコンを使ってます。

くにもん
くにもん

パソコン俺のだけどな〜!

かまさん
かまさん

そっそれナイショ・・・

くにもん
くにもん

で?今日は何を教えてくれんの?

かまさん
かまさん

今日は、はてなブログで使えるメニューバーの説明です。

はてなブログはデザインをCSSやHTMLを使って好きなようにカスタマイズすることができるのでプログラミングやウェブデザイン等の勉強にもってこいのブログサイトです。

かまさん
かまさん

基本的に無料でブログを作れるからおすすめです。

はてなブログ

はてなブログ

株式会社はてな無料posted withアプリーチ

くにもん
くにもん

有料版も独自ドメインが持てるからおすすめだよ!

かまさん
かまさん

くにもんはてなブログやってないじゃん!

かまさん
かまさん

今回の記事を読むと下記の事ができるようになります。

  • メニューバーの作成
  • カルーセルの作成
  • flexボックスを使える
  • paddingが自由自在
  • marginが自由自在

メニューバーの作成方法

くにもん
くにもん

メニューバーってなんの事?

かまさん
かまさん

くにもんテンプレばっかだからわかんないか・・・

メニューバーって?

かまさん
かまさん

くにもんみたいにメニューバーって何だ?ってなってる方もいると思います。

メニューバーは簡単に言うとブログによくあるカテゴリーや記事に飛ばすリンクの帯のことです。

かまさん
かまさん

形は帯状とは限りません・・・

帯状のものでなくとも、だいたいの場合リンクを案内として設置するので用途は同じです。

かまさん
かまさん

⇩こんな感じのです⇩

デザインのカスタマイズ

はてなブログのテーマデザインをカスタマイズしたいときはCSSとHTMLの知識が最低限必要になってきます。

かまさん
かまさん

テーマはテンプレと思ってオッケー!

自分で作成することができなくでもコピペで使えるようにしてくれる方が沢山いるので使い方さえ覚えておけばだいたいは大丈夫です。

かまさん
かまさん

コピペバンザイ\(^o^)/

ですが、自分でもデザインを作ってみたいと考える方も多いと思います。

かまさん
かまさん

今回は作成する手順を解説します。

難しいと思った方は下の方にまるっとあるのでコピペで使ってもらっても大丈夫です。

かまさん
かまさん

最初は僕もコピペばっかりでした。

メニューバーの作成手順

かまさん
かまさん

今回は帯状タイプで作っていきます。

1番単純な方法だと思うflexbox(Flexible Box Layout Module)というもの使用して作成していきますので難しい事は何もやってないです。

かまさん
かまさん

意味は・・・ハイッ!分かりません!

BOXを横並びにすることが容易になるので、flexboxは使い勝手がとても良いです。

かまさん
かまさん

今回は下記の手順で作っていきます。

  1. BOX内に横並びのBOXを作る
  2. 文字をきれいに表示する。
  3. BOXからはみ出した分をスクロール
  4. リンクを作る
  5. 文字の装飾を解除

手順①:BOX内に横並びのBOXを作る

かまさん
かまさん

まずBOXを2種類作ります。

最初に元になる親BOX子BOXと呼ばれるものを作ります。

かまさん
かまさん

BOXというのは単純に考えて枠要素の事です。

詳細を語ると長くなってしまいますので割合しますが、今読まれているこの文字もBOXの中に書かれています。

かまさん
かまさん

BOX自体に色がついていないので見えていないだけです。

BOXの中にBOXを入れてさらにBOXを入れて、またさらにBOXを入れる事も可能です。

CSSで元になるBOXを使ってHTMLで呼び起こします。

かまさん
かまさん

CSSとHTMLはセットだと思って大丈夫です。

さらに元となるプログラムは存在しますが、現状で使わないので気にしなくていいと思います。

かまさん
かまさん

僕も知りません。

くにもん
くにもん

前置き長いんだけど・・・

かまさん
かまさん

さ〜せん・・・

それでは、進めていきます。

まず、親となるBOXの親BOX親BOXの中に入る子BOX作っていきましょう。

親BOXと子BOXの作成
かまさん
かまさん

今回はCSSとHTMLをスタイルタグを使って一緒に書いていきます。

スタイルタグというのはHTML内にCSS記述ができる便利なタグで、<style><!–■–></style>と書いて■部分をCSSに置き換えるだけです。

かまさん
かまさん

CSSのデザインはHTMLを使って表示されます。

呼び込む方法は1つではないですが、作成したBOXは<div class=”〇〇”></div>で呼び込むことが一番簡単だと思います。

かまさん
かまさん

では、実際に書いてみましょう

<style><!--
/*親BOX*/
.flexbox{
border: solid 2px red;/*枠線種類、太さ、色*/
}
/*子BOX*/
.flexchild{
border: solid 2px black;/*枠線種類、太さ、色*/
}
--></style>
<div class="flexbox">親BOX</div>
<div class="flexchild">子BOX</div>
かまさん
かまさん

これで親BOXと子BOXが出来ましたが、上記記述をそのまま表示すると下記のようになります。

かまさん
かまさん

今は親BOXの外に子BOXがあります。

親BOXの中に子BOXを入れる
かまさん
かまさん

少しだけ記述を変えるだけで子BOXは親BOXの中に表示されます。

<style><!--
/*親BOX*/
.flexbox{
border: solid 2px red;/*枠線種類、太さ、色*/
}
/*子BOX*/
.flexchild{
border: solid 2px black;/*枠線種類、太さ、色*/
}
--></style>
<div class="flexbox">親BOX
<div class="flexchild">子BOX</div>
</div>
かまさん
かまさん

ホントに少し変わっただけです。

これを表示すると下記のようになります。

かまさん
かまさん

子BOXは親BOXの中に入りました。

記述内の親BOXの後ろについていた</div>を一番に後ろに持っていっただけですが、子BOXを内側に入れたことになります。

HTMLの記述では<div~始まり</div>で終わりますが、間に<div~始まりが入った場合は終わりの</div>は一つ繰り越しになり後述した<div~</div>が先に閉められます。

かまさん
かまさん

次は子BOXを沢山入れてみます。

<style><!--
/*親BOX*/
.flexbox{
border: solid 2px red;/*枠線種類、太さ、色*/
}
/*子BOX*/
.flexchild{
border: solid 2px black;/*枠線種類、太さ、色*/
}
--></style>
<div class="flexbox">
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
</div>
かまさん
かまさん

親BOXの表記は消しました。

親BOXの中にたくさんの子BOXが入っていますが、目的のメニューバーの形になっていません。

かまさん
かまさん

作成したいメニューバーは横並びです。

子BOXを横並びに
かまさん
かまさん

1つの要素を加えるだけで子BOXが横並びになります。

<style><!--
/*親BOX*/
.flexbox{
border: solid 2px red;/*枠線種類、太さ、色*/
display: flex;
}
/*子BOX*/
.flexchild{
border: solid 2px black;/*枠線種類、太さ、色*/
}
--></style>
<div class="flexbox">
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
<div class="flexchild">子BOX</div>
</div>
かまさん
かまさん

親BOXの要素にdisplay: flex;を加えました。

BOXにdisplay: flexを追加すると、BOXはflexbox(Flexible Box Layout Module)に変わります。この場合親BOXに要素を加えたので親BOXがflexboxにかわります。

かまさん
かまさん

上記の記述をそのまま表示すると下記のようになります。

かまさん
かまさん

子BOXが横並びになりました。

次に進む前に少し記述を整えて下記の記述を使います。

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;
border: solid 2px red;/*枠線種類、太さ、色*/
}
.flexchild{
border: solid 2px black;/*枠線種類、太さ、色*/
}
--></style>
<div class="flexbox">
<div class="flexchild">あいうえお</div>
<div class="flexchild">かきくけこ</div>
<div class="flexchild">さしすせそ</div>
<div class="flexchild">たちつてと</div>
<div class="flexchild">なにぬねの</div>
<div class="flexchild">はひふへほ</div>
<div class="flexchild">まみむめも</div>
<div class="flexchild">やゆよ</div>
<div class="flexchild">わをん</div>
</div>
かまさん
かまさん

加えた要素は親BOXにpadding: 5px;

paddingは内側の余白を意味しているのですが、今回は親BOXの要素に加えたので親BOXの内側に余白が作られます。

かまさん
かまさん

だんだんとメニューバーらしくなってきました。

手順②文字をきれいに表示する

かまさん
かまさん

今のままではまだ不格好なので今度は中身を整えていきます。

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;/*枠の内余白*/
border: solid 2px red;/*枠線種類、太さ、色*/
}
.flexchild{
border: solid 2px black;/*枠線種類、太さ、色*/
white-space: nowrap;
}
--></style>
<div class="flexbox">
<div class="flexchild">あいうえお</div>
<div class="flexchild">かきくけこ</div>
<div class="flexchild">さしすせそ</div>
<div class="flexchild">たちつてと</div>
<div class="flexchild">なにぬねの</div>
<div class="flexchild">はひふへほ</div>
<div class="flexchild">まみむめも</div>
<div class="flexchild">やゆよ</div>
<div class="flexchild">わをん</div>
</div>
かまさん
かまさん

今度は子BOXにwhite-space: nowrap;を加えました。

white-space:は中身の改行やスペースに対しての要素でnowrap;と指定してあげることで折り返す事をやめます。

逆にnowrap;が指定してあるものでもwhite-space: wrap;と指定してあげると折り返して表示させることが出来ます。

かまさん
かまさん

初期値は基本normal(どちらでもない)でテーマ等に依存するようです。

子BOXの中身の文字は折り返す事をやめてまっすぐになりましたが、親BOXのスペースが足りず外にはみ出す形になっています。

かまさん
かまさん

次はこのはみ出した子BOXの改善が必要です。

手順③BOXからはみ出した分をスクロール

かまさん
かまさん

今度はまた、親BOXに要素を追加します。

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;/*枠の内余白*/
border: solid 2px red;/*枠線種類、太さ、色*/
overflow-x: scroll;

}
.flexchild{
border: solid 2px black;/*枠線種類、太さ、色*/
white-space: nowrap;/*折り返し禁止*/
}
--></style>
<div class="flexbox">
<div class="flexchild">あいうえお</div>
<div class="flexchild">かきくけこ</div>
<div class="flexchild">さしすせそ</div>
<div class="flexchild">たちつてと</div>
<div class="flexchild">なにぬねの</div>
<div class="flexchild">はひふへほ</div>
<div class="flexchild">まみむめも</div>
<div class="flexchild">やゆよ</div>
<div class="flexchild">わをん</div>
</div>
かまさん
かまさん

親BOXにoverflow-x: scroll;を加えました。

overflow-x: scroll;はoverflow(はみ出し)をX軸(横軸)でscroll(動かす)という意味になっていて見えなくなった部分をスライド表示させられるようになります。

かまさん
かまさん

ここまでくると形はほとんどできてます。

リンクを作る

かまさん
かまさん

次はリンクを作っていきますが、HTMLで書くと大変なので少し小技を使います。

はてなブログの記事編集にあるリンク作成機能を使えばHTMLを使って書く必要がないので初心者のかたにはとてもおすすめです。

まず、リンク先のURLを準備(コピー)して、はてなブログの記事編集画面を開きます。

かまさん
かまさん

書くと長くなるので画像にしたがって進めていきます。

かまさん
かまさん

これでリンクが出来あがっているので今度は記述を見てみましょう。

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;/*枠の内余白*/
border: solid 2px red;/*枠線種類、太さ、色*/
overflow-x: scroll;/*スクロール(横軸)*/

}
.flexchild{
border: solid 2px black;/*枠線種類、太さ、色*/
white-space: nowrap;/*折り返し禁止*/
}
--></style>
<div class="flexbox">
<div class="flexchild"><a href="リンク先URL">あいうえお</a></div>
<div class="flexchild">かきくけこ</div>
<div class="flexchild">さしすせそ</div>
<div class="flexchild">たちつてと</div>
<div class="flexchild">なにぬねの</div>
<div class="flexchild">はひふへほ</div>
<div class="flexchild">まみむめも</div>
<div class="flexchild">やゆよ</div>
<div class="flexchild">わをん</div>
</div>
かまさん
かまさん

リンクとなった文字の記述が変化しました。

HTMLで追加記入しても、リンク作成機能を使っても出来上がるものに変わりはないので自身のやりやすいやり方で大丈夫です。

かまさん
かまさん

追加されたものは下記の記述です。

<a href="リンク先URL">〇</a>

追加された記述のリンク先URLに変更し、〇の部分はリンクにしたいテキスト(文字)などを入れると出来上がりです。

かまさん
かまさん

下記の形になればOKです。

<div class="flexchild"><a href="リンク先URL">あいうえお</a></div>

文字の装飾を解除

かまさん
かまさん

リンクにしたことで文字の装飾が勝手についてしまいました。

はてなブログではリンクを作ると基本的に文字が青くなり下線がついてしまいます。

メニューバーを設置したい箇所はおそらくトップページ(ホーム)のヘッダーだと思いますが、メニューバーのテキストが全て青色下線付きだと正直微妙です。

かまさん
かまさん

使用しているテーマにも依存します

トップページでのリンク文字の装飾が初めから解除してある場合もありますが、今回は消し方を載せておきます。

.flexchild a{
text-decoration: none;
color: black;
}

上記の記述をCSSが記述してあるスタイルタグの中に入れ込むだけで装飾は解除されます。

かまさん
かまさん

実際の記述です。

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;/*枠の内余白*/
border: solid 2px red;/*枠線種類、太さ、色*/
overflow-x: scroll;/*スクロール(横軸)*/

}
.flexchild{
border: solid 2px black;/*枠線種類、太さ、色*/
white-space: nowrap;/*折り返し禁止*/
}
.flexchild a{
text-decoration: none;
color: black;
}
--></style>
<div class="flexbox">
<div class="flexchild"><a href="リンク先URL">あいうえお</a></div>
<div class="flexchild">かきくけこ</div>
<div class="flexchild">さしすせそ</div>
<div class="flexchild">たちつてと</div>
<div class="flexchild">なにぬねの</div>
<div class="flexchild">はひふへほ</div>
<div class="flexchild">まみむめも</div>
<div class="flexchild">やゆよ</div>
<div class="flexchild">わをん</div>
</div>
かまさん
かまさん

はてなブログ内でもきちんと消えます。

かまさん
かまさん

これでメニューバーに最低限必要な要素がが全てそろいました。

メニューバーのカスタマイズ

かまさん
かまさん

今のままでは味気ないので今度はメニューバーに簡単な装飾を施していきます。

今回は文字と背景のみを行なっていきますので、それ以上の装飾を実装したい場合は多少の勉強が必要になります。

かまさん
かまさん

僕が実際に使用しているおすすめの勉強教材を紹介します。

かまさん
かまさん

完全に事典です。

正直これが一番使います。

かまさん
かまさん

入門編です。

正直CSS、HTMLの入門として他にはいらないです。

かまさん
かまさん

実践編です。

ここからは結構レベルアップします。

くにもん
くにもん

俺も欲しいな・・・

かまさん
かまさん

それではデザインを整えてみます。

かまさん
かまさん

記述は下記のようになります。

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;/*枠の内余白*/
overflow-x: scroll;/*スクロール(横軸)*/

}
.flexchild{
white-space: nowrap;/*折り返し禁止*/
padding: 5px;/*枠の内余白*/
background-color: dimgray;/*背景色*/
font-weight: 900;/*文字の太さ*/
}
.flexchild a{
text-decoration: none;/*下線の解除*/
color: pink;/*文字の色*/
}
--></style>
<div class="flexbox">
<div class="flexchild"><a href="リンク先URL">[あいうえお]</a></div>
<div class="flexchild"><a href="リンク先URL">[かきくけこ]</a></div>
<div class="flexchild"><a href="リンク先URL">[さしすせそ]</a></div>
<div class="flexchild"><a href="リンク先URL">[たちつてと]</a></div>
<div class="flexchild"><a href="リンク先URL">[なにぬねの]</a></div>
<div class="flexchild"><a href="リンク先URL">[はひふへほ]</a></div>
<div class="flexchild"><a href="リンク先URL">[まみむめも]</a></div>
<div class="flexchild"><a href="リンク先URL">[やゆよ]</a></div>
<div class="flexchild"><a href="リンク先URL">[わをん]</a></div>
</div>
かまさん
かまさん

配色したので枠は消しました。

デザインをカスタマイズする上で必ず必要になってくるのはおそらく色だと思います。

色が単色でも問題は特にありませんが、色を付けた方が見やすくもなりますし、映えることは間違いないでしょう。

かまさん
かまさん

見てわかると思いますが・・・

僕にセンスなんてものは存在しません!!

追加、変更した要素

かまさん
かまさん

簡単に解説します。

今回追加、変更した要素はbackground-color:、font-weight:、color:の3つです。

かまさん
かまさん

background-color:は背景色です。

今回はbackground-color:(背景色)を子BOXに追加して子BOXの背景をdimgray;(ちょっと濃いグレー)に変更しました。

かまさん
かまさん

color:は文字色です。

今回、文字(テキスト)は<a>というタグになっているので、装飾前color: black;となっていた部分をcolor: pink;に変更しただけになります。

かまさん
かまさん

そしてfont-weight:は文字の太さです。

今回は子BOXの要素に入れていますが、.flexchild a{}の中に入れても同様に文字の太さを変えることが出来ます。

太さは900;としていますが、100~900まで百単位で太さを変更することが出来ます。

かまさん
かまさん

ザックリとしましたがメニューバーは難しく考える必要はないので大丈夫です。

はてなブログ用メニューバー

かまさん
かまさん

さらに少しだけカスタマズしたものを用意しました。

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;/*枠の内余白*/
overflow-x: scroll;/*スクロール(横軸)*/
background-color: black;/*背景色*/

}
.flexchild{
white-space: nowrap;/*折り返し禁止*/
padding: 5px;/*枠の内余白*/
background-color: dimgray;/*背景色*/
font-weight: 900;/*文字太さ*/
font-size: 120%;/*文字サイズ*/
margin: 5px;/*子BOX外側余白*/
}
.flexchild a{
text-decoration: none;/*リンク下線を消す*/
color: pink;/*リンク文字の色*/
}
--></style>
<div class="flexbox">
<div class="flexchild"><a href="リンク先URL"><span class="blogicon-home">HOME</span></a></div>
<div class="flexchild"><a href="リンク先URL"><span class="blogicon-cog">カテゴリー①</span></a></div>
<div class="flexchild"><a href="リンク先URL"><span class="blogicon-design">カテゴリー②</span></a></div>
<div class="flexchild"><a href="リンク先URL"><span class="blogicon-heart">カテゴリー③</span></a></div>
<div class="flexchild"><a href="リンク先URL"><span class="blogicon-user">プロフィール</span></a></div>
</div>
かまさん
かまさん

はてなブログで表示できるアイコンを追加しています。

かまさん
かまさん

コピペして好きなようにカスタマイズしてください。

カスタマイズおまけ

はてなブログを使っているならアイコンが難しいダウンロード、インストールなしで使用することが出来ます。

下記の記事ははてなブログのアイコンの使い方が詳しくまとめてありますので、メニューバーにアイコンを付けたいときは活用されてください。

かまさん
かまさん

ちなみにまとめたのも僕です。

かまさん
かまさん

配色でお困りの時はこちらも

一工夫でカルーセル

メニューバーを作ることが出来ると、カルーセルは簡単に作ることが出来ます。

かまさん
かまさん

下記は僕のはてなブログのトップページヘッダー部分です。

かまさん
かまさん

実際の記述です。

コピペして使っても全然大丈夫です。

<style><!--
@media screen and (min-width: 640px){
.flexbox {
  overflow-x:scroll;
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  margin: −1px -1px;
  max-width: 100%;
  
}

.categorybox {
  display: block;
  box-sizing: border-box;
  width: auto;
  min-width: 25%;
  margin-bottom: 2px;
  padding: 0;
}

.categorycontent {
  text-align: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0;
}
.categorycontent img{
    width: 100%;
object-fit: contain;
}
}
@media screen and (max-width: 640px){
.flexbox {
  overflow-x:scroll;
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  margin: −1px -1px;
  max-width: 100%;
  
}

.categorybox {
  display: block;
  box-sizing: border-box;
  width: auto;
  min-width: 65%;
  margin-bottom: 2px;
  padding: 0;
}

.categorycontent {
  text-align: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0;
}
.categorycontent img{
    width: 100%;
object-fit: contain;
}
}
--></style>
<div class="flexbox">
<div class="categorybox">
<div class="categorycontent"><a href="リンク先URL"><img src="画像URL" image="" /></a></div>
</div>
<div class="categorybox">
<div class="categorycontent"><a href="リンク先URL"><img src="画像URL" image="" /></a></div>
</div>
<div class="categorybox">
<div class="categorycontent"><a href="リンク先URL"><img src="画像URL" image="" /></a></div>
</div>
<div class="categorybox">
<div class="categorycontent"><a href="リンク先URL"><img src="画像URL" image="" /></a></div>
</div>
</div>
かまさん
かまさん

要素は必要に応じて追加、変更が必要です。

この記事では詳しい解説はしませんが、カルーセル型(カード型、画像型)もメニューバーと正直かわりません。

かまさん
かまさん

リンクを付ける範囲が画像になっただけです。

下記はこの記事で使ったメニューバーをほんの少しだけいじったカルーセルタイプのリンクです。

See the Pen by かまさん🐾のんびりしすぎな独学ヤロー (@kamasanchi) on CodePen.

かまさん
かまさん

文字の要素とか消していいです。

上記では残したままですが、実際は文字を使わない場合は文字に対しての要素は消して大丈夫です。

あとがき

今回はflexbox(Flexible Box Layout Module)を使ったメニューバーとカルーセルの作り方を紹介しました。

かまさん
かまさん

ホントに簡単でしょ!

CSSとHTMLの全体を見てしまうと難しく思えてしまいますが、一つ一つ見ていくと結構わかるものです。

かまさん
かまさん

僕に出来るならだれでも出来る!

全く同じ形(デザイン)でも中身(要素)はみんな同じではないので自身でわかる範囲で作っていけば全然問題ないです。

一から自身で作成するのも、コピペから少し変更を加えたりして使い方を思えるだけで出来ることも多くなっていきますので、まずはCSSとHTMLを使ってみましょう

かまさん
かまさん

最後までお付き合いいただきありがとうございました。

コメント

タイトルとURLをコピーしました