【静的サイト制作】ブログカード風のコンテンツリンクをつくる【各コンテンツに導くリンクの刷新】

　この記事では、Webサイトにブログカード風のコンテンツリンクを実装する方法について説明します。

1. ブログカード風のコンテンツリンク
 2. HTMLでコンテンツリンクをつくる
 3. サイトページのひな型にコンテンツリンクを埋め込む
 4. コンテンツリンク配置のスタイル設定
 5. まとめ

1. ブログカード風のコンテンツリンク

　コンテンツリンクをどういった形式で作成、実装するかについては、Web制作者の自由であり、これといった決まりのようなものはありませんが、自サイトに実装しているコンテンツリンクは、図1-1のようにブログカード風の外観にしてあります。
　

　　
図1-1 自サイトのコンテンツリンク

　
　このようしておくことで、コンテンツの内容に閲覧者の興味を引くような説明を付加することが可能となり、すこしは訪問率UPにつながるのではないかと考えます。

　ブログカード風のコンテンツリンクを実装している自サイトの外観は、以下より確認いただけます。

main.hirokami1024.com

趣味のこと中心に，思いつくまま運営しているサイトです。

2. HTMLでコンテンツリンクをつくる

　ブログカード風のコンテンツリンクをつくるには、図2-1のようにHTMLを記述します。ブログカードのHTMLは他にもネット上でいくつか公開されていますので、ご自分が気に入ったものを使えばいいと思います。

　以下の部分をご自分のWebサイトのコンテンツに応じた内容に変更すれば、完成となります。

・リンク先コンテンツのURL
・画像のURL
・リンク先コンテンツのタイトル
・リンク先コンテンツの説明文

<div class="blogcardfu" style="width:auto;max-width:700px;border:3px solid #170B3B;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;">
<a href="リンク先コンテンツのURL" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:200px;padding:0 0 0 10px;margin:0 0 5px 5px;">
<img src="画像のURL" width="200" style="width:100%;height:auto;max-height:200px;min-width:0;border:0 none;margin:0;"></span>
<br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">
リンク先コンテンツのタイトル</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;"><br>
リンク先コンテンツの説明文<br>
</span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>

図2-1 ブログカード風のコンテンツリンクHTML

3. サイトページのひな型にコンテンツリンクを埋め込む

　2.で作成したコンテンツリンクHTMLをサイトページのひな型に埋め込みます。

　コンテンツリンクを埋め込んだサイトページのひな型の例として、自サイトのindexページを図2-1に示します。緑網掛けの部分が、コンテンツリンク部分となります。

<!-- TOPページ -->
<html>
<!-- HEAD ココから -->
<head>
<style>
body {
-webkit-text-size-adjust: 100%;
}
</style>
<!-- ページタイトル指定 -->
<title>main.hirokami1024.com</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/table_01.css">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
//共通パーツ読み込み
$(function() {
$("#header").load("common/header.html");
$("#sidebar").load("common/sidebar.html");
$("#footer").load("common/footer.html");
});
</script>
</head>
<!-- HEAD ココまで -->
<!-- BODY ココから -->
<body background=image/sozai/hh0430.gif>
<!-- HEADER -->
<div id="header"></div>
<!-- MAIN CONTENTS -->
<div id="container">
<div id="content">
<div id="inner-content" class="clearfix">
<main id="main">
<br/>
<p align="center"><font size="5"><b>コンテンツ一覧</b></font></p>
<p align="center">
<table class="body_table_0">
<tbody>
<tr>
<td>
<div class="blogcardfu" style="width:auto;max-width:700px;border:3px solid #170B3B;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;">
<a href="https://main.hirokami1024.com/pc.htm" style="display:block;text-decoration:none;"><span class="blogcardfu-image" style="float:right;width:200px;padding:0 0 0 10px;margin:0 0 5px 5px;">
<img src="https://images.weserv.nl/?w=200&url=ssl:main.hirokami1024.com/image/PC/k63-2.JPG" width="200" style="width:100%;height:auto;max-height:200px;min-width:0;border:0 none;margin:0;"></span>
<br style="display:none"><span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">
購入したPCと自作PCの遍歴</span><br><span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;"><br>
最初にPCを購入したのは1996年のことでした。それから20年以上が経ちましたが、今に至るまでに、PCを自作するようにもなりました。<br><br>初期のころに比べると、PCのハードウェアスペックは劇的な進歩を遂げていますが、その進歩の変遷についてもご覧いただけると思います。<br>
</span><br><span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>
<br/>
：
：
：
</td>
</tr>
</tbody>
</table>
</p>
<p>　</p>
</main>
<!-- SIDEBAR -->
<div id="sidebar"></div>
</div><!-- /#inner-content -->
</div><!-- /#content -->
<!-- FOOTER -->
<div id="footer"></div>
</body>
<!-- BODY ココまで -->
</html>

図2-1 自サイトのindexページ(index.html)

　なお、「サイトページのひな型」についての詳細、作成方法については、以下の記事をご覧ください。

【静的サイト制作】サイトページのひな形をつくる【部品化したヘッダー・サイドバー・フッター使用】

サイトページのひな形を作ってしまえば、コンテンツや記事を追加する際の手間が大幅に削減できるはず。部品化したヘッダー・サイドバー・フッターを適切に配置して、ページひな形をつくることが目的です。

4. コンテンツリンク配置のスタイル設定

　自サイトのindexページでは、コンテンツリンク配置用のテーブル(body_table_0)に、配置するようにしており、PCから見ても、スマホから見ても外観が崩れないようにしてあります。

　body_table_0のスタイル設定を図4-1に示します。

/* body_table_0 */
/* スマホ用設定 */
@media (max-width: 768px) {
  table.body_table_0 {
    width: 100%;
  }

  table.body_table_0 tr,
  table.body_table_0 td {
    display: block;
    border: 0px solid #999999;
  }

  table.body_table_0 td {
    text-align: left;
    line-height: 200%;
    border: 0px solid #999999;
  }
}
/* PC用　設定 */
@media (min-width: 768px) {
  table.body_table_0 {
    display: table;
    width: 85%;
    border-collapse: collapse;
  }
  table.body_table_0 tr,
  table.body_table_0 td {
    border: 0px solid #999999;
  }
  table.body_table_0 tr {
    display: table-row;
  }
  table.body_table_0 td {
    display: table-cell;
    text-align: left;
    line-height: 200%;
  }
}

図4-1 コンテンツリンク配置のスタイル設定CSSコード(table_01.css)

　なお、PCから見てもスマホから見ても外観が崩れないようにするレシポンシブ対応の詳細ついては、以下の記事をご覧ください。