「読みっぱなしを防ぐ」いいね機能の作り方｜会員サイトの学習効率が上がる仕組み

ABOUT US

RYO代表

横田涼（リョウ）｜The Remote Digital Hub代表
パーソナル英語コーチング「RYO英会話ジム」代表・投資メディア運営。

1985年、大阪生まれ。セブ・オーストラリアへの留学と7年間の海外勤務を経て、2019年に 「RYO英会話ジム」 を起業。現在は、サービスの企画・運営、商品づくり、Web集客を中心に事業に取り組んでいます。

2020年からは、海外を拠点にノマド生活を実践。 オンラインで事業を育てながら、自分に合った場所で暮らす働き方 を続けています。あわせて、投資・資産形成メディアも運営し、自身の投資経験や、事業で得た収入を資産につなげる取り組みを発信しています。

このブログでは、海外での暮らしやノマド生活のリアル、経験やスキルの商品化、Web・SNSでの集客、AI活用について、 自分で試したことや、失敗から学んだこと をお届けしています。

現在は、これまでの事業運営の経験を活かし、 自分の経験やスキルを商品にして、オンラインで仕事をつくりたい方 への個別サポートも行っています。

「自分の経験にも、まだ活かせる可能性がある」。そんな気づきと、次の一歩につながる情報を届けていきたいと思っています。

詳しいプロフィール・これまでの歩みを見る →

1 【WordPress】あとで見返せる「いいね機能」の作り方｜Favoritesで実装
2 なぜ「いいね機能」を入れたのか
3 できること（完成イメージ）
4 コミュニティ運営との相性がいい理由
5 使用プラグイン
- 5.1 Favorites（WordPressプラグイン）
6 実装手順
7 実際に使っているCSS（完成版）
8 まとめ
9 最後に

【WordPress】あとで見返せる「いいね機能」の作り方｜Favoritesで実装

RYOです。今回は、
英語コーチングの会員ページに「いいね機能」を実装したので、その方法を共有します。

「あとで見返せる仕組み」を作りたい方や、
コミュニティ運営をしている方には特におすすめです。

なぜ「いいね機能」を入れたのか

英語学習では、

あとで復習したい
重要な表現をもう一度見たい

こういった場面がかなり多いです。

ただ、ブックマーク機能がないと
記事が流れてしまって再度見つけにくいという課題がありました。

そこで今回、

ワンクリックで記事を保存できる「いいね機能」を導入しました。

できること（完成イメージ）

記事に「いいね」ボタンを設置
押すと保存される
会員ページで一覧表示できる

受講者ごとに「自分専用の復習リスト」が作れるようになります。

コミュニティ運営との相性がいい理由

この機能は、単なる便利機能ではなく、

学習体験そのものを変えます。

インプット → 保存 → 復習の導線ができる
コンテンツの「使われ方」が変わる
継続率が上がる

特に、オンラインサロンやスクールなど、
コンテンツが蓄積されていくサービスとの相性はかなり良いです。

使用プラグイン

Favorites（WordPressプラグイン）

主な機能：

投稿ごとにお気に入り登録
ユーザーごとに保存管理
ショートコードで一覧表示

シンプルで扱いやすく、カスタマイズもしやすいのが特徴です。

実装手順

① プラグインをインストール

WordPress管理画面で
「Favorites」と検索 → インストール → 有効化

② 記事に「いいねボタン」を設置

[favorite_button]

記事の下など、任意の位置に設置できます。

③ 一覧ページを作る（会員ページ）

[user_favorites include_thumbnails="true" include_buttons="true"]

これで、保存した記事一覧が表示されます。

実際に使っているCSS（完成版）

デフォルトのままだと少し味気ないので、
カードUIに整えています。

/* =========================================
   Favorites（ブックマーク一覧）完成版CSS
========================================= */

/* リスト初期化 */
.entry-content ul.favorites-list,
.entry-content ul.favorites-list li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ドット削除 */
.entry-content .favorites-list li::before,
.entry-content .favorites-list li::after,
.entry-content .favorites-list li::marker,
.entry-content .favorites-list a::before,
.entry-content .favorites-list a::after {
  content: none !important;
  display: none !important;
}

/* 装飾対策 */
.entry-content .favorites-list li > span,
.entry-content .favorites-list li > i {
  display: none !important;
}

/* カードレイアウト */
.favorites-list li {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;

  padding: 16px;
  margin-bottom: 16px;

  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;

  transition: all 0.2s ease;
}

/* ホバー */
.favorites-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* サムネイル */
.favorites-list img {
  width: 100px;
  border-radius: 8px;
}

/* タイトル */
.favorites-list a {
  font-weight: bold;
  color: #333;
  text-decoration: none;
  line-height: 1.5;

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ボタン */
.favorites-list .simplefavorite-button {
  min-width: 140px;
  text-align: center;

  background: #f4a62a;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;

  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ボタンホバー */
.favorites-list .simplefavorite-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  background: #e6951f;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .favorites-list li {
    grid-template-columns: 1fr;
  }

  .favorites-list img {
    width: 100%;
  }

  .favorites-list .simplefavorite-button {
    margin-top: 8px;
  }
}