Qiita

Qiita Widget : Qiitaの投稿を表示できるブログパーツ

More than 1 year has passed since last update.

Qiitaの新着投稿をウェブサイトに埋め込むことができるウィジェットです。自分のブログなどのウェブサイトにQiitaの活動を載せたり、Qiita:Teamに特定のタグのタイムラインを表示したりできます。

Qiita_Widget_Demo.png

図:左はユーザ投稿の、右はRubyタグのタイムライン

Qiita Widgetの動作するデモはこちら


ウィジェットの設置方法

下記のコードのyour_nameの部分を表示したいユーザ名に置換えてお使いください。

<a href="https://qiita.com/your_name" data-qiita-widget data-username="your_name">suinのQiita投稿</a>

<script src="https://qiita-widget.suin.io/widget.js" defer></script>


ウィジェットのカスタマイズ

data-*属性を設定することで、ウィジェットの表示をカスタマイズできます。


コンテンツのカスタマイズ

表示するコンテンツは「ユーザ投稿」「タグへの投稿」「キーワード検索結果」のいずれかを選択することができます。

属性

説明

data-username="ユーザ名"
ユーザ名: string

ユーザの新着投稿が表示される

data-tag="タグ"
タグ: string

タグへの新着投稿が表示される

data-search="キーワード"
キーワード: string

検索キーワードに合致する新着投稿が表示される


見た目のカスタマイズ

ウィジェットの大きさや表示件数といった見た目をカスタマイズすることができます。

属性

説明

data-items
表示件数: int

表示する投稿数

data-width
幅: string

ウィジェットの幅。値はCSSのwidthで使用可能なもの。デフォルト: 100%

data-height
高さ: string

ウィジェットの高さ。値はCSSのheightで使用可能なもの。デフォルト: 400px

data-hide-header

Qiitaのロゴを非表示にする

data-hide-footer

Qiita Widgetへのリンクが非表示になる