リンク範囲を文字列だけでなくリスト全体にする&左右にアイコンを固定表示

2023年10月頃からFontAwesomeのアイコンが表示されなくなったため、コードの一部を修正しました。※もともと不用だったかも

【修正前】
.list-6 li a ::after {
  font-family: FontAwesome;
}

【修正後】※リンクを指す「a」を削除
.list-6 li ::after {
  font-family: FontAwesome;
}

リスト全体をリンクの範囲にする

WordPressのリストをカスタマイズしてリンクを貼りましたが、普通に貼ると文字列のみがリンク範囲となってしまいます。

文字の部分だけではなくリストの行全体をリンクの範囲にするカスタマイズにチャレンジしました。

完成イメージ

4行目のリンク先はこのページです。文字の部分だけでなく右端の「＞」あたりをクリックしてもリンク先に移動できます。

• リスト 1行目
• リスト 2行目
• リスト 3行目
• リスト 4行目

カスタマイズコード

/*リストVer.6 矢印固定*/
.list-6 {
  position: relative;
  list-style-type: none;
  max-width: 600px;
}
.list-6 li {
  line-height: 3em;
  border-bottom: solid 1px #f5f4f9;
  position: relative;
}
.list-6 li a {
  font-weight: bold;
  font-size: 9pt;
  text-decoration: none;
  color: #5f5f5f;
  display: block;
}
.list-6 li ::after {
  font-family: FontAwesome;
  position: absolute;
  content: "\F054";
  right: 5px;
}
.list-6 li ::before {
  font-family: FontAwesome;
  position: absolute;
  content: "\F0c8";
  left: -1.8em;
}

[list-6]は任意の名称でOKです。

カスタマイズコードの詳細

このようにカスタマイズの詳細を残しておくと、何かトラブルがあった時の原因追求にも役立ちます。

全体の定義

/**リスト6**/
.list-6 {
  position: relative;
  list-style-type: none;
  max-width: 600px;
}

リスト全体の位置を決めます。ポイントは{position: relative}と{list-style-type: none;}です。{max-width}は最大幅の指定なので、設定しなくても問題ありません。

行ごとの設定

/**行ごとの設定**/
.list-6 li {
  line-height: 3em;
  border-bottom: solid 2px #b6b6b6;
  position: relative;
}

{border-bottom}で下線を付けました。ここでも{position: relative}にしておくのがポイントです。

文字列とリンク範囲の設定

/**文字列の設定**/
.list-6 li a {
  font-weight: bold;
  font-size: 10pt;
  text-decoration: none;
  padding: 0;
  color: #5f5f5f;
  display: block;
}

{display:block;}を入れることで文字列だけでなく行全体にリンク範囲が広がります。

文字列の後に矢印を固定表示

/**文字列の後に矢印を表示**/
.list-6 li ::after {
  font-family: FontAwesome;
  content: "\F054";
  position: absolute;
  right: 5px;
}

{position:absolute;}でとにかく右端から5pxの位置に矢印を固定表示させます。矢印はFontAwesomeから選びました。

文字列の前に記号を固定表示

.list-6 li ::before {
  font-family: FontAwesome;
  position: absolute;
  content: "\F0c8";
  left: -1.8em;
}

当初は無かったのですが、全体のバランスがしっくりこなかったので、文字の前にもアイコンを追加しました。