ブログ・ホームページに著書一覧をいい感じに表示させる方法。
ご自身で出している書籍やKindle本があれば、それをブログやホームページに載せておくと見ていただける可能性が高まります。
当ブログで実際に表示させている方法の紹介です。
目次
やりたいこと
ブログのトップページと、各記事ページで自動で著書一覧を表示させます。
このブログでは次のような手順で表示させています。
- 著書一覧表示用のテンプレートを作成
- 作成したテンプレートに著書の表紙画像、著書のリンクを貼る
- 作ったテンプレートをトップページ、記事ページで呼び出す
以下で紹介するコードをコピペしていただければ、このブログと同じ見た目で表示させることができます。
著書一覧表示用のテンプレートを作成
まずは著書一覧のテンプレートを作ります。
なお、このブログは1カラムのデザインで、記事ページとトップページでは幅が異なりますので2つ作っています。
同じで問題ない場合は1つで大丈夫です。
- トップページ用→books.php
- 記事ページ用→books-single.php
という名前にしています。
php
<section class="books">
<h1>\本を出版しました/</h1>
<div class="display">
<div class="inner">
<div class="cover">
<!-- ここに表紙画像のリンクを貼る(例:<img alt="本のタイトル" src="画像のリンク" height="432" width="314">) -->
</div>
<div class="btn">
<!-- ここに著書のリンクを貼る(例:<a href="本のリンク" target="_blank" rel="nofollow noopener noreferrer" referrerpolicy="no-referrer-when-downgrade"><i class="fa fa-caret-right"></i> 詳しく見る</a> -->
</div>
</div>
</div>
</section>
<section class="books-single">
<h1>\本を出版しました/</h1>
<div class="display">
<div class="inner">
<div class="cover">
<!-- ここに表紙画像のリンクを貼る(例:<img alt="本のタイトル" src="画像のリンク" height="432" width="314">) -->
</div>
<div class="btn">
<!-- ここに著書のリンクを貼る(例:<a href="本のリンク" target="_blank" rel="nofollow noopener noreferrer" referrerpolicy="no-referrer-when-downgrade"><i class="fa fa-caret-right"></i> 詳しく見る</a> -->
</div>
</div>
</div>
</section>
sectionのクラス名が違うだけで、後はまったく同じです。
ボタンの部分はFontAwesomeのアイコンを使っています。
画像のリンクは、WordPressの管理画面の「メディア」からアップロードしたときに取得できます。
css
/****** 出版物一覧******/
/* スマホ表示 */
section.books {
margin: 30px 0;
padding: 20px 25px;
background: #f5f5f5;
width: 100%;
margin-right: calc(((100vw - 100%) / 2) * -1);
margin-left: calc(((100vw - 100%) / 2) * -1);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
section.books-single {
margin: 30px 0;
padding: 20px 25px;
background: #f5f5f5;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
section.books h1 {
text-align: center;
}
section.books-single h1 {
text-align: center;
display: block;
font-size: 1.2rem;
font-weight: bold;
}
section.books .display,section.books-single .display {
display: block;
}
section.books .inner,section.books-single .inner {
align-items: center;
margin: 40px 0 80px;
}
section.books .inner:last-child,section.books-single .inner:last-child {
margin-bottom: 30px;
}
section.books .cover,section.books-single .cover {
width: 170px;
max-height: 280px;
margin: 25px auto 10px;
}
section.books .cover img,section.books-single .cover img {
width: 100%;
max-height: 280px;
object-fit: cover;
display: block;
overflow: hidden;
display: block;
width: 100%;
max-width: 100%;
max-height: 100%;
margin: 0;
box-shadow: 0 12px 23px -9px rgb(0 0 0 / 57%);
}
section.books .btn,section.books-single .btn {
text-align: center;
margin: 45px 0 30px;
}
section.books .btn a,section.books-single .btn a {
border: none;
border-radius: 2px;
box-shadow: 0 5px 18px -3px rgb(0 0 0 / 17%);
background: #ffffff;
color: #555;
padding: .5em 1.5em;
margin-bottom: .5em;
transition: all ease-in-out .3s;
}
section.books .btn a:hover,section.books-single .btn a:hover {
box-shadow: 0 4px 6px 0 rgb(0 0 0 / 17%), 0px 3px 6px 0 rgb(0 0 0 / 12%), 0 2px 11px -3px rgb(0 0 0 / 20%);
text-decoration: none;
}
/* パソコン・タブレット表示 */
@media (min-width: 600px) {
section.books .display {
display: flex;
align-items: center;
justify-content: center;
}
section.books .inner {
margin: 20px 10%;
}
section.books .inner:last-child {
margin: 0 10%;
}
section.books-single .display {
display: flex;
align-items: center;
justify-content: center;
}
section.books-single .inner {
margin: 20px 10%;
}
section.books-single .inner:last-child {
margin: 0 10%;
}
}
2冊以上ある場合、パソコンでは横並びに、スマホだと1冊ずつ縦に表示されます。
テンプレートが1つで済む場合は、「books-single.php」の部分を削除していただければと思います。
トップページと記事ページでテンプレートを呼び出す
以下のコードをそれぞれindex.php、single.phpに記述します。
<!-- 出版物一覧 -->
<?php get_template_part('books'); ?>
<!-- 出版物一覧 -->
<?php get_template_part('books-single'); ?>
細かいところはご自身のサイトに合わせて調整していただければと思います。
なお、セルフマガジンも同じやり方で表示させています。
サービスメニュー
Postscript執筆後記
今日は確定申告を中心に。久しぶりに宅配買取で服を売りました。
値段はあまり付かなそうですが、クローゼットがスッキリしてよかったです。