アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】メニューアイコンの追加

すでにこのサイトはカスタムメニューが存在しますが、
カテゴリが増えたので追加修正。

カテゴリ追加

ブログ運営ってのが増えた。
管理画面からデザイン>カスタマイズ>ヘッダ>タイトル下の入力欄に以下のように追加

<div class="header_menu">
    <ul class="header_menu_list">
        <li><a href="https://www.agonose-nikki.com">トップページ</a></li>
        <li><a href="https://www.agonose-nikki.com/archive/category/%E8%82%B2%E5%85%90">育児</a></li>
        <li><a href="https://www.agonose-nikki.com/archive/category/%E6%8A%80%E8%A1%93">技術</a></li>
        <li><a href="https://www.agonose-nikki.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6">ブログ運営</a></li>
    </ul>
</div>

アイコンつけていく

Font Awesomeを使ってアイコンを挿入しやす。

事前準備

設定>詳細設定>検索エンジン最適化>headに要素を追加に以下のコードを追加

<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet"/>

アイコンを選ぶ

Font Awesomeのサイトの検索窓からキーワードで検索してアイコンを選択します。

アイコン検索


アイコンをクリックすると詳細画面に飛ぶので、HTMLタグの部分をクリックしてコピーします。 アイコン詳細画面

メニューに反映

<i class="fas fa-home></i> のタグを追加していきます。

<div class="header_menu">
    <ul class="header_menu_list">
        <li><a href="https://www.agonose-nikki.com"><i class="fas fa-home"></i>トップページ</a></li>
        <li><a href="https://www.agonose-nikki.com/archive/category/%E8%82%B2%E5%85%90"><i class="fas fa-baby-carriage"></i>育児</a></li>
        <li><a href="https://www.agonose-nikki.com/archive/category/%E6%8A%80%E8%A1%93"><i class="far fa-file-code"></i>技術</a></li>
        <li><a href="https://www.agonose-nikki.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6"><i class="fas fa-graduation-cap"></i>ブログ運営</a></li>
    </ul>
</div>

styleも合わせるとこんな感じか

<style>
#content {
 margin-top: 0px;
}
#top-editarea {
  margin: 0;
  width: 100%;
}
.header_menu {
  width: 100%;
  margin: 0;
  background: #555;
}
.header_menu .header_menu_list {
  width: 70%;
  margin: 0 auto;
  padding: 0;
  display: table;
  background: #555;
  list-style: none;
}
.header_menu .header_menu_list li {
  text-align: center;
  display: table-cell;
  width: 20%;
}
.header_menu .header_menu_list li a {
  display: block;
  padding: 8px;
  height: 20px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 5px;
}
.header_menu .header_menu_list li i {
  margin-right: 5px;
}
.header_menu .header_menu_list li a:hover {
  margin-bottom: 0px;
  border-bottom: 5px solid orange;
}

@media (max-width: 600px) {
  .header_menu {
    display: none;
  }
}
</style>
<div class="header_menu">
    <ul class="header_menu_list">
        <li><a href="https://www.agonose-nikki.com"><i class="fas fa-home"></i>トップページ</a></li>
        <li><a href="https://www.agonose-nikki.com/archive/category/%E8%82%B2%E5%85%90"><i class="fas fa-baby-carriage"></i>育児</a></li>
        <li><a href="https://www.agonose-nikki.com/archive/category/%E6%8A%80%E8%A1%93"><i class="far fa-file-code"></i>技術</a></li>
        <li><a href="https://www.agonose-nikki.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6"><i class="fas fa-graduation-cap"></i>ブログ運営</a></li>
    </ul>
</div>

結果

Before

Before

After

カテゴリの追加とアイコンがつきました。 After

おわり

以上!!

スポンサーリンク