このページについて

BlueskyTimelineの埋め込みコードについてはサービスサイト内で適宜設定いただければと思いますが、都度サービスサイト側で調整をせずとも、各パラメータを手動で設定されたい、あるいは各パラメータの意味を知りたい方向けのページとなります。

また、ページ後半には標準機能で用意していない特殊な埋め込み方法についても解説させていただきます。

埋め込みコードサンプル(Ver.2)

下記は私のアカウントのタイムラインを表示するための埋め込みコードのサンプルとなります。

<!-- BlueskyTimeline Widget -->
<bst-widget
data-handle="heion.net"
data-theme="custom"
data-color="#3c3c3c/#ffffff/#1083fe"
data-width="420px"
data-height="500px"
data-lang="ja"
data-pin="0"
data-rp="0"
data-thread="0"
data-prof="0"
data-ui="0"></bst-widget>
<script src="https://blueskytimeline.com/v2/timeline.js" type="module" defer></script>
<!-- /BlueskyTimeline Widget -->

※読みやすくするために改行を入れています

パラメータ一覧

ウィジェットサイズ指定について

ウィジェットのサイズは縦横共に単位まで含める形での指定となります。
例：
data-width=”400px” data-height=”500px”

そのため、例えば画面いっぱいに広げる場合は100%などの指定が可能となります。

ウィジェットの角丸や枠線、レスポンシブでのCSSの微調整を行いたい

<bst-widget>要素に対して直接style指定が可能ですので、以下のようにすることで上書きが可能となります

<style>
    bst-widget {
        border:1px solid #CCCCCC;
        border-radius: 0px;
        width: 420px;
        height: 500px;
        margin: auto;
    }
    @media (width < 769px) {
        bst-widget {
            width: 100%;
            height: 425px;
        }
    }
</style>

※上記は角丸をなくす＋画面の横幅が768px以下の際、ウィジェットの横幅を100%且つ縦サイズを少し小さくする指定のサンプル

カスタムカラーについて

data-themeをcustomとしたときのみ有効となるカスタムカラー指定は
#3c3c3c/#ffffff/#1083fe
のようにスラッシュ区切りで
それぞれテキスト、背景、リンク色を指定しますが、例外的に背景のみはrgbaなどの指定が可能です。

そのため、例えば背景色を
#3c3c3c/rgba(255,255,255,0)/#1083fe
と指定すると、背景色を完全に透明にすることも可能です。

スレッド表示について※1

UIパターン（data-ui）について※2

コンパクトはデフォルトUIをベースにコメント、リポスト、いいねを非表示にしたものになります。
ミニマムはさらにユーザー名、ハンドル名、アバターアイコンも非表示にしBlueskyのタイムライン感を薄めて、サイトの更新情報の一部のようにふるまえるように調整したUIになります。
※但し、ミニマム時はリポストや固定、スレッドは強制的に適用されなくなります。

また、ミニマム時はキャプチャ画像のように
横幅が406px以下になるとスマホ用にレイアウトが微調整されます。

以下は実際のタイムラインウィジェットをミニマム設定で横幅いっぱいで埋め込んだサンプルになります。

JSを本文に直接埋め込むことができないサービスをご利用の場合

WixやGoogleサイトなど、ASPサービス側の制限で本文内にscriptタグを直接記述できない、あるいは書いても強制的に挿入位置が変わってしまう場合、JSのみheadタグ内に埋め込み、残りのタグを本文内の表示させたい位置に挿入いただくことで、 スクリプトと出力位置を分離し正しく表示させることができます。（※すべてのサービスで利用できることを保証するものではありません）

<script src="https://blueskytimeline.com/v2/timeline.js" type="module" defer></script>

<!-- BlueskyTimeline Widget -->
<bst-widget data-handle="heion.net" data-theme="custom" data-color="#3c3c3c/#ffffff/#1083fe" data-width="420px" data-height="500px" data-lang="ja" data-pin="0" data-rp="0" data-thread="0" data-prof="0" data-ui="0"></bst-widget>
<!-- /BlueskyTimeline Widget -->

1ページ内に複数設置したい場合

1ページ内に複数のウィジェットを設置したい場合、JSの記述は1回で問題ありません。
<bst-widget>タグのみをそれぞれ設置したい箇所に記述いただく形となります。
※ただし、それぞれのウィジェットの横幅などは共通のスタイルが出力されますので、CSSで適宜調整いただく必要があります。

<bst-widget>タグにidを指定し、以下のようなスタイルでそれぞれのウィジェットのサイズなどを適宜調整ください。

<style>
    bst-widget#widget_1 {
        width: 600px;
        height: 500px;
    }
    bst-widget#widget_2 {
        width: 380px;
        height: 700px;
    }
</style>

旧バージョンのパラメータ

埋め込みコードサンプル

下記は私のアカウントのタイムラインを表示するための埋め込みコードのサンプルとなります。

<script async
 src="https://blueskytimeline.com/timeline.js"
 data-handle="heion.net"
 data-theme="light"
 data-width="420"
 data-height="500"
 data-lang="ja"
 data-pin="0"
 data-rp="0"
 data-ui="0"
 data-thread="0"></script>

※読みやすくするために改行を入れています

パラメータ一覧