ご自身で出している書籍やKindle本があれば、それをブログやホームページに載せておくと見ていただける可能性が高まります。

当ブログで実際に表示させている方法の紹介です。

目次

やりたいこと

ブログのトップページと、各記事ページで自動で著書一覧を表示させます。

このブログでは次のような手順で表示させています。

 

  1. 著書一覧表示用のテンプレートを作成
  2. 作成したテンプレートに著書の表紙画像、著書のリンクを貼る
  3. 作ったテンプレートをトップページ、記事ページで呼び出す

 

以下で紹介するコードをコピペしていただければ、このブログと同じ見た目で表示させることができます。

著書一覧表示用のテンプレートを作成

まずは著書一覧のテンプレートを作ります。

なお、このブログは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執筆後記

今日は確定申告を中心に。

久しぶりに宅配買取で服を売りました。
値段はあまり付かなそうですが、クローゼットがスッキリしてよかったです。

Something New一日一新

Excelで特定口座のシミュレーション

\本を出版しました/

\セルフマガジン無料送付/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

お金・時間・やりがいなどのバランスを取り人生を楽しむことをサポートする税理士・ミュージシャン・ひとり社長。
ブログ「FAVPRESSO」では生き方・ミニマリズム・ひとり仕事の効率化・音楽・おすすめアイテムなどについて発信。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援・デザインに関するコンサルティング・アコギの初め方サポートなど。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。
名刺、ロゴ、WordPressテーマ、本の表紙から音楽まで自作する、自称超クリエイティブ。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書 【Amazon】著書一覧