はてなブログの設定：タイトル下にリンクを追加

どうも、果汁１％程度です

はてなブログの設定シリーズ

今回はタイトル下にリンクバーを

追加する方法です

追加するとこんな感じになります

やることはこんな感じ

HTMLリンクを作る

まず、クリックされた場合にジャンプする

HTML形式のコードを用意します

こんな感じ

 <nav id="topCategoryLink">
    <a href="https://www.kajyu-1per.com/">
    HOME
    </a>

    <a href="https://www.kajyu-1per.com/android">
    Android with kotlin
    </a>

    <a href="https://www.kajyu-1per.com/Raspberry_Pi">
    Raspberry Pi
    </a>
</div>

• topCategoryLink 
  ここは何でもよいのですが、
  次に説明するCSSで使用するので
  覚えておきましょう
  
  
• https://www.kajyu-1per.com/ 
  ここにはクリックした場合に
  移動するURLを記述します
  
  固定ページをリンクする場合は
  最後の「/」は不要です
  
  
• HOME
  表示用のラベルです

デザインCSSコードの作成  

作成したHTMLリンクのデザインを

変更するCSSコードを作成します

コピペ用コード

#topCategoryLink{
text-align:center;
}

#topCategoryLink > a{
font-family:arial;
font-size:16px;
color:#111111;
background:#ffffff;
border:solid 3px #111111;
border-radius: 8px;
display:inline-block;
text-decoration:none;
margin:10px 5px 10px 5px;
padding:8px;
transition:all ease 0.3s;
}

#topCategoryLink > a:hover{
color:white;
background:#111111;
}

• topCategoryLink
  HTMLで記述した先頭の <nav id="topCategoryLink">
  と同じにします
  
  
• font-family
  フォントが選択できます
  フォントのサンプルはこちら
  

  font-familyで指定できるフォント名一覧

  
  
• color
  #111111など「#」が付くものは
  カラーを設定できます
  カラーのサンプルはこちら
  

  色見本と配色サイト - color-sample.com

その他のCSSのパラメータも変更可能です

詳しく調べたい方はこちら

HTMLクイックリファレンス

デザインを修正

「設定」→「デザイン」から

ヘッダとデザインCSSを

修正していきます

ヘッダの修正

作成したHTMLリンクを

「タイトル下」に張り付けます

デザインCSS

 作成したCSSコードを

「デザインCSS」に張り付けます

 以上で修正は完了です

忘れずに保存しましょう

リンクの設置が完了したので

あとはクリックしてちゃんと

リンク先へ移動するか確認しましょう

以上です