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

リンク範囲のカスタマイズ

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

今回はリストの行全体をリンク範囲にするカスタマイズです。

完成イメージ

• リスト1がこれで
• リスト2がここにきます
• リスト3はやはり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 a ::after {
  font-family: FontAwesome;
  position: absolute;
  content: "\F054";
  right: 5px;
}
.list-6 li a ::before {
  font-family: FontAwesome;
  position: absolute;
  content: "\F0c8";
  left: -1.8em;
}

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

記事内の特定のリストだけカスタマイズを適用する方法【Cocoon】

cocoonのリストや目次などをカスタマイズしてページやピンポイントでそこだけに適用する方法。サンプルのCSSコードも載せましたので参考にカスタマイズ・適用をしてみてください。

unity-right.com

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

全体の定義

/**リスト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 a ::after {
  font-family: FontAwesome;
  content: "\F054";
  position: absolute;
  right: 5px;
}

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

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

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

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