【CSS】リンクデザイン サンプル

ボタンデザインで紹介したボタンリンクはリンク1つですが、複数のリンクの場合はこちらのデザインが好ましいと思います。

ここでは複数のリンクが密集した場合のデザインをご紹介します。いわゆる、リンクのグループ化と考えてください。

そういう意味ではページネーションもグループ化したリンクになりますね。

基本HTML

<ul class="btnlink_list">
  <li><a href="URL">リンク文字</a></li>
  <li><a href="URL">リンク文字</a></li>
  <li><a href="URL">リンク文字</a></li>
  <li><a href="URL">リンク文字</a></li>
  <li><a href="URL">リンク文字</a></li>
</ul>

基本になるHTMLです。

必要に応じてclass="btn"は変更してご利用ください。

共通CSS

.btnlink_list,.btnlink_list *{
font-family:-apple-system-body,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","NotoSans Japanese","游ゴシックMedium","Yu Gothic Medium","メイリオ",meiryo,sans-serif;
word-break:normal !important;
word-wrap:break-word;
-webkit-text-size-adjust:100%;
margin:0;
padding:0;
outline:none;
list-style:none;
line-height:1.0;
box-sizing:border-box;
text-decoration:none;
}

スタイルしやすいようにリセットします。

管理画面内の貼り付ける場所

CSS
管理画面のHEAD間編集かCSS編集へコピペしてください。
HTML
管理画面の編集枠へコピペしてください。
HEAD間編集に記述する際は <style> と </style> の中に書いてください。CSS編集に記述する場合は <style> と </style> は書いてはダメです。

それではデザインサンプルをご覧ください。


スマホサイトでよく見かけるリンクです。少し古いデザインかな?

コードを見てみる

CSS

.btnlink_list{
  width:90%;
  margin:12px auto;
  border:1px solid #ccc;
  border-radius:12px;
}
.btnlink_list a{
  display:block;
  padding:12px;
  line-height:1.4;
  border-bottom:1px solid #ddd;
  position:relative;
}
.btnlink_list li:last-child a{
  border-bottom:none;
}
.btnlink_list a:after{
  display:block;
  position:absolute;
  top:50%;
  right:16px;
  width:7px;
  height:7px;
  margin-top:-4px;
  border-top:solid 1px #7f7f7f;
  border-right:solid 1px #7f7f7f;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  content:"";
}

これもよく見かけるデザインですね。非常にわかりやすく、タップしやすいリンクボタンです。

コードを見てみる

CSS

.btnlink_list{
  width:90%;
  margin:12px auto;
}
.btnlink_list a{
  display:block;
  padding:12px;
  line-height:1.4;
  border-top:1px solid #555;
  position:relative;
}
.btnlink_list li:last-child a{
  border-bottom:1px solid #555;
}
.btnlink_list a:after{
  display:block;
  position:absolute;
  top:50%;
  right:16px;
  width:7px;
  height:7px;
  margin-top:-4px;
  border-top:solid 1px #7f7f7f;
  border-right:solid 1px #7f7f7f;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  content:"";
}

2カラムの下線リンクです。短いテキスト向けです。

コードを見てみる

CSS

.btnlink_list{
  width:90%;
  margin:12px auto;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  overflow:auto;
}
.btnlink_list li{
  width:50%;
  display:inline-block;
  float:left;
}
.btnlink_list a{
  display:block;
  padding:12px;
  line-height:1.4;
  border-bottom:1px solid #ddd;
  text-align:center;
}
.btnlink_list li:last-child a{
  border-bottom:none;
}

上のデザインに縦線を加えたデザインです。グリッド感がでます。

コードを見てみる

CSS

.btnlink_list{
  width:90%;
  margin:12px auto;
  border-top:1px solid #ccc;
  border-left:1px solid #ddd;
  overflow:auto;
}
.btnlink_list li{
  width:50%;
  display:inline-block;
  float:left;
}
.btnlink_list a{
  display:block;
  padding:12px;
  line-height:1.4;
  border-right:1px solid #ddd;
  border-bottom:1px solid #ddd;
  text-align:center;
}

ul要素に背景画像を装飾して、li要素に背景色を付け、透過させたゴストボタンのデザインです。

写真素材:GIRLY DROP

コードを見てみる

CSS

