li(リスト)全体をリンクにして右端に矢印などの記号を固定表示

リストの右端に矢印などのマークを入れたリンクの作り方です。矢印を右端に固定表示する方法と、リストの行全体をリンクとする方法が分からなかったので、調べた事を簡単にまとめてみました。当サイトは[WordPress / Cocoon]を使っていて、それをベースとした内容になっています。

完成イメージ

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

CSSコード

/**リスト6**/
.list-6 {
  padding :0;
  position: relative;
  margin-left: 20%;
  margin-right: 20%;
  list-style-type: none;
}
/**行ごとの設定**/
.list-6 li {
  line-height: 3em;
  border-bottom: solid 2px #b6b6b6;
  position: relative;
}
/**文字列の設定**/
.list-6 li a{
  font-weight: bold;
  font-size: 10pt;
  text-decoration: none;
  padding: 0;
  color: #b6b6b6;
  display: block;
}
/**文字列の後に矢印を表示**/
.list-6 li a ::after {
  font-family: FontAwesome;
  position: absolute;
  content: "\F054";
  right: 5px;
}

コード解説

list-6 (全体の定義)

/**リスト6**/
.list-6 {
  padding :0;
  position: relative;
  margin-left: 20%;
  margin-right: 20%;
  list-style-type: none;
}

主に全体の位置や余白を決めます。ポイントは{position: relative}と{list-style-type: none;}です。この2つのコードを追加してから位置の調整をした方が良いです。

list-6 li (行ごとの設定)

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

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

list-6 li a [文字列(リンク)の設定]

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

ここでは文字列の設定をします。{display:block;}を入れることで行全体にリンクが広がります。

list-6 li a ::after (右端に矢印を固定)

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

ここに{position:absolute;}を定義することで、矢印がとにかく右端(この場合は右端から5px)の位置という絶対的なポジショニングを維持します。表示する矢印などのマークはFontAwesomeから選びました。

スマホ用の位置調整

/* モバイル用メニュー */
@media screen and (max-width: 768px){
.list-6{
  left: -12px;
  margin: 0;
}
}

私はCocoonを使用しています。恐らくCocoonに限らずWordPressとしてだと思いますが、デフォルトだとリストの左端に「・」が表示されるので、その分だけリスト全体が少し右寄りの表示になります。特にモバイルだとそれが目立ったので位置を調整しました。

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

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

unity-right.com

2020.02.25