【WordPress】おしゃれなサイト紹介ページの作り方

2025年9月2日2025年10月14日

当ページのリンクには広告が含まれています。

自分のサイトをいくつか持っているので、それらを1つにまとめて紹介したい。

そう思ったので、以下のように固定ページにサイト紹介ページを作成しました。

こちら

他サイト紹介ページ

今回は、Wordpressを使って、このようにカード型でサイトを紹介する方法を解説します。

1. 画像の準備

まずは、サイト紹介で使いたい画像を用意しましょう。

僕の場合は、ブログのトップページをスクショしました。

画像が用意出来たら、それをWordpressにアップロードします。

WordPressのダッシュボードから「メディア」→「ライブラリ」と進みます。

そして、先ほど用意した画像をアップロードします。

「メディアファイルを追加」をクリックし、ドラッグ&ドロップまたは「ファイルを選択」をクリックしてアップロードします。

アップロードした画像をクリックし、添付ファイルの詳細画面を開きます。

下の方にある「URLをクリップボードにコピー」をクリックしましょう。

このURLは後程使うので、メモしておきます。

使いたい画像は全てこの方法で準備しておきます。

2. カスタムHTMLにコード追加

続いて、WordpressのカスタムHTMLにコードを追加していきます。

WordPressの記事編集ページで「+」ボタンをクリックし、「カスタムHTML」を選択します。

一覧に表示されない場合は探してください。

カスタムHTMLが準備できたら、以下のコードを貼り付けます。



<!-- カード用スタイル -->
<style>
.site-card-container {
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}
.site-card {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.site-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.site-card img {
  width: 100%;
  border-radius: 5px;
}
.site-card h3 {
  margin-top: 10px;
  color: #0073e6;
}
.site-card p {
  margin: 10px 0;
  color: #333;
}
.site-card a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0073e6;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}
.site-card a:hover {
  background-color: #005bb5;
}
</style>

<!-- カードコンテナ -->
<div class="site-card-container">

  <div class="site-card">
    <img src="https://example.com/logo1.png" alt="サイトA">
    <h3>サイトA</h3>
    <p>このサイトは◯◯に役立つ情報が満載です。簡単にチェックできます。</p>
    <a href="https://example.com" target="_blank">Visit Site</a>
  </div>

  <div class="site-card">
    <img src="https://example.com/logo2.png" alt="サイトB">
    <h3>サイトB</h3>
    <p>便利なツールや情報を提供しているサイトです。ぜひ覗いてみてください。</p>
    <a href="https://example2.com" target="_blank">Visit Site</a>
  </div>

  <!-- サイトが増えたら同じ形式で追加可能 -->
  
</div>

貼り付けてプレビューをクリックすると、以下のようになると思います。

カスタムHTMLを編集

ここからは、自身のサイト情報を記載していきます。

HTML編集画面に戻りましょう。

HTMLをスクロールしていくと、上画像のようなコードがあると思います。

こちらを編集していきます。

青：準備した画像のURL
赤：サイト名
緑：サイト情報
ピンク：サイトURL

それぞれ編集していきましょう。

URLは必ず「””」の間に貼り付けてください。

この作業を繰り返せば、おしゃれなサイト紹介記事を作ることができます。

以下のコードを追加していけば、何個でも作成することができます。



  <div class="site-card">
    <img src="https://example.com/logo1.png" alt="サイトA">
    <h3>サイトA</h3>
    <p>このサイトは◯◯に役立つ情報が満載です。簡単にチェックできます。</p>
    <a href="https://example.com" target="_blank">Visit Site</a>
  </div>