記事素材デザイン保管庫
by

関連記事(横・背景色あり)

関連記事角丸背景色あり

概要

メディア内の関連記事を表示します。
html内の【記事URL】を表示したいURLに変更いただくと、自動的に見出し・概要文を表示します。
「合わせて読みたい関連記事」の見出しスタイルは各メディアのスタイルに依存します。

デモ

合わせて読みたい関連記事

html・css・js

それぞれコピーしてお使いください。

HTML

<div class="create-link">
    <h2 class="create-link__title" id="合わせて読みたい関連記事-1">合わせて読みたい関連記事</h2>
    <div class="create-link__list">
        <a class="create-link__item" href="https://item-samples.hatenablog.com/entry/2023/08/01/151254"></a>
        <a class="create-link__item" href="https://item-samples.hatenablog.com/entry/2023/08/01/151309"></a>
        <a class="create-link__item" href="https://item-samples.hatenablog.com/entry/2023/08/23/161141"></a>
    </div>
</div>

CSS

.create-link__title {
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .create-link__title {
        margin-bottom: 24px;
    }

}
.create-link__list {
    display: flex;
    gap: 24px;
    flex-direction: column;
}

@media (min-width: 768px) {
    .create-link__list {
        flex-direction: row;
    }
}

.entry-content .create-link__item {
    display: flex;
    text-decoration: none;
    gap: 8px;
    flex-direction: column;
    background: #f1f5ff;
    border-radius: 8px;
    padding: 20px;
    transition: .3s;
}

@media (min-width: 768px) {
    .create-link__item {
        gap: 12px;
    }
}

.create-link__item:hover {
    opacity: .7;
}

.create-link__item .img img {
    border-radius: 8px;
}

.create-link__item .body {
    flex: 1;
}

.create-link__item .body strong {
    font-size: 16px;
}

@media (min-width: 768px) {
    .create-link__item .body strong {
        font-size: 20px;
    }
}

.create-link__item .body .description {
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 4px 0 0;
    padding: 0;
}

@media (min-width: 768px) {
    .create-link__item .body .description {
        font-size: 16px;
        margin: 12px 0 0;
    }
}

JavaScript

<!-- 関連記事生成JS 記事下HTMLへの設置がおすすめ -->
const createLinkArticles = document.querySelectorAll('.entry-inner .create-link a');
if (createLinkArticles.length > 0){
    createLinkArticles.forEach(item => {
        const url = item.href;
        fetch(url)
            .then(res => res.text())
            .then(text => {
            const el = new DOMParser().parseFromString(text, "text/html");
            const headEls = (el.head.children);
            let thumb, dsc, pageTitle; 

            Array.from(headEls).map(v => {
                const prop = v.getAttribute('property');
                if (!prop) return;
                if(prop == 'og:title'){ pageTitle = v.getAttribute("content"); }
                if(prop == 'og:site_name'){
                    siteName = v.getAttribute("content");
                    const targetChar = " - " + siteName;
                    pageTitle = pageTitle.replace(targetChar, "");
                }
                if(prop == 'og:image'){ thumb = v.getAttribute("content"); }
                if(prop == 'og:description'){ dsc = v.getAttribute("content"); }
            });

            const pageHTML = `<div class="img"><img src="${thumb}" alt="${pageTitle}" /></div><div class="body"><strong>${pageTitle}</strong><p class="description">${dsc}</p></div>`;
            item.innerHTML = pageHTML;
        });
    });
}

カスタマイズ

背景色を変更

.create-link__item {
    background: 任意の背景色;
}