本の紹介テーブルのサンプル(ヨメレバ風)

本の紹介用テーブルのテンプレートを自作してみました。


改訂版 キクタン Basic 4000 改訂版 キクタン Advanced 6000
一杉武史 (著) アルク– 2012/7/7 一杉武史 (著) アルク– 2012/7/7
Amazon Amazon
楽天ブックス 楽天ブックス
7netで見る 7netで見る


WordPress の最新デフォルトテーマ 「twenty seventeen」を使用しています。
ソースコードはコピーフリーとしますが、リンクを張り付けていく作業がかなり面倒なのであまりおすすめしません。

スタイルシートへの記述

子テーマを作成し、メニューから「外観」、「テーマの編集」を選択すればスタイルシートへ書き込むことができます。親テーマ(twenty seventeen)のスタイルシートにはに直接書き込まないようにします。

リンクボタンの作成

リンクをボタン化するためのクラス定義をスタイルシートに書きます。タイトル、アマゾン、楽天ブックス、7netで色分けするためにそれぞれ定義しました。<a class=”amazon” href=”〇〇〇〇’>アマゾンで見る</a>のように、class=”amazon”を<a の後に挿入すればボタン化できます。




/* リンクボタンの定義*/

a.title{
background-color:#ffffff;
border:1px solid #666666;
color:black;
padding:3px 5px;
cursor:pointer;
border-radius:5px;
}

a.title:hover {
color:white;
background-color:navy;
text-shadow:0px 0px 3px #ffffff;
}

a.amazon{
background-color:#ffffff;
border:1px solid #666666;
color:orange;
padding:3px 5px;
cursor:pointer;
border-radius:5px;
}

a.amazon:hover {
color:white;
background-color:navy;
text-shadow:0px 0px 3px #ffffff;
}

a.rakuten{
background-color:#ffffff;
border:1px solid #666666;
color:red;
padding:3px 5px;
cursor:pointer;
border-radius:5px;
}

a.rakuten:hover {
color:white;
background-color:navy;
text-shadow:0px 0px 3px #ffffff;
}

a.sevennet{
background-color:#fffff;
border:1px solid #666666;
color:navy;
padding:3px 5px;
cursor:pointer;
border-radius:5px;
}

a.sevennet:hover {
color:white;
background-color:navy;
text-shadow:0px 0px 3px #ffffff;
}


テーブルのカスタマイズ

文字サイズやテーブルの幅、各テーブルの余白を調整します。tableに直接書き込んでも反映されないようなので、子テーマのスタイルシートで定義します。定義したスタイルは、<table class=”booklinksmall2″>のようにtableタグ内で呼び出して使います。コピペして使う場合は、「”」をすべて半角に書き換えて使用してください。



/* テーブルのフォントサイズ、余白の設定*/

table.booklink {
border-collapse: collapse;
margin: 0 0 1.5em;
cellpadding=”0″;
font-size: 16px;
}

table.booklinksmall {
border-collapse: collapse;
margin: 0 0 1.5em;
cellpadding=”0″;
font-size: 12px;
width: 50%;
}

table.booklinksmall2 {
border-collapse: collapse;
margin: 0 0 1.5em;
cellpadding=”0″;
font-size: 12px;
}


テーブルのテンプレート

広告リンクを張り付けていきます。リンクをボタン化する場合は、<a class=”amazon” href=”〇〇〇〇’>アマゾンで見る</a>のように、class=”amazon”を「<a」 の後に挿入します。コピペして使う場合は、「”」をすべて半角に書き換えて使用してください。




/* 本の紹介用テーブルの標準テンプレート*/
<table class=”booklink”>
<tbody>
<tr>
<th style=”text-align: center;” colspan=”2″>タイトル</th>
</tr>
<tr>
<td style=”text-align: center;” colspan=”2″>著者名</td>
</tr>
<tr>
<td rowspan=”3″>画像リンク</td>
<td style=”text-align: center;”>Amazonで見る</td>
</tr>
<tr>
<td style=”text-align: center;”>楽天ブックスで見る</td>
</tr>
<tr>
<td style=”text-align: center;”>7netで見る</td>
</tr>
</tbody>
</table>


/* 本の紹介用テーブルのテンプレート2冊並べる用*/

<table class=”booklinksmall2″>
<tbody>
<tr>
<th style=”text-align: center;” colspan=”2″>本1のタイトル</th>
<th style=”text-align: center;” colspan=”2″>本2のタイトル</th>
</tr>
<tr>
<td style=”text-align: center;” colspan=”2″>本1の著者名、出版社</td>
<td style=”text-align: center;” colspan=”2″>本2の著者名、出版社</td>
</tr>
<tr>
<td rowspan=”3″>本1の画像</td>
<td>本1をAmazonで見る</td>
<td rowspan=”3″>本2の画像</td>
<td>本2をAmazonで見る</td>
</tr>
<tr>
<td>本1を楽天ブックスで見る</td>
<td>本2を楽天ブックスで見る</td>
</tr>
<tr>
<td style=”text-align: center;”>本1を7netで見る</td>
<td style=”text-align: center;”>本2を7netで見る</td>
</tr>
</tbody>
</table>






本1のタイトル 本2のタイトル
本1の著者名、出版社 本2の著者名、出版社
本1の画像 本1をAmazonで見る 本1の画像 本2をAmazonで見る
本1を楽天ブックスで見る 本2を楽天ブックスで見る
本1を7netで見る 本2を7netで見る


改訂版キクタンTOEIC TEST SCORE 800 改訂版キクタンTOEIC TEST SCORE 990
一杉武史/著 アルク– 2016/6/29 一杉武史/著 アルク– 2016/6/29
Amazon Amazon
楽天ブックス 楽天ブックス
7netで見る 7netで見る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA