大人のための『夢を叶える学校』

「夢は叶えるもの!」険しい道でも突き進めば、その先に必ず光が見える。実現した経緯や飲食店経営・起業の仕方などについて投稿しています

【はてなブログ活用法】グローバルメニューの作り方・カスタマイズ

ブログで収益化を狙うために必要になってくる『グローバルメニュー』の作り方を解説していきます。

初心者でも、CSSが分からなくても、これを見れば誰でもグローバルメニューを設置することができるようになります。

f:id:success-life:20220212001234j:plain

グローバルメニュー

グローバルメニューの表示結果

改善前

f:id:success-life:20220212001919p:plain

改善前のヘッダー

改善後

f:id:success-life:20220212030315p:plain

改善後

 

グローバルメニューの作成手順

ブログの全体的な共通メニューや重要なコンテンツへの案内をするリンクは必要です。

以下のステップでグローバルメニューを付けられます。

 

✅STEP1:HTMLを作成する  

  • ブロックを作る
  • リストを作る
  • リンクを追加する
  • メニュー表示を確認する
  • リストを増やす
  • メニューリストの表示を確認する

✅STEP2:CSSを作成する

  • CSSを作成する
  • デザインCSSに貼り付ける
  • 確認する

順を追って解説していきます。

 

STEP1:HTMLを作成する

ブロックを作る

テキストエディタなどを使って、メニューの枠となるブロックを作成します。

  <div class=" セレクタ名 "> </div>

で1つの枠を作るブロック要素を指定します。

セレクタ名を入れて、ブロック要素に名前を付けます。

  ※セレクタ名:ローマ字であれば好きな名前が付けられます。

f:id:success-life:20220212004233p:plain

ブロック要素の記述
リストを作る

メニューとなるリストを作成します。

  <ul> </ul>

は、リストの枠になります。

  <li> </li>

は、実際に表示させる内容のリストを記述していきます。

f:id:success-life:20220212005305p:plain

リストの枠とリストの記述
リストを追加する

リストの追加には、飛ばすリンク先のURLを指定します。

リンクは、

  <a href="  URL  "> 表示名 </a>

今回はTOPページに戻るリンクを付けるので「TOP」と表示名にしました。

f:id:success-life:20220212011212p:plain

TOPページのリンクを追加
メニュー表示を確認する

 ①先程作成した HTML をコピーします。

 ②ダッシュボードから【デザイン】をクリックします。

f:id:success-life:20220212013141p:plain

 

 ③続いて【カスタマイズ】【ヘッダ】をクリックします。

f:id:success-life:20220212013240p:plain

 

 ④『タイトル下』の CSS 記述枠をクリックします。

f:id:success-life:20220212013355p:plain

 

 ⑤ここに、コピーしていた HTML を貼り付けて、【変更を保存する】をクリックします。

f:id:success-life:20220212013416p:plain

 

 ⑥ブログを立ち上げヘッダーの下にメニューが追加されていることを確認します。

f:id:success-life:20220212013447p:plain

 

リストを増やす

以上の作業を繰り返すことでメニューのリストを追加します。

メニューのリストを増やすには、

  <li><a href="  URL  "> 表示名 </a></li>

を追記していきます。

表示したい URL は、ブラウザからコピーして使用します。

f:id:success-life:20220212020725p:plain

 

追加記述した HTML をコピぺして、【変更を保存する】をクリックします。

f:id:success-life:20220212020902p:plain

 

メニューリストの表示を確認する

ブログにアクセスして確認します。

f:id:success-life:20220212021104p:plain

 

STEP2:CSS を作成する

CSS を作成する

前項で作成した HTML を CSS でデザインしていきます。

 

/* グローバルメニュー */
.navi {
width: 100%; /* 幅 */
padding: 0 0; /* 余白 */
margin: 0 auto 24px; /* 周囲の余白 */
}
.navi ul{
padding: 0;
overflow:hidden; /* 高さ指定 */
list-style-type: none; /* リストスタイル */
background:#fff; /* 背景色 */
margin-bottom: 16px; /*枠の下周囲の余白 */
text-align: center; /* 文字を真ん中に表示 */
border-top: 2px solid #000; /* ボーダー上 */
border-bottom: 2px solid #000; /* ボーダー下 */
height: 50px; /* 高さ */
}
.navi li{
float: left; /* 左詰め表示 */
text-align: center; /* 文字を真ん中に表示 */
width: 16%; /* 幅 */
margin: 0;
}
.navi li a{
display: block; /* ブロック表示 */
margin: 0;
line-height: 50px; /* 高さ */
font-size: 15px; /* 文字の大きさ */
text-decoration: none; /*アンダーラインを消す */
}
.navi a:hover{
color: #fff; /* マウスオーバー時の文字色 */
background:#f7546d; /* マウスオーバー時の背景色 */
}

 

※上記 CSS コード はコピペ可能です

 

テキストエディタなどを使って、上記 CSS コードを記述します。

作成した CSS コードをコピーします。

 

デザインCSS に貼り付ける

 ①ダッシュボードから【デザイン】【カスタマイズ】【{}デザインCSS 】をクリックします。

 ② CSS 記述枠をクリックします。

f:id:success-life:20220212031910p:plain

 

 ③ここに、コピーしていた CSS コードを貼り付けます。

f:id:success-life:20220212031844p:plain



 ④【変更を保存する】をクリックします。

 

確認する

ブログにアクセスして確認します。

f:id:success-life:20220212032031p:plain

 

このように、マウスを当てると色も変わることが確認できます。

 

さいごに

少しづつでもカスタマイズしていくことで、初心者でも思い通りのブログを作り上げることは可能です。

諦めずやり続けることが大事です。

 

今回のグローバルメニューは、Google アドセンスで収益を狙うのであれば、

必須項目なので、真似でもいいから作っておきましょう。

 

 

www.newinfo.press

 

www.newinfo.press

 

www.newinfo.press

 

  参考になった!  参考にならない