はてなブログでメニューバーを自作する方法と【初心者にもできる簡単手順】

はてなブログをCSS&HTML勉強の為に使わせていただいています。(スマホだけやってます)

かまさんです。

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

デザインのカスタマイズ

ブログのデザインをカスタマイズするときってコピペで作るのも早くて便利なので助かりますけど・・・(^_^;)

自分でもデザインを作ってみたいと思いますよね(^^)

そんな方はこの記事を読みながら作って見てください。

めんどくさいと思った方は下の方にまるっとあるのでコピペで使ってもらっていいです(^^)

メニューバーって?

そもそもメニューバーってなに?と思ってるかたもいると思います。

簡単に言うとブログによくあるカテゴリーや記事に飛ばすリンクの帯ですね^_^

形は帯だけでわないですけど・・・(^_^;)

結構帯のタイプを見る場合が多いと思います・・・?

⇩こんな感じの^_^

最初はコピペで帯タイプ

そんな私も最初はコピペで実装を使わせていただいておりましたが、

今はちょっとレベルアップして画像つきのものに変更しています。

⇩こんな感じに^_^

メニューバーの作成

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

すごく単純に作るので難しいことはやってないです。

簡単な方法としてflexbox(Flexible Box Layout Module)を使用して作って行きましょう

意味は・・・ハイッ!分かりません( ゚д゚ )!!

普通にBOXだけで作っていくことも可能ですが、単純に要素が増えるだけなのでやめておきます^_^

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

最初に親box子boxを作ります。

boxというのは単純に変幻自在な枠ですね!

詳細はわからないのですが・・・

CSSでクラス名の.〇〇{}と{}内に要素を書いてHTMLで呼び起こすものって思ってます。

※独学で勉強を始めたばかりです(^_^;)

詳しいことは何にも分かりませんm(_ _)m

それでわ、さっそく作って行きましょう。

親となるboxの中にdisplay: flex;と書きます。

たったこれだけで中に入る子boxは横並びに設置されます(^^)

実際に書いてみましょう⇩

【HTMLで使えるCSS記述】

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

【はてなブログ】のHTML編集ページでそのまま使えるように<style>タグを使ってます。

WordPressの記事編集でも問題なく使えます。

必要ない場合は外して大丈夫です。

※ちなみに枠の要素は見やすいようにつけてます(*^^*)

【HTML記述】

<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>

どうなるか【はてなブログ】のHTML編集で見てみましょう(^^)

⇩【はてなブログ】の記事編集画面

display: flex;を指定したflexboxという親boxの中にflexchildという子boxを入れると上の右画面のような形に表示されます。

※ちなみにですがboxのクラス名は半角で書けば何でも大丈夫です。極端に.oyaとか.kodomoでもありです(^^)

親boxにはdisplay: flex;以外にちょっと見やすくするための余白と枠線をつけているだけで、子boxには見える化の為の枠線だけつけています。

display: flex;超がつくほどの便利要素だと思います(^^)

でも今は・・・

文字が折り返されちゃって見栄え的に良くないですね(^_^;)

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

今度は文字が折り返されないように子boxに対して折り返されない要素を追加しましょう。

ここからしばらくHTMLはハショリます(^^)

※ハショリ=歩合、省く(方言かな?)

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

子boxに対してwhite-space: nowrap;を追加しました。

white-space: nowrap;は中身を勝手に折り返さないでね!って意味になります。

※勝手に?➡改行等で折り返すことはできます。

ここで、今どうなってるか見て見ましょう(^^)

⇩【はてなブログ】記事編集画面

中身の文字はきれいになりました・・・

けど、親boxからはみ出してどっかいっちゃってます(¯―¯٥)

このままだと不格好すぎますね(^_^;)

そんなわけで次に進みます。

手順③BOXからはみ出した分を〇〇

今度は、親boxに対して要素を増やします。

<style><!--
.flexbox{
display: flex;/*【重要】 中身が横に並びます*/
padding: 5px;/*枠の内余白*/
border: solid 2px red;/*枠線種類、太さ、色*/
overflow: scroll;/*【追加】*/
}
.flexchild{
white-space: nowrap;/*勝手に折り返さないでね*/
border: solid 2px black;/*枠線種類、太さ、色*/
}
--></style>

overflow: scroll;⇦これを追加しました。

追加すると、どうなると思いますか?

・・・

それでわ、見てみましょう(^^)

⇩【はてなブログ】記事編集画面

なんと!!はみ出した分が見えなくなって動かせるようになりました(*^^*)

ちょっとわかりにくいので、実際にこっちに作ってみます(^_^;)

触って左右に動かして見てください。

⇩こんな感じになります(^^)

あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
や ゆ よ
わをん  

overflow: scroll;意味はoverflow(はみ出した)ところはscroll(動かせるよ)みたいなニュアンスです。

ここまででメニューバーの大元ができました(^_^)

以外に簡単だったと思いませんか?

枠線、余白以外に3つの要素・・・

① display: flex;

② white-space: nowrap;

③ overflow: scroll;

しか使ってないないんですよ(^^)

手順④リンクを作る

大元ができているので今度はHTMLの方でリンクを作っていきます。

リンクを作るのに必要なのは<a>タグ(Anchor)というものです。

HTML部分の一文を抜粋して少し書いてみます。

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

追加されたのは⇩記述になります。

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

この<a>タグで指定したい場所をはさみ込んで【"】と【"】の間に飛ばしたいURLを書くとリンクは出来上がり、今回は子boxの中にある文字部分をリンクとして指定したことになります。

難しいときは【はてなブログ】のリンク作成機能をつかうとURLだけで簡単にリンクを作ることができます(^^)

⇩【はてなブログ】記事編集画面

①範囲を指定します。

②リンクボタンを押します。

③リンク先のURLを入れます。

④プレビューボタンを押します。

⑤表示形式(どう表示するか)を選択します。

⑥選択した形式でリンクを挿入を押す(確定ボタンです)

これで、リンクが作成されたことになります。

これをHTML編集に切り替えると、さっきの記述と同じになります(^^)

⇩【はてなブログ】記事編集のHTML表示

自信で書くのも作成機能を使うのもリンクの数だけ繰り返さないといけません(^_^;)

それが終わればほとんどメニューバーは完成しています(*^^*)

ここで気になるのは文字色が変わっていることと文字に下線がついたことだと思います(¯―¯٥)

手順⑤装飾を戻す

これが起きるのは、おそらく(テーマにもよるのかな?)記事内だけだと思います。

もしヘッダーなどに入れても残っているようであれば<style>タグ内に次の記述を追加してください。

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

これで文字の装飾が元に戻っているのがわかると思います。

ここでちょっと違う記述が出てきました。

.flexchild a{}これは、子boxの中にある<a>タグに対して指定しますよって意味で{}内は指定する要素を書きます。

今回書いたのは、text-decoration: none;(装飾はしないよ)とcolor: black;(文字色は黒だよ)です。

blackを変えれば違う色に変えられます。

手順①〜⑤のおさらい

※おさらい=復習(これは通じたよね)

長くなってしまったので、ここまでで出来ているものをまとめてみます(^^)

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;/*枠の内余白*/
border: solid 2px red;/*枠線種類、太さ、色*/
overflow:scroll;/*はみ出したら動かして*/
}
.flexchild{
white-space: nowrap;/*勝手に折り返すのはダメ*/
border: solid 2px black;/*枠線種類、太さ、色*/
}
.flexchild a{
text-decoration: none;/*文字に装飾しないで*/
color: black;/*文字色は黒*/
}
--></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>

次の手順の為に文字部分は変更しました。(^_^;)

これを表示すると⇩こうなります(^^)

