---
title: HubSpotのブログにカード型リンクを作る｜Nextmode Blog
description: HubSpotのブログにカード型リンクを作成する手順を紹介します。
image: https://info.nextmode.co.jp/hubfs/HubSpot.png
---

[![nextmode blog](https://info.nextmode.co.jp/hubfs/raw_assets/public/NextMode_Theme/nextmode%20blog.png)](https://info.nextmode.co.jp/blog)

[ホワイトペーパー](https://info.nextmode.co.jp/white-paper/) [資料請求](https://info.nextmode.co.jp/request/) [お問い合わせ](https://nextmode.co.jp/contact/)

- [会社TOP](https://nextmode.co.jp/)
- [生成AIセキュリティ](https://nextmode.co.jp/services/ai/security/)
- [SaaSライセンス＆サポート](https://nextmode.co.jp/services/saas/)
  
    - [Oktaライセンス＆サポート](https://nextmode.co.jp/services/saas/okta/)
    - [Netskopeライセンス＆サポート](https://nextmode.co.jp/services/saas/netskope/)
    - [Notionライセンス＆サポート](https://nextmode.co.jp/services/saas/notion/)
    - [Asanaライセンス＆サポート](https://nextmode.co.jp/services/saas/asana/)
    - [SysCloudライセンス＆サポート](https://nextmode.co.jp/services/saas/syscloud/)
    - [CrowdStrikeライセンス＆サポート](https://nextmode.co.jp/services/saas/crowdstrike/)
- [AWS総合支援](https://nextmode.co.jp/services/aws/)
  
    - [AWS導入コンサル・構築](https://nextmode.co.jp/services/aws_consulting/)
    - [AWS運用・保守代行](https://nextmode.co.jp/services/aws_operation/)
- [導入事例](https://nextmode.co.jp/casestudy/)
- [会社情報](https://nextmode.co.jp/company/)
- [セミナー](https://info.nextmode.co.jp/seminar/)
- [ブログ](https://info.nextmode.co.jp/blog)

[![YouTube](https://nextmode.co.jp/assets/images/common/icon_youtube.svg)](https://www.youtube.com/@nextmode) <https://x.com/Nextmode_Inc>

目次

 2023/02/10 11:59

# HubSpotのブログにカード型リンクを作る

[» HubSpot](https://info.nextmode.co.jp/blog/tag/hubspot)

[![南栄樹](https://app.hubspot.com/settings/avatar/741dedfe97a942cceb7916549a7401c6) 南栄樹](https://info.nextmode.co.jp/blog/author/minami-eiki)

共有： [facebook-f icon](http://www.facebook.com/share.php?u=https://info.nextmode.co.jp/blog/hubspot-embed-link) [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://info.nextmode.co.jp/blog/hubspot-embed-link) [Twitter icon](https://twitter.com/intent/tweet?url=https://info.nextmode.co.jp/blog/hubspot-embed-link) [pinterest-p icon](http://pinterest.com/pin/create/link/?url=https://info.nextmode.co.jp/blog/hubspot-embed-link) [envelope icon](mailto:?body=https://info.nextmode.co.jp/blog/hubspot-embed-link)

## はじめに

[ネクストモード](https://nextmode.co.jp/)の南です。

ネクストモードでは契約管理やカスタマーサクセス活動に[HubSpot](https://www.hubspot.jp/)を活用しています。  
また、こちらのネクストモードブログもHubSpotが基盤となっていまして、昨年の開設以来活発に情報発信をしています。

今回は小ネタですが、HubSpotのブログへのカード型リンクの作り方を紹介したいと思います。

## やること

これの作り方です。

<iframe class="hatenablogcard" src="https://hatenablog-parts.com/embed?url=https://nextmode.co.jp/" width="600" height="150" frameborder="0" scrolling="no" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none;">
</iframe>

カード型リンクを作る方法はいろいろありますが、今回は「はてなブログカード」でリンクを作成する方法を紹介します。

## 手順

設定手順を紹介していきます。

まず、HubSpotで対象のブログを開いたら、画面右上にある\[集中モード\]をクリックしてオンにし、\[詳細\]のプルダウンからから\[ブロックを表示\]をクリックすると、ブロックが表示されるようになりこの後の作業がしやすいです。

![カード型リンク作成手順1](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%2014.png?width=300&height=255&name=hubspot-gist%2014.png)

続いて、\[挿入\]をクリックして、プルダウンから\[埋め込み\]をクリックします。

![カード型リンク作成手順2](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%206.png?width=302&height=300&name=hubspot-gist%206.png)

「埋め込みを挿入」の画面で、入力フィールドに以下のコードを貼り付けます。  
\[リンク先のURL\]の部分を任意のリンク先に変えてください。  
また、\[width\]と\[height\]の値を変更するとカードの幅と高さが変更できるので、お好みで調整してください。

コードを貼り付けたら\[挿入\]をクリックします。

![カード型リンク作成手順3](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-link_1200.png?width=400&height=424&name=hubspot-link_1200.png)

カード型リンクが挿入されました。

![カード型リンク作成手順4](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-link%201_1200.png?width=701&height=193&name=hubspot-link%201_1200.png)

続いて位置調整をしていきます。  
カード型リンクのブロックを選択すると、上のバーに位置調整の項目が表示されます。  
今回はインラインを選択しています。

![カード型リンク作成手順5](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-link%202_1200.png?width=702&height=250&name=hubspot-link%202_1200.png)

- 補足  
  大きさ（横幅）については位置調整の右側のフィールドで調整することもできますが、こちらでは横幅を変更すると連動して高さの値も変わってしまいます。  
  なので、上で説明したようにコード内の\[width\]と\[height\]の値で調整するほうがおすすめです。  
  ![カード型リンク作成手順6](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-link%203_1200.png?width=701&height=311&name=hubspot-link%203_1200.png)

設定は以上となります。  
右上の\[プレビュー\]をクリックしてプレビューの画面を確認すると、以下のような感じになります。

- プレビューの画面  
  ![カード型リンク作成手順7](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-link%204_1200.png?width=699&height=235&name=hubspot-link%204_1200.png)

## まとめ

小ネタですが、HubSpotのブログへのカード型リンクの作り方を紹介させていただきました。  
今後も見やすい・読みやすいブログ記事となるように、色々と工夫していきたいと思います。

### 関連記事

[![SysCloudでHubSpotをバックアップ](https://info.nextmode.co.jp/hubfs/%E3%83%96%E3%83%AD%E3%82%B0%EF%BC%BF%E3%82%AD%E3%83%BC%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB/SysCloud_blog.png) SysCloudでHubSpotをバックアップ ![](https://info.nextmode.co.jp/hubfs/%E3%83%97%E3%83%AD%E3%83%95/image.png) 亀田 治伸 (Harunobu Kameda) 2025/04/04](https://info.nextmode.co.jp/blog/syscloud_hubspot_03)

[![【小ネタ】HubSpotのページで目次を作成する](https://info.nextmode.co.jp/hubfs/HubSpot.png) 【小ネタ】HubSpotのページで目次を作成する ![](https://app.hubspot.com/settings/avatar/741dedfe97a942cceb7916549a7401c6) 南栄樹 2023/03/27](https://info.nextmode.co.jp/blog/hubspot-table-of-contents)

[![【Oktane26】セッション：Okta Workflows 顧客事例と今後のロードマップ](https://info.nextmode.co.jp/hubfs/%E3%83%96%E3%83%AD%E3%82%B0%EF%BC%BF%E3%82%AD%E3%83%BC%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB/oktane26.png) 【Oktane26】セッション：Okta Workflows 顧客事例と今後のロードマップ ![](https://info.nextmode.co.jp/hubfs/kusumi.png) kusumin 2026/09/24](https://info.nextmode.co.jp/blog/oktane26-workflows-flowcase)

### Category

[» 技術](https://info.nextmode.co.jp/blog/tag/技術) [» Okta](https://info.nextmode.co.jp/blog/tag/okta) [» Notion](https://info.nextmode.co.jp/blog/tag/notion) [» イベントレポート](https://info.nextmode.co.jp/blog/tag/イベントレポート) [» Netskope](https://info.nextmode.co.jp/blog/tag/netskope) [» CrowdStrike](https://info.nextmode.co.jp/blog/tag/crowdstrike) [» Notion AI](https://info.nextmode.co.jp/blog/tag/notion-ai) [» AWS](https://info.nextmode.co.jp/blog/tag/aws) [» Asana](https://info.nextmode.co.jp/blog/tag/asana) [» カルチャー](https://info.nextmode.co.jp/blog/tag/カルチャー) [» ワーケーション](https://info.nextmode.co.jp/blog/tag/ワーケーション) [» 生成AIセキュリティ対策シリーズ](https://info.nextmode.co.jp/blog/tag/生成aiセキュリティ対策シリーズ) [» Oktane25](https://info.nextmode.co.jp/blog/tag/oktane25) [» SaaS](https://info.nextmode.co.jp/blog/tag/saas) [» re:Invent](https://info.nextmode.co.jp/blog/tag/reinvent) [» AI](https://info.nextmode.co.jp/blog/tag/ai) [» リモートワーク](https://info.nextmode.co.jp/blog/tag/リモートワーク) [» Keeper](https://info.nextmode.co.jp/blog/tag/keeper) [» ネクストモードアドベントカレンダー2024](https://info.nextmode.co.jp/blog/tag/ネクストモードアドベントカレンダー2024) [» Oktane24](https://info.nextmode.co.jp/blog/tag/oktane24) [» Oktane23](https://info.nextmode.co.jp/blog/tag/oktane23) [» Asana AI](https://info.nextmode.co.jp/blog/tag/asana-ai) [» Slack](https://info.nextmode.co.jp/blog/tag/slack) [» Oktane26](https://info.nextmode.co.jp/blog/tag/oktane26) [» OIGシリーズ](https://info.nextmode.co.jp/blog/tag/oigシリーズ) [» その他](https://info.nextmode.co.jp/blog/tag/その他) [» 脱Excelシリーズ](https://info.nextmode.co.jp/blog/tag/脱excelシリーズ) [» Oktane22](https://info.nextmode.co.jp/blog/tag/oktane22) [» SysCloud](https://info.nextmode.co.jp/blog/tag/syscloud) [» Google](https://info.nextmode.co.jp/blog/tag/google) [» HubSpot](https://info.nextmode.co.jp/blog/tag/hubspot) [» Zapier](https://info.nextmode.co.jp/blog/tag/zapier) [» Azure AD](https://info.nextmode.co.jp/blog/tag/azure-ad) [» Entra ID](https://info.nextmode.co.jp/blog/tag/entra-id) [» Googleドライブ](https://info.nextmode.co.jp/blog/tag/googleドライブ) [» SentinelOne](https://info.nextmode.co.jp/blog/tag/sentinelone) [» ゼロトラスト](https://info.nextmode.co.jp/blog/tag/ゼロトラスト) [» DocuSign](https://info.nextmode.co.jp/blog/tag/docusign) [» Jamf](https://info.nextmode.co.jp/blog/tag/jamf) [» セキュリティ対策](https://info.nextmode.co.jp/blog/tag/セキュリティ対策) [» トラブルシューティング](https://info.nextmode.co.jp/blog/tag/トラブルシューティング) [» 利用者目線](https://info.nextmode.co.jp/blog/tag/利用者目線) [» 運用](https://info.nextmode.co.jp/blog/tag/運用) [» GitHub](https://info.nextmode.co.jp/blog/tag/github) [» GitHub Gist](https://info.nextmode.co.jp/blog/tag/github-gist) [» JOUG](https://info.nextmode.co.jp/blog/tag/joug) [» Notion Calendar](https://info.nextmode.co.jp/blog/tag/notion-calendar) [» Proflly](https://info.nextmode.co.jp/blog/tag/proflly) [» kintone](https://info.nextmode.co.jp/blog/tag/kintone)

[![ネクストモード株式会社](https://nextmode.co.jp/assets/images/common/logo_white.svg)](https://nextmode.co.jp/)

Service

- [生成AIセキュリティ](https://nextmode.co.jp/services/ai/security/)
- [SaaSライセンス＆サポート](https://nextmode.co.jp/services/saas/) 
    - [Oktaライセンス＆サポート](https://nextmode.co.jp/services/saas/okta/)
    - [Netskopeライセンス＆サポート](https://nextmode.co.jp/services/saas/netskope/)
    - [Notionライセンス＆サポート](https://nextmode.co.jp/services/saas/notion/)
    - [Asanaライセンス＆サポート](https://nextmode.co.jp/services/saas/asana/)
    - [SysCloudライセンス＆サポート](https://nextmode.co.jp/services/saas/syscloud/)
    - [CrowdStrikeライセンス＆サポート](https://nextmode.co.jp/services/saas/crowdstrike/)
    - [Keeperライセンス＆サポート](https://nextmode.co.jp/services/saas/keeper/)
- [AWS総合支援](https://nextmode.co.jp/services/aws/) 
    - [AWS導入コンサル・構築](https://nextmode.co.jp/services/aws_consulting/)
    - [AWS運用・保守代行](https://nextmode.co.jp/services/aws_operation/)

Company

- [会社情報](https://nextmode.co.jp/company/)
- [サービス一覧](https://nextmode.co.jp/services/)
- [導入事例](https://nextmode.co.jp/casestudy/)
- [お知らせ](https://nextmode.co.jp/news/)
- [サステナビリティ](https://nextmode.co.jp/sustainability/)
- [採用](https://nextmode.co.jp/recruit/)
- [私たちの働き方](https://nextmode.co.jp/workstyle/)
- [カルチャー](https://nextmode.co.jp/culture/)

Contact

- [お問い合わせ](https://nextmode.co.jp/contact/)
- [資料請求](https://info.nextmode.co.jp/request/)

Media

- [セミナー](https://info.nextmode.co.jp/seminar)
- [ブログ](https://info.nextmode.co.jp/blog)
- [ホワイトペーパー](https://info.nextmode.co.jp/white-paper/)

- [![ネクストモード公式YouTubeチャンネル](https://nextmode.co.jp/assets/images/common/icon_youtube.svg)](https://www.youtube.com/channel/UCeW8ocoe9C3E0GOINh167MA)
- [![ネクストモード公式Xアカウント](https://nextmode.co.jp/assets/images/common/icon_x.svg)](https://twitter.com/Nextmode_Inc)

[English](https://nextmode.co.jp/en/)

- [NTTグループカスタマーハラスメント基本方針](https://group.ntt/jp/group/customer_harassment/)
- [就活ハラスメント防止方針](https://docs.nextmode.co.jp/nextmode_recruit_harassment.pdf)

- 運用アシスタント利用規約([AWS](https://docs.nextmode.co.jp/nextmode-unyo-assistant-aws-terms-of-use.pdf)/[Azure](https://docs.nextmode.co.jp/nextmode-unyo-assistant-azure-terms-of-use.pdf))
- [日中運用支援定型約款](https://docs.nextmode.co.jp/nextmode-nittyu-unyo-shien-terms-of-use.pdf)
- [定型約款](https://docs.nextmode.co.jp/nextmode-standard-contracts.pdf)

[プライバシーポリシー](https://nextmode.co.jp/company/privacy.html)

Copyright(c) Nextmode, Inc.

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "南栄樹",
    "url" : "https://info.nextmode.co.jp/blog/author/minami-eiki"
  },
  "dateModified" : "2024-06-17T09:40:55.136Z",
  "datePublished" : "2023-02-10T02:59:06.000Z",
  "headline" : "HubSpotのブログにカード型リンクを作る｜Nextmode Blog",
  "image" : [ "https://info.nextmode.co.jp/hubfs/HubSpot.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://info.nextmode.co.jp/blog/hubspot-embed-link",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://info.nextmode.co.jp/hubfs/nm_l_color.png"
    },
    "name" : "ネクストモード株式会社"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://nextmode.co.jp/#organization",
  "@type" : "Organization",
  "alternateName" : "Nextmode, Inc.",
  "logo" : "https://nextmode.co.jp/assets/images/common/logo_white.svg",
  "name" : "ネクストモード株式会社",
  "sameAs" : [ "https://www.youtube.com/channel/UCeW8ocoe9C3E0GOINh167MA", "https://twitter.com/Nextmode_Inc", "https://info.nextmode.co.jp/" ],
  "url" : "https://nextmode.co.jp/"
}
```