はてなブログのサイドバーカスタマイズあれこれ

スポンサーリンク
BLOG

はてなブログのサイドバーのカスタマイズ方法をまとめました。

見出しにFontawesomeアイコンを適用する

Fontawesomeを利用するためには、下のサイトに登録後自分専用のコードを入手し、
設定>詳細設定>headに要素を追加 の欄にコードを入力する必要があります。

Font Awesome

①<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
v5.6.1はバージョンのため、適宜最新のバージョンに書き換える
②<script src=”https://kit.fontawesome.com/付与されたコード.js” crossorigin=”anonymous”></script>

入力後、デザイン>カスタマイズ>デザインCSSに下記コードを入力します。

検索

下の記事で説明しています。

www.yamimin-planet.com

リストの下線を変更する

デフォルトはグレーの直線になっています。

f:id:ymm_520:20200120190053p:plain

これを、まずborder: none;で線を消します。
.hatena-urllist li {
border: none;
}

f:id:ymm_520:20200120204152p:plain

この状態からカスタマイズしていきます。
下のコードでは、直線、点線、破線、グラデーションの4種類を紹介していきます。
直線で色を変えるだけの場合でも元の線を消さないと、元の線の色と新しく記述した線の色が重なってしまうので注意が必要です。

 最新記事と関連記事のリストの背景色を変更する

最新記事と関連記事の背景色は、下のコードで変更できます。

f:id:ymm_520:20200120221756p:plain
背景色と文字色が変更されました。

.hatena-urllist liで背景色が変更されるのは最新記事と注目記事のみで、アーカイブには適用されませんでした。

コメント