はてなブログでリストのデザインをカスタマイズする方法

はてなブログの目次の項目は「.entry-content .table-of-contents li」でデザイン変更できますが、このセレクタでは目次しか編集できません。

試しに「.entry-content 」を外して「.table-of-contents li」で編集してみましたが、既存の目次のCSSに新しいCSSが被さってしまいました。

f:id:ymm_520:20200109222509p:plain

「.entry-content .table-of-contents 」を削除してulやliだけで編集すると、ulやliが含まれた全く関係ない場所まで変更されてしまいます。

f:id:ymm_520:20200109215503p:plain

サイドバーの「最新記事」にまで適用されてしまいました。

現状、デザインCSSからリストのデザインを変更する方法が見つからないので、この記事では記事作成時の『HTML編集』モードでリストのデザインを変更する方法を書いていきます。

『HTML編集』で記述する

まず『HTML編集』モードでリストを作成します。
この下にCSSを記述していきます。

リストのアイコンにFontawesomeを使う

Fontawesomeのアイコンを使ってリストを作成する場合は、下記のようなコードを書きます。

  • りんご
  • みかん
  • バナナ
  • ぶどう

リストにFontawesomeのアイコンが適用されました。
このアイスクリームアイコンを使う場合、Fontawesomeのバージョンを5.11.1以上に設定する必要があります。

リストのアイコンにカウンタを使う

リストの箇条書きに①、②、③などのカウントを使用する場合は下記のようなコードを書きます。

  1. りんご
  2. みかん
  3. バナナ
  4. ぶどう

応用すると色々なデザインのリストを作ることができます。

コメント