.btnlink_list{
  width:90%;
  margin:12px auto;
  padding:20px;
  background-image:url(../../img/exv/back01.jpg);
  background-repeat:ro-epeat;
  background-size:cover;
}
.btnlink_list li{
  padding:10px 20px;
  background-color:rgba(54,69,73,0.4);
}
.btnlink_list a{
  display:block;
  padding:12px;
  line-height:1.4;
  color:#fff;
  font-weight:bold;
  text-align:center;
  border:2px solid #fff;
  border-radius:6px;
}
.btnlink_list li:first-child{
  padding-top:20px;
}
.btnlink_list li:last-child{
  padding-bottom:20px;
}

上のデザインと同じように背景画像と背景色を透過したデザインで、横線のみにしました。

写真素材:GIRLY DROP

コードを見てみる

CSS

.btnlink_list{
  width:90%;
  margin:12px auto;
  padding:20px;
  background-image:url(../../img/exv/back02.jpg);
  background-repeat:ro-epeat;
  background-position:-160px 0;
  background-size:cover;
}
.btnlink_list li{
  background-color:rgba(255,255,255,0.4);
}
.btnlink_list a{
  display:block;
  margin:0 20px;
  padding:20px 0;
  line-height:1.4;
  color:#fff;
  font-weight:bold;
  text-align:center;
  border-bottom:2px solid #fff;
}
.btnlink_list li:first-child{
  padding-top:20px;
}
.btnlink_list li:last-child{
  padding-bottom:20px;
}
.btnlink_list li:first-child a{
  border-top:2px solid #fff;
}

maronnieで作ったプロフホームページのようなデザインです。

コードを見てみる

CSS

.btnlink_list{
  width:90%;
  margin:12px auto;
}
.btnlink_list a{
  display:block;
  width:90%;
  margin:12px auto;
  height:50px;
  line-height:50px;
  color:#fff;
  background-color:#fdbbb9;
  border-radius:50px;
  text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}

CSSでナンバリングしたデザインです。番号が付くことで上から2番目のデザインとイメージが違います。

コードを見てみる

CSS

.btnlink_list{
  width:90%;
  margin:12px auto;
  counter-reset:number 0;
}
.btnlink_list a{
  display:block;
  padding:12px;
  line-height:1.4;
  border-top:1px solid #ddd;
  position:relative;
}
.btnlink_list li:last-child a{
  border-bottom:1px solid #ddd;
}
.btnlink_list a:before{
  display:inline-block;
  counter-increment:number 1;
  content:counter(number,decimal-leading-zero);
  width:32px;
  font-size:1.4em;
  color:#71ace5;
}
.btnlink_list a:after{
  display:block;
  position:absolute;
  top:50%;
  right:16px;
  width:7px;
  height:7px;
  margin-top:-4px;
  border-top:solid 1px #7f7f7f;
  border-right:solid 1px #7f7f7f;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  content:"";
}

上のデザインと同じくナンバリングしたデザインです。番号を1桁にしたものです。

コードを見てみる

CSS

.btnlink_list{
  width:90%;
  margin:12px auto;
  counter-reset:number 0;
}
.btnlink_list a{
  display:block;
  padding:12px;
  line-height:1.4;
  border-top:1px solid #ddd;
  position:relative;
}
.btnlink_list li:last-child a{
  border-bottom:1px solid #ddd;
}
.btnlink_list a:before{
  display:inline-block;
  counter-increment:number 1;
  content:counter(number);
  width:32px;
  font-size:1.4em;
  color:#71ace5;
}
.btnlink_list a:after{
  display:block;
  position:absolute;
  top:50%;
  right:16px;
  width:7px;
  height:7px;
  margin-top:-4px;
  border-top:solid 1px #7f7f7f;
  border-right:solid 1px #7f7f7f;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  content:"";
}

Font Awesomeを使用したリスト型リンクですが、このままではリンクと気づかないこともあるかもね。

コードを見てみる

CSS

.btnlink_list{
  width:90%;
  margin:12px auto;
  counter-reset:number 0;
}
.btnlink_list a{
  display:block;
  padding:12px 12px 12px 62px;
  line-height:1.4;
  position:relative;
}
.btnlink_list a:before{
  font-family:"Font Awesome 5 Free";
  content:"\f058";
  top:2px;
  position:absolute;
  left:12px;
  color:#f783ac;
  font-size:32px;
  font-weight:bold;
  display:inline-block;
  width:32px;
}