どうも、果汁1%程度です
はてなブログの設定シリーズ
今回はタイトル下にリンクバーを
追加する方法です
追加するとこんな感じになります
やることはこんな感じ
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
フォントが選択できます
フォントのサンプルはこちら
- color
#111111など「#」が付くものは
カラーを設定できます
カラーのサンプルはこちら
その他のCSSのパラメータも変更可能です
詳しく調べたい方はこちら
デザインを修正
「設定」→「デザイン」から
ヘッダとデザインCSSを
修正していきます
ヘッダの修正
作成したHTMLリンクを
「タイトル下」に張り付けます
デザインCSS
作成したCSSコードを
「デザインCSS」に張り付けます
以上で修正は完了です
忘れずに保存しましょう
リンクの設置が完了したので
あとはクリックしてちゃんと
リンク先へ移動するか確認しましょう
以上です