# ブログの記事ページに執筆者を表示させたい

**URL:** <https://community.hubspot.com/t/topic/104904>\
**Category:** Tips, Tricks & Best Practices\
**Created:** [April 16, 2024, 10:21am UTC](https://community.hubspot.com/t/topic/104904 "2024-04-16T10:21:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatu\_yazi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tatu_yazi/32/62359_2.png) [@tatu\_yazi](https://community.hubspot.com/u/tatu_yazi)\
**Post date:** [April 16, 2024, 10:21am UTC](https://community.hubspot.com/t/topic/104904/1 "2024-04-16T10:21:11Z")

</div>

ブログ記事ページにブログ機能で設定した執筆者情報を表示させたいです。

社内にCSSに精通したものがいないので、ChatGPTに聞いたところ以下のサンプルが提示されたのでトライしましたが、表示されませんでした。

{% set author = blog\_post.author %}

\<h2\>{{ author.display\_name }}の最新記事\</h2\>

追加で質問し、ポイントを確認しましたが、問題ないように見受けられるため、こちらに投稿いたしました。

■ChatGPTに教わったチェックポイント

1. **blog\_postオブジェクトの取得** : このコードを使う前に、blog\_postオブジェクトを正しく取得していることを確認してください。これはブログの個別の記事ページである必要があります。
2. **執筆者情報の存在** : blog\_postオブジェクトが正しく取得され、その中に執筆者情報が含まれていることを確認してください。もし執筆者情報が存在しない場合、このコードはエラーを生じるか、執筆者名を表示しない可能性があります。
3. **デザインテンプレートの適用** : コードを入力した後、正しいデザインテンプレートにそれを適用していることを確認してください。デザインテンプレートが適切に適用されていない場合、コードが正しく表示されないことがあります。

なにか解決策やヒントになることをご存じの方がいらっしゃいましたら、ご教示いただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![assi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/assi/32/25699_2.png) [@assi](https://community.hubspot.com/u/assi)\
**Post date:** [April 16, 2024, 12:40pm UTC](https://community.hubspot.com/t/topic/104904/2 "2024-04-16T12:40:39Z")

</div>

[@tatu\_yazi](https://community.hubspot.com/t5/user/viewprofilepage/user-id/133621) [公式ドキュメント](https://developers.hubspot.com/beta-docs/guides/cms/content/templates/types/blog#boilerplate-markup)からの抜粋になりますが、執筆者情報の変数は下記のように取得します！

```lia-code-sample
<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}">
<h3>Written by <a class="author-link" href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a></h3>
<p>{{ content.blog_post_author.bio }}</p>
{% if content.blog_post_author.has_social_profiles %}
 <div class="hs-author-social-section">
 <div class="hs-author-social-links">
 {% if content.blog_post_author.facebook %}
 <a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a>
 {% endif %}
 {% if content.blog_post_author.linkedin %}
 <a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
 {% endif %}
 {% if content.blog_post_author.twitter %}
 <a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a>
 {% endif %}
 {% if content.blog_post_author.google_plus %}
 <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
 {% endif %}
 </div>
 </div>
{% endif %}

```

上記のように、 `content.blog_post_author` というディクショナリ（他言語でいう連想配列やオブジェクト）の中に執筆者に関するデータが格納されています。全量は次のドキュメントの通りです。

[https://developers.hubspot.com/beta-docs/reference/cms/hubl/variables#blog-variables:~:text=blog\_author.website-,content.blog\_post\_author,-String](https://developers.hubspot.com/beta-docs/reference/cms/hubl/variables#blog-variables:~:text=blog_author.website-,content.blog_post_author,-String)

---

<div class="post-metadata">

**Author:** ![tatu\_yazi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tatu_yazi/32/62359_2.png) [@tatu\_yazi](https://community.hubspot.com/u/tatu_yazi)\
**Post date:** [April 17, 2024, 12:52am UTC](https://community.hubspot.com/t/topic/104904/3 "2024-04-17T00:52:04Z")

</div>

ありがとうございます！

いただいたサンプルをもとに表示させたいものを作ることができました！

執筆者の紹介ページを別ページで持っており、執筆者情報のウェブサイトに情報を格納しているため、以下のように設定しました。

`<p>執筆者:<a href="{{ content.blog_post_author.website }}" target="_blank">{{ content.blog_post_author.display_name }}</a></p>`

> * * *

ただ、いただいたサンプルではclassが設定されていますが、今回においてはどのように設定すべきか分からなかったので省いています。（これを省くことで、どう影響があるのかもはっきりわかっていないのが正直なところですが・・・）

---

<div class="post-metadata">

**Author:** ![assi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/assi/32/25699_2.png) [@assi](https://community.hubspot.com/u/assi)\
**Post date:** [April 17, 2024, 12:54am UTC](https://community.hubspot.com/t/topic/104904/4 "2024-04-17T00:54:46Z")

</div>

[@tatu\_yazi](https://community.hubspot.com/t5/user/viewprofilepage/user-id/133621) ひとまず表示できたとのことで良かったです

class等についてはCSSを当てるために付いていたものになりますので、適宜削ったり、別のものを設定いただく形で大丈夫です！

（ご提示したコードはHubSpotが提供しているボイラープレートのコードでしたので、classもボイラープレート用のものになっていただけです）

---

<div class="post-metadata">

**Author:** ![tatu\_yazi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tatu_yazi/32/62359_2.png) [@tatu\_yazi](https://community.hubspot.com/u/tatu_yazi)\
**Post date:** [April 17, 2024, 1:00am UTC](https://community.hubspot.com/t/topic/104904/5 "2024-04-17T01:00:17Z")

</div>

@assi

ご返信ありがとうございます！classについても承知いたしました。

ご教示いただきまして、ありがとうございます！

大変助かりました。