内部リンクと外部リンクのデザインについて考えてみた

ブログの記事中に挿入する“内部リンク”と“外部リンク”のデザインについて考えてみました。適当に URL やサイト名のテキストにリンクを設定するよりも、“囲い枠”で囲んだりサムネイルを付けたほうが見栄えが良いが感じませんか?

ブログで使用するリンクの種類

まずは Web サイトで、特にブログで使用するリンクで代表的なものをいくつかピックアップしてまとめてみました。

内部リンク

同じサイト内の別ページへ移動するリンクです。“関連記事”などをイメージしがちですが、「グローバルナビ」や「パンくず」なども含まれます。

記事中に挿入する「あわせて読みたい」みたいな関連記事へのリンクであれば、“新しいタブで開く”ほうが個人的にはユーザーフレンドリーなのかなと思います。それ以外の、Web サイトを見ている人がサイト内を自然に移動するようなリンクであればそのまま同一タブで遷移させるのが一般的ですね。

外部リンク

外部の Web サイトのページへ移動するリンクです。ブログであればよく“参考”や“紹介”などで誘導したりしますね。

基本的には“新しいタブで開く”(target="_blank")で設定するのが一般的だと思います。

アンカーリンク

そのページ内の任意の場所に移動させるリンクです。例えば「目次」や「ページトップに戻るボタン」で使われます。動きを滑らかにするのは JQuery や CSS を組み合わせます。

バナーリンク

ちょっと毛色は違いますが、リンクを画像に設定して、ボタン自体を目立たせたり Web サイトを彩ったりするリンクです。Web 広告としてもよく使われますね。


特に難しく考えるものではないですが、だいたいこんな感じですよね。ちなみに枠で囲ったりして一体感のある“モジュール”になっているもののことをカードなんて呼んだりします。

ブログの内部リンクのデザイン

では、ブログでよく使われている“内部リンク”を構成する要素を見ていきたいと思います。

一般的な内部リンクで、最低限こだわった形の内部リンクにしようとしたら、大体こんな感じの構成ですよね。これを元にレイアウトのバリエーションをいくつか考えると下のようなイメージになりました。

イメージは、あえて幅を狭くしています
というのも、このリンクが表示されるエリアの幅が想定よりも狭く表示されることや、リンク先の記事のタイトルの長さが必ずしも意図した長さではないので、場合によってはテキスト部分が3行、4行と縦に長くなってしまう可能性があります。

よって、フレキシブルなデザインを想定してデザインをしなければなりません。

画像のような崩れが生じてしまうことも考慮して、今回は下のようなイメージで作ってみました。

See the Pen blogcard by MATSUDAI (@matsudai) on CodePen.

ではこちらの構成を分解してコード見ていきたいと思います。

HTML コード(内部リンク)

<a href="#" class="naibu">
  <span class="naibu__label">関連記事</span>
  <figure class="naibu__thumbnail">
    <img class="naibu__img" src"サムネイルのURL">
  </figure>
  <h4 class="naibu">関連記事のタイトル</h4>
</a>

今回は、枠全体(カード型の)リンクにしたかったので外枠は div ではなく a 要素で囲いました。

div で囲ってしまい、ボタンをつけたりテキスト部分をリンクにしたりするのもいいと思います!

CSS コード(内部リンク)

まずは全体を囲っている a 要素(class="naibu")のスタイルを見ていきます。

.naibu{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  margin:1em;
  padding:8px;
  border:2px solid rgba(55,162,237,1);
  text-decoration:none;
  transition:.5s;
}

内側の並びは display:flex; で指定して、横並びのセンター揃いにしました。

下記はその他のポイントです。

position:relative; :囲い枠の見出し(「関連記事」の部分)をタブ風にするために基準位置を設定。
transitionクリッカブルなアニメーションを追加するために。

次に、囲い枠の見出し(「関連記事」の部分)の CSS を見てみます。

.naibu__label{
  position:absolute;
  top:0;
  left:0;
  padding: 6px 12px;
  background-color:rgba(55,162,237,1);
  color: #fff;
  font-size: 12px;
  transform: translate(-2px,-100%);
  border-radius: 6px 6px 0 0;
}
.naibu__label::before{
  content:'\f35d';
  font-family:'Font Awesome 5 free';
  font-size:12px;
  font-weight:900;
  color: #fff;
  margin-right:6px;
}

ここでは position:absolute; を使って位置を決めるのがポイントです。

さきほど a 要素(class="naibu")のところで relative を指定しているので、そこを基準にして位置をずらします。タブ風にしたかったので、左上を 0 に合わせて、transform:translateY(-100%);でY軸で要素(100%)分をまるっと上(マイナス)に上げる方法でやってみました。

また、アイコンは「Fant Awesome」を利用して、::before疑似要素でつけています。やり方についてはこちらの記事で紹介しているので、気になったらご覧ください。

続いて、囲い枠内のサムネイルとタイトル部分のスタイルを記述します。flex が効いて横並びになっているので、幅を調整してお好みのサイズ感に調整します。

