本の紹介用テーブルのテンプレートを自作してみました。
| 改訂版 キクタン Basic 4000 |
改訂版 キクタン Advanced 6000 |
||
|---|---|---|---|
| 一杉武史 (著) アルク– 2012/7/7 | 一杉武史 (著) アルク– 2012/7/7 | ||
 |
Amazon |
 |
Amazon |
| 楽天ブックス | 楽天ブックス | ||
| 7netで見る | 7netで見る |
||
WordPress の最新デフォルトテーマ 「twenty seventeen」を使用しています。
ソースコードはコピーフリーとしますが、リンクを張り付けていく作業がかなり面倒なのであまりおすすめしません。
スタイルシートへの記述
子テーマを作成し、メニューから「外観」、「テーマの編集」を選択すればスタイルシートへ書き込むことができます。親テーマ（twenty seventeen）のスタイルシートにはに直接書き込まないようにします。
リンクボタンの作成
リンクをボタン化するためのクラス定義をスタイルシートに書きます。タイトル、アマゾン、楽天ブックス、７netで色分けするためにそれぞれ定義しました。<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>
/* 本の紹介用テーブルのテンプレート２冊並べる用*/
<table class="booklinksmall2">
<tbody>
<tr>
<th style="text-align: center;" colspan="2">本１のタイトル</th>
<th style="text-align: center;" colspan="2">本２のタイトル</th>
</tr>
<tr>
<td style="text-align: center;" colspan="2">本１の著者名、出版社</td>
<td style="text-align: center;" colspan="2">本２の著者名、出版社</td>
</tr>
<tr>
<td rowspan="3">本１の画像</td>
<td>本１をAmazonで見る</td>
<td rowspan="3">本２の画像</td>
<td>本２をAmazonで見る</td>
</tr>
<tr>
<td>本１を楽天ブックスで見る</td>
<td>本２を楽天ブックスで見る</td>
</tr>
<tr>
<td style="text-align: center;">本１を7netで見る</td>
<td style="text-align: center;">本２を7netで見る</td>
</tr>
</tbody>
</table>
| タイトル | |
|---|---|
| 著者名 | |
| 画像リンク | Amazonで見る |
| 楽天ブックスで見る | |
| 7netで見る | |
| 改訂版 キクタン【中学英単語】高校入試レベル |
|
|---|---|
| 一杉武史／著 アルク– 2015/11/27 | |
 |
Amazonで見る |
| 楽天ブックスで見る | |
| 7netで見る |
|
| 本１のタイトル | 本２のタイトル | ||
|---|---|---|---|
| 本１の著者名、出版社 | 本２の著者名、出版社 | ||
| 本１の画像 | 本１をAmazonで見る | 本１の画像 | 本２をAmazonで見る |
| 本１を楽天ブックスで見る | 本２を楽天ブックスで見る | ||
| 本１を7netで見る | 本２を7netで見る | ||
| 改訂版キクタンTOEIC TEST SCORE 800 |
改訂版キクタンTOEIC TEST SCORE 990 |
||
|---|---|---|---|
| 一杉武史／著 アルク– 2016/6/29 | 一杉武史／著 アルク– 2016/6/29 | ||
 |
Amazon |  |
Amazon |
| 楽天ブックス | 楽天ブックス | ||
| 7netで見る |
7netで見る |
||