見てわかると思いますがこのメニューバーは文字数分だけ伸びたり縮んだりします。

※空白にしている部分は、全角で空白を入れることでその分を余白として作ることもできます(^^)ですが、あまりオススメはしません。

これわこれで使おうと思えば使えるものですが、もう少し整えたいですね(^_^;)

手順⑥子boxの中身を整える

今回は余白だけを使って少しだけ整えてみましょう、

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;/*枠の内余白*/
border: solid 2px red;/*枠線種類、太さ、色*/
overflow:scroll;/*はみ出したら動かして*/
}
.flexchild{
white-space: nowrap;/*勝手に折り返すのはダメ*/
border: solid 2px black;/*枠線種類、太さ、色*/
padding: 10px;/*【追加】*/
}
.flexchild a{
text-decoration: none;/*文字に装飾しないで*/
color: black;/*文字色は黒*/
}
--></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>

padding(内余白)親boxでも使っている要素です。

これで、子boxの内側の余白を作りました。

※全角でつけた空白は消してます(^^)

そうすると⇩のようになります。

だいぶいい感じですね(^_^)

ついでなので余白を作る方法をもう一つ紹介します!

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;/*枠の内余白*/
border: solid 2px red;/*枠線種類、太さ、色*/
overflow:scroll;/*はみ出したら動かして*/
/*一旦こっちの余白は消しました*/
}
.flexchild{
white-space: nowrap;/*勝手に折り返すのはダメ*/
border: solid 2px black;/*枠線種類、太さ、色*/
}
.flexchild a{
text-decoration: none;/*文字に装飾しないで*/
color: black;/*文字色は黒*/
margin: 10px;/*【追加】*/
}
--></style>

追加したものはmargin: 10px;(マージン)

今度は子boxの中にある<a>タグ(文字)に対して指定しました。

marginも同じ余白を調整できる要素ですが、こちらは枠外の余白です。

表示すると⇩の方になります。

(・・?

さっきと余白の大きさがちがうような・・・

大きさの指定は同じ(10px)なのに出来上がりが違いますね(^_^;)

※余白の大きさは〇px、〇の部分に数字を入れてもらと好きな広さにできます。

文字の左右をみると同じだけ余白ができているので大体のイメージはできるとが、文字の部分に行(line-height)という枠があると考えてもらえれば大丈夫かと思います(^^)

※初心者の個人的解釈です(-_-;)

あとの出来ることは自身で満足するデザインにすることだと思うので、これでメニューバー作成の手順は終了です。

まとめ

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

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

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

手順④:リンクをつくる

手順⑤:装飾を戻す

手順⑥:子boxの中身を整える

以上の手順でできたメニューバーが⇩こちら

CSS&HTML部分

<style><!--
.flexbox{
display: flex;/*【重要】中身が横に並びます*/
padding: 5px;/*枠の内余白*/
border: solid 2px red;/*枠線種類、太さ、色*/
overflow: scroll;/*はみ出したら動かして*/
}
.flexchild{
white-space: nowrap;/*勝手に折り返すのはダメ*/
border: solid 2px black;/*枠線種類、太さ、色*/
padding: 10px;/*枠の内余白*/
}
.flexchild a{
text-decoration: none;/*文字に装飾しないで*/
color: black;/*文字色は黒*/
}
--></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>

個人的解釈な部分も多々ありますけど問題なく動作します。

少しづつだけど出来ることが増えていくので、何でも自作してみるのもおすすめです。

差し込みはヘッダーの編集エリアに入れ込みますが場所がわからない場合は⇩の記事で紹介してますので合わせて読まれると出来ることが増えると思います(^^♪

CSS&HTML勉強に役立つ本

私はこの本を使ってます。

知りたい要素等は全事典と書いててあるだけあり現状ではすべて載ってました。

使い方の例文等も書いてあるのでかなり重宝します。

by:かまさん

コメント

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