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


どうも、果汁1%程度です

 

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

 

f:id:kajyu-1per:20200223143613p:plain

 

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

追加する方法です

 

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

f:id:kajyu-1per:20200307160047p:plain


やることはこんな感じ

 

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

 

 

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

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

HTMLクイックリファレンス

 

デザインを修正

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

ヘッダとデザインCSSを

修正していきます

 

ヘッダの修正

作成したHTMLリンクを

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

f:id:kajyu-1per:20200307161918p:plain

デザインCSS

 作成したCSSコードを

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

f:id:kajyu-1per:20200314063609p:plain

 

 以上で修正は完了です

 

忘れずに保存しましょう

f:id:kajyu-1per:20200314063828p:plain

 

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

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

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

 

以上です