はてなブログの人ってボックスメニュー作らないんですか？
そう言えば見かけないね。このブログにもないし。
はは、このブログはカテゴリー1つしかないから作ってもしょうがないよね。
でも、カテゴリーいっぱいある人にとっては、ボックスメニューっておしゃれで人目につくから、是非作ってみてね。
ちなみに、ぼく達の飼い主の【ポジティぶろぐ】さんのブログでは、このボックスメニューを取り入れているので是非見てみてね。
スマホ版を見るとよりステキですよ。
ボックスメニューの必要性
そもそもボックスメニューって必要ですか？
前回と同様、ユーザビリティーを考えたら、ないよりあった方がいいよね。
ボックスメニューは人目を引くから、自然と回遊率上がるんだよね。
回遊率が上がるということは、滞在時間やPVが伸びるっていうことだから、良いことづくしなので、ぜひ作ってみてね。
今回作るボックスメニューはこれ！
おしゃれですね。
はてなブログのカテゴリー一覧は味気ないからね。
この記事では、このボックスメニューをサイドバーに表示させるね。
スポンサーリンク
ボックスメニューの作り方
それでは早速、作ってみましょう。
ちなみに、参考にした記事はこちらです👇
すごくわかりやすく書かれているので、WordPressの方にもおすすめです。
ちなみにこちらの記事は、WordPress用なので、はてなブログ用に変換しています。
ボックスメニューの作り方①
デザインCSSにCSSを書き込む
まずは、はてなブログの「ダッシュボード⇒デザイン」を開いて下さい。
そうすると、上の画像がでるので、「スパナマーク」⇒「デザインCSS」を開いて、ここに下記コードをコピペして下さい。
デザインCSSのコードを万が一消してしまったら不具合がでます。
必ず、バックアップを取ってから作業して下さい。
作業中に出た不具合は保障できません。
元からあったコードを消さないように、くれぐれも慎重に操作して下さいね。
/************************************
** ボックスナビ
************************************/
.p-nav{
margin:2em 0;/* 全体外余白 */
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0;
padding:0;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
margin:0;
padding:0;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:100px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
}
.p-nav ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}
/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
/* スマホ */
@media screen and (max-width: 559px) {
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
}
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #f6a068;/* アイコン色 */
display:inline-block;
}
/* fontawesome(2番目) */
.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(3番目) */
.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(4番目) */
.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
color:#f6a068;/* アイコン色 */
}
コピペしたら保存して下さいね。
ボックスメニューの作り方②
サイドバーにhtmlを書き込む
次は、はてなブログの「ダッシュボード⇒スパナ⇒サイドバー」を開いて下さい。
サイドバーをクリックすると下記画面が出てきます。
サイドバー画面の「+モジュールを追加」をクリックすると、右の画面が出てきます。
その右の画面にある、「</>HTML」タブを押すと、下記画面が出てきます。
１番上の黄色枠には、「カテゴリー」と記載し、2番目の黄色枠には、次にある3種類のコードから、好きなコードを入れてください。
コードを入れたら、赤枠の「適用」をクリックして下さいね。
最初にお見せしたカテゴリーの画像ですが、それぞれコードが違います。
１番上は、フリー素材の画像を取り込んでいます。
真ん中は、FontAwesomeを取り込んでいます。
１番下は、フリーアイコンを取り込んでいます。
この３種類の内、どのやり方で取り込むか決めて下さいね。
もちろん、「１行目はフリーアイコンで２行目は画像」って言う風に入れてもいいけど、その場合はそれぞれの入れ方をコピペしないと変なことになるから注意しないとね。
画像を取り込む場合（１番上のやり方で作る場合）
<div class="p-nav">
<ul>
<li><a href="リンク先URL"><画像><span class="p-nav-title">タイトル1</span></a></li>
<li><a href="リンク先URL"><画像><span class="p-nav-title">タイトル2</span></a></li>
<li><a href="リンク先URL"><画像><span class="p-nav-title">タイトル3</span></a></li>
<li><a href="リンク先URL"><画像><span class="p-nav-title">タイトル4</span></a></li>
<li><a href="リンク先URL"><画像><span class="p-nav-title">タイトル5</span></a></li>
<li><a href="リンク先URL"><画像><span class="p-nav-title">タイトル6</span></a></li></ul></div>
- 「リンク先URL」は、カテゴリーのURLを入れる。
- 「画像」には、画像のURLを入れる。
画像URLは、画像を圧縮し、「写真を投稿」した後、「HTML編集」画面を開いて下ください。
そうすると、下記htmlが出てきます。
<p><img src="h〇tps://cdn-ak.f.st-hatena.com/images/fotolife/p/〇〇〇/20201227/2020122〇〇〇456.png" alt="f:id:〇〇〇o:202012〇〇〇456p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
赤字の所をコピペして、<画像>の赤字の画像の部分にコピペして下さい。
必ず、「適用」をクリックし、右側のプレビューで変更が確認できたら、「変更を保存」をクリックしてね。
まず、1つ作ってみて、反映されたことを確認してから、2つ目を作った方がいいと思うよ。
FontAwesomeを取り込む場合（真ん中のやり方で作る場合）
これはちょっと難易度高めだから、自信のない人はやめた方がいいかもね。
まず、Font Awesomeの画面を開いてください。
その画面で、アイコンを選んだらそのコードを挿入します。
<div class="p-nav">
<ul>
<li><a href="リンク先URL">〇〇〇〇<span class="p-nav-title">タイトル1</span></a></li>
<li><a href="リンク先URL">〇〇〇〇<span class="p-nav-title">タイトル2</span></a></li>
<li><a href="リンク先URL">〇〇〇〇<span class="p-nav-title">タイトル3</span></a></li>
<li><a href="リンク先URL">〇〇〇〇<span class="p-nav-title">タイトル4</span></a></li>
<li><a href="リンク先URL">〇〇〇〇<span class="p-nav-title">タイトル5</span></a></li>
<li><a href="リンク先URL">〇〇〇〇<span class="p-nav-title">タイトル6</span></a></li>
</ul>
</div>
〇〇〇のところに、FontAwesomeのコードを入れます。
やり方は、FontAwesome画面を開き、アイコンを選びます。
そのアイコンをクリックすると、下記画面が出てきます。
そのコードをクリックするとコピーできるます。
それを、上のhtmlの「〇〇〇」の所に貼り付けると完了です。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
必ず、「適用」をクリックし、右側のプレビューで設定の変更が確認されたら、「変更を保存」をクリックしてね。
今は赤っぽいオレンジになっているけど、色を変えたい時は下のようなコード入れると変わるよ。
<li><a href="リンク先URL"><i class="fab fa-accessible-icon" style="color: #92ceff"></i> <span class="p-nav-title">タイトル1</span></a></li>
赤字が先程入れたFontAwesomeのコードです。
その途中に青字になっているのが色コードです。
赤字のコードの間に、半角スペースを空けて青字の色コードを挿入します。
主な色コードは次のとおりです。
- ピンク #ff9191
- 赤 #ff6776
- 水色 #92ceff
- グリーン #77d477
もちろん、他の色も設定できるので、色々とアレンジしてみてね。
フリーアイコンを取り込む場合（一番下のやり方で作る場合）
まずは、アイコンを無料でゲットできるサイトにアクセスして下さい。
今回は、下記サイトさんからゲットしました。
やり方は、一番上の「画像を取り込む場合」と一緒です。
ここをクリックするとその画面に飛びます。
レスポンシブデザインを設定している方は、これでスマホでも反映されます。
が、レスポンシブデザインを設定していない方は、スマホにも設定する作業が入ります。
スマホがレスポンシブデザインで設定が終了した方で、不具合がある方は、ここをクリックすれば、「トラブル対応」の項目に飛べるので、そこで対応してみてね。
レスポンシブデザインにしていない方のスマホの設定方法
スマホをレスポンシブデザインにしていない方は、今の状況だと、スマホでは反映されていません。
そこで、PC版で設定した方法の①と②をスマホ版にも設定します。
スマホにボックスメニューの作り方①
フッタ⇒ぺジャー下にCSSを書き込む
スマホへ反映させるには、ダッシュボード⇒スマホ⇒フッタ⇒ぺジャー下を開いて下さい。
このぺジャー下に次のコードをコピペ下ください。
<style>
/************************************
** ボックスナビ
************************************/
.p-nav{
margin:2em 0;/* 全体外余白 */
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0;
padding:0;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
margin:0;
padding:0;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:100px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
}
.p-nav ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}
/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
/* スマホ */
@media screen and (max-width: 559px) {
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
}
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #f6a068;/* アイコン色 */
display:inline-block;
}
/* fontawesome(2番目) */
.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(3番目) */
.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(4番目) */
.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
color:#f6a068;/* アイコン色 */
}
</style>
コピペが終わったら、保存してね。
スマホにボックスメニューの作り方②
フッタ⇒フッタにhtmlを書き込む
次は、はてなブログの「ダッシュボード⇒デザイン」を開いて下さい。
「スマホマーク」⇒「フッタ」を開いて下さい。
その下の「スマートフォン用にHTMLを設定する」にチェックを入れて、青枠のところに、ＰＣ版のサイドバーに設定したコードをコピペして下さい。
コードを万が一消してしまったら不具合がでます。
必ず、バックアップを取ってから作業して下さい。
作業中に出た不具合は補償できません。
元からあったコードを消さないように、くれぐれも慎重に操作して下さいね。
すべて設定できらた必ず、上にある「変更を保存」ボタンを押してね。
これで反映されたと思います。
うまく反映されなかったら？
うまく反映されなかったら、次のことを試してみてください。
FontAwesomeが反映されなかった場合の対応策は？
ダッシュボード⇒設定⇒詳細設定⇒headに要素を追加に次のコードをコピペして保存して下さい。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
対応①：コードを上に持ってくる
コードの位置によって影響力が違います。
もし、下の方にコードをコピペしていたら、コードを上の方に移動して下さい。
対応②：対応①でも反映されなければ、「 !important」を加える」（上級編）
これは上級編です。このコードを使ったことがある方のみ挑戦してみてください。
（もし、まだ他のコードでやったことがない方はあきらめた方がいいかもしれません。）
ボックスメニューを押しても指定したカテゴリーに移動しない場合は？
正しい、カテゴリーURLをリンクしているか、もう一度確認して下さい。
