AQUARIUM AATブログ

AATとはAquarium Amuse Taishiの訳

【カスタマイズ】サイドバーやタイトル下にカテゴリを入れる。画像付きで説明

こんにちはAQUARIUMAATのタイシです。

 

今回は初めての企画です。

アクアリウムではなくブログのカスタマイズ方法についてです。

この記事を読むとタイトル下やサイドバーなどにカテゴリを入れることができます

今回お世話になった人はこの人です。

dezanari.com

でざなりさんです。本当にありがとうございます。

 

 

 

 

 

では早速始めましょう。

まずデザインを押してください

そして

サイドバーかヘッダを押しましょう。

今回はサイドバーでやっていきます。

モジュール追加でHTMLを押してください。

タイトルは入れないでください。

そして

青い部分は変えないで赤い文字は自分のカテゴリとURLを入れてください。

 

 

 

<ul id="g-nav"><li class="nav-item"><a href="表示されるURL">カテゴリ名</a></li>

</ul>

を入れるとサイドバーに貼り付けることができます。



 

 

 

 

カテゴリを増やしたいときは

href="表示されるURL">カテゴリ名</a></li>

<ul id="g-nav"><li class="nav-item"><a 

ここに入れてください。

</ul>

 

<ul id="g-nav"><li class="nav-item"><a

href="https://aquariumaat.hatenablog.com/archive/category/レイアウト水槽">レイアウト水槽</a></li>

href="https://aquariumaat.hatenablog.com/archive/category/レイアウト水槽">レイアウト水槽</a></li>

</ul>

このように増やすことができます。

 

 

 

そして最後はカテゴリのCSSです。

コピーしてくださいこれは真ん中から線が伸びるようになるCSSです。



#g-nav {
    display: table;
    width: 100%;
    font-weight: bold;
}
.nav-item {
    display: table-cell;
    padding: 10px 0;
    list-style-type: none;
    text-align: center;
}
.nav-item a {
    display: block;
    position: relative;
    color: #333;/* 文字色 */
    text-decoration: none;
}
.nav-item a::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    display: block;
    width: 0px;
    height: 2px;
    background-color: #333;
    margin: 0 auto;
    transition: 0.3s;
    transform: translateX(-50%);
}
.nav-item a:hover::after {
    width: 100%;/* 下線の長さ */
}

 

最後に

でざなりさんほんとに本当にありがとうございました。

dezanari.com