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

スポンサーリンク

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

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

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

完成イメージ

完成イメージ: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です

特定のリストにカスタマイズを適用したい!

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

全体の定義

/**リスト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;
}

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

Comment

タイトルとURLをコピーしました