.naibu__thumbnail{
  width:50%;
}
.naibu__img{
  width:100%;
}
.naibu__body{
  width:100%;
  margin-left:12px;
  margin-right:12px;
}
.naibu__title{
  margin:0;
  padding:0;
  color:rgba(50,50,50,1);
  font-size:16px;
  font-weight:bold;
  line-height:1.6em;
}

タイトル部分は、他の要素(例えばブログ名とか、抜粋部分とか、etc)を入れることを考慮して div で囲んであります。ですので、サムネイル部分(.naibu__thumbnail)とタイトルを囲っている枠(.naibu__body)でサイズを調整します。

ちなみに今回はパーセントで調整しました。

仕上げに、クリッカブルに見せるためにアニメーションを付け加えます。

.naibu:hover{
  background-color:rgba(55,162,237,.1);
  transform: translateY(-4px);
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, .1);
}

動きとしてはマウスオーバーで .naibu で 指定した transition と連動して、ふわっと上に浮くアニメーションです。

HTML で全体を a 要素で囲ったのは、これをやりたかったというのもあります(^-^;

ブログの外部リンクのデザイン

今度は“外部リンク”のデザインについてみていきたいと思います。

まずは最低限こだわった形のデザインにするときの構成から。

内部リンクと違ってサムネイルは表示させないデザインにしました。

自分で管理できないサイトの素材を使うのは少し面倒なので、最低限って考えるとこんなものかなぁという感じです。(内部リンクは SEO の観点から目立たせたいという思惑もありサムネイル付きで作りました。)

また、内部リンクのデザインで含めなかった構成要素として、サイト名を入れました。外部リンクには必須な構成要素だと思います。

レイアウトのバリエーションを考えてみました。

前項の内部リンクのデザインに合わせて左上の“タブ風”のデザインで作っていきます。

出来上がりイメージはこんな感じ。

See the Pen blogcard-external by MATSUDAI (@matsudai) on CodePen.

こちらも構成を分解してコードを見ていきたいと思います。

HTML コード(外部リンク)

<div class="wrapper-gaibu">
  <a href="#" class="gaibu">
    <span class="gaibu__label">参考リンク</span>

    <div class="gaibu__body">
      <span class="gaibu__site">外部サイト名</span>
      <h4 class="gaibu__title">関連記事のタイトル</h4>
    </div>
  </a>
</div>

基本的な構造は、サムネイルが無いだけで内部リンクとほぼ一緒です。

CSS コード(外部リンク)

まずは全体を囲っている a 要素(class="gaibu")のスタイルです。

.gaibu{
  position:relative;
  display:block;
  margin:16px;
  padding:16px;
  border:2px solid rgba(55,162,237,1);
  text-decoration:none;
  transition:.5s;
}

a 要素は本来 inline 要素のため、枠として囲う要素として使うために、display:block; を指定しています。内部リンクのデザインのスタイルと同じく flex をそのまま流用しても問題ありません。

外部リンクのデザインにも、サムネイルを後から追加する可能性を考えるとむしろ flex が合理的だと思いますが、上記のコードでは説明のためあえて block で記述してあります。

囲い枠の見出しのスタイルについては、内部リンクのデザインと完全に同じなので割愛して、
次は、タイトル(.gaibu__title)とサイト名(gaibu__site)の並びを見ていきたいと思います。

先に2つの構成要素を囲っている枠(.gaibu__body)について見てみます。

.gaibu__body{
  display:flex;
  flex-direction:column-reverse;
  width:100%;
  margin-left:12px;
  margin-right:12px;
}

これは内部の構成要素を、flex を使用して縦に並べる指定をしています(ここではタイトル→サイト名の並びにしたいですが、HTMLでは逆になっているので、flex-direction:column-reverse; を使用して並びを実現しています。)

では、タイトル(.gaibu__title)とサイト名(gaibu__site)のスタイルです。

.gaibu__title{
  margin:0 0 6px 0;
  padding:0;
  color:rgba(50,50,50,1);
  font-size:16px;
  font-weight:bold;
  line-height:1.6em;
}
.gaibu__site{
  color:#333;
  font-size:0.8em;
}
.gaibu__site::before{
  content:'\f0c1';
  font-family:'Font Awesome 5 free';
  font-size:;
  font-weight:900;
  color:;
  margin-right:0.7em;
}

タイトル(.gaibu__title)のスタイルは padding を多少調整したくらいで、内部リンクのデザインと特に変化はありません。

サイト名(gaibu___site)は、頭に「Font Awesome」でアイコンを付けたデザインにして、単調にならないようにしました。

オンマウスでのアニメーションのスタイルは、特筆することはなく内部リンクとほぼ一緒のため、割愛します。

まとめ

リンクのデザインにこだわるのは大きなメリットがあります。

特に内部リンクのデザインにこだわるのは、ただ記事の見た目をよくするだけではなく、サイト内の回遊を促すという大切な理由があります。

内部リンクと外部リンクのデザインにこだわることは、記事の見た目をアップさせるだけではなく、サイトとしてのクオリティアップにもつながるので、ぜひこだわっていきたいですね!

トップへ戻る