パソコントラブルから
Web制作まで、
ITの困りごとを解消

概要

通常のリンク一覧（ul, li, aタグ）を、CSSとJavaScriptを使って、画像付きのモダンなカード型デザインに自動で変換します。 記事の最後に関連記事を表示したり、サイドバーでおすすめページを案内したりするのに最適です。サイト内の回遊率を高め、ユーザーの滞在時間を延ばす効果が期待できます。

デモ

使い方

1. HTMLの準備: 関連リンクを表示したい場所に、class="related-links-list" を付けたulタグと、リスト形式のリンクを設置します。各aタグに、カード画像として表示したい画像のパスをdata-imageで指定します。
2. CSSの追加: 以下のCSSを、サイトのCSSファイルに貼り付けます。
3. JavaScriptの追加: 以下のJavaScriptコードを、サイトのJSファイルに貼り付けるか、</body>タグの直前に<script>タグで囲って設置します。

コード

1. HTML

コピー

<ul class="related-links-list">
  <li><a href="/posts/how-to-think-security" data-image="/img/blog-pic.jpg">存在する記事へのリンク</a></li>
  <li><a href="/parts/index-generate" data-image="/img/pict_01.jpg">存在するパーツへのリンク</a></li>
  <li><a href="https://google.co.jp" data-image="/img/pict_02.jpg">外部リンクの例</a></li>
  <!-- 表示したいリンクをここに追加 -->
</ul>
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

2. CSS

コピー
.related-links-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.related-links-list li {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s, transform 0.3s;
}
.related-links-list li:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-5px);
}
.related-links-list a {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.related-links-list .related-link-image {
  width: 100%;
  height: 150px;
  background-size: cover;
  background-position: center;
}
.related-links-list .related-link-content {
  padding: 15px;
}
.related-links-list .related-link-title {
  font-weight: bold;
  margin: 0 0 5px 0;
  font-size: 1.1em;
}
.related-links-list .related-link-domain {
  font-size: 0.8em;
  color: #888;
}
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

3. JavaScript

コピー
document.addEventListener('DOMContentLoaded', function() {
  const relatedLinksLists = document.querySelectorAll('.related-links-list');
  
  relatedLinksLists.forEach(list => {
    const links = list.querySelectorAll('a');
    
    links.forEach(link => {
      const imageUrl = link.dataset.image;
      const titleText = link.textContent;
      let domain = '';

      try {
        const url = new URL(link.href);
        domain = url.hostname;
      } catch (e) {
        console.warn('Could not parse URL for domain extraction:', link.href);
      }

      // リンクの中身をリセット
      link.innerHTML = '';
      
      // コンテンツ全体を保持するラッパー要素を作成
      const contentWrapper = document.createElement('div');
      contentWrapper.className = 'related-link-wrapper';
      
      // 画像要素を作成
      if (imageUrl) {
        const imageDiv = document.createElement('div');
        imageDiv.className = 'related-link-image';
        imageDiv.style.backgroundImage = `url(${imageUrl})`;
        contentWrapper.appendChild(imageDiv);
      }
      
      // テキストコンテンツ用のコンテナを作成
      const contentDiv = document.createElement('div');
      contentDiv.className = 'related-link-content';
      
      const titleP = document.createElement('p');
      titleP.className = 'related-link-title';
      titleP.textContent = titleText;
      contentDiv.appendChild(titleP);
      
      // ドメインがある場合のみ要素を作成して追加
      if (domain) {
        const domainP = document.createElement('p');
        domainP.className = 'related-link-domain';
        domainP.textContent = domain;
        contentDiv.appendChild(domainP);
      }
      
      contentWrapper.appendChild(contentDiv);
      link.appendChild(contentWrapper);
    });
  });
});
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

注意点

• TMLの構造: このスクリプトは、リンクを囲む要素にrelated-links-listというクラスが、そして各リンクにはdata-imageというカスタムデータ属性が付与されていることを前提としています。このクラスや属性がないと、スクリプトは動作しません。

• URLの有効性: スクリプトは、URLからドメインを抽出するためにnew URL()を使用します。もしURLが有効な形式でない場合（例: 不完全なパス）、ドメインは表示されません。

• CS- Sの併用: このスクリプトはDOM（HTML構造）を変更するだけで、見た目のデザインはCSSで定義する必要があります。related-link-image、related-link-content、related-link-title、related-link-domainなどのクラスを使って、画像のサイズやフォント、レイアウトを調整してください。

カスタマイズ方法

• 対象要素の変更: スクリプトの最初の行にあるconst relatedLinksLists = document.querySelectorAll('.related-links-list');を変更することで、スクリプトを適用する対象要素を変更できます。たとえば、ul要素のIDを指定してdocument.getElementById('my-related-links')にすることも可能です。

• 表示する情報の追加: 現在、タイトルとドメインが表示されますが、data-*属性を使って公開日や記事の概要といった他の情報を追加し、link.dataset.dateのように取得して表示することもできます。これにより、より詳細なリンク情報をユーザーに提供できます。

• エラーハンドリングの強化: URLのパースに失敗した場合の動作をカスタマイズできます。例えば、console.warnではなく、特定のクラスをリンクに追加して、スタイルを適用することも可能です。これにより、デザインを通じてユーザーにエラーを知らせることができます。