LemonteaのUnity部屋

C#とかのお話です~

CSS はてなブログのタイトル下にカテゴリのリンクをつける

こんにちは。レモンティーです。

今回は、タイトル下にカテゴリ別のリンクのボタンをつけます。

読者になってる他の方のブログとかを見てると
タイトル下におおまかなカテゴリごとのボタンがある方が
ちらほらいたわけです。

これが見る側からするとかなり便利なんですよね~。
というわけで思い切ってHTMLとCSSをかじってみることにしました。

PCで見ている方は今も上のほうに表示されていると思います。
こんなやつです。
f:id:sawalemontea:20171124112545p:plain
字体とかは環境によって異なるかもしれません
もしあまりにも見え方が違う方がいたら教えてくださると嬉しいです。


やり方は
①デザイン>カスタマイズ>ヘッダ>タイトル下 にHTMLでリンクを作る
②デザイン>カスタマイズ>デザインCSS に↑を飾るCSSを書く
です。後述のようなコードを直に書けます。

①のコードは

<div class="topCategory">
    <a href="http://sawalemounity.hatenablog.com/entry/2016/11/01/003000">
      C#
    </a>
    
    <a href="http://sawalemounity.hatenablog.com/entry/2018/02/14/173358">
      Xamarin
    </a>
    
    <a href="http://sawalemounity.hatenablog.com/entry/2017/10/27/160000">
      Unity
    </a>
    
    <a href="http://sawalemounity.hatenablog.com/entry/2017/02/08/003000">
      Python
    </a>
    
    <a href="http://sawalemounity.hatenablog.com/entry/2016/11/24/000000">
      HTML,CSS
    </a>
    
    <a href=" http://www.sawalemontea.com/entry/2017/02/08/000000_2">
      JavaScript
    </a>
    
    <a href="https://www.sawalemontea.com/entry/2017/02/09/000000">
        Node.js
    </a>
    
    <a href="http://sawalemounity.hatenablog.com/entry/2017/02/08/000000_1">
      Others
    </a>
   
</div>

②のコードは

.topCategory > a{
font-size:24px;
color:#4a3c24;
background:#ffffff;
border:solid 4px lightblue;
padding:5px;
margin:5px 3px 5px 3px;
display:inline-block;
text-decoration:none;
border-radius: 10px;
font-family:cursive;
transition:all ease 0.3s;
}

.topCategory > a:hover{
color:white;
background:lightblue;
}

となっています。

①はリンク本体です。これでシンプルなリンクができるのでそれをCSSで装飾します。
詳しい解説はここにあります。
sawalemounity.hatenablog.com

以下で紹介する②は①の装飾です

CSS自体についてはここにあります
sawalemounity.hatenablog.com

文字と背景の色を変えているのがこれらです
color:#4a3c24;
background:#ffffff;

自体を手書き風にしているのがこれです
font-family:cursive;
解説はここにあります
sawalemounity.hatenablog.com

これが文字の大きさを変えています。
font-size:30px;

text-decoration:none; は
リンクの下にでる線をけすためです…が、
はてなブログではデフォルトっぽいです。
書かなくていいと思いますが消し忘れていました笑

枠線を引いているのがこの部分です
border:solid 4px lightblue;
これはここに解説があります。
sawalemounity.hatenablog.com

そしてその枠線の角を丸めているのがこれです
border-radius: 10px;

余白や隣のボタンとの間隔はこの部分です
padding:5px;
margin:7px;
ここで説明されています
sawalemounity.hatenablog.com

マウスポインタが乗っている間だけ色をかえるのがこの部分です
.TopCategory:hover{
color:white;
background:blue;
}
これについてはここで解説しています
sawalemounity.hatenablog.com




今回はこれでおしまいです。
sawalemounity.hatenablog.com