あっぷりノート

Fix the Bits | あっぷり工房

旅、ギア、サプリ、マインド、トレーニング ── “走る”は創れる

Tiktok動画を直接ブログに埋め込む方法

f:id:you_key69:20220116113130j:plain



こんな方にオススメの記事
  • Tiktok動画をブログに埋め込む方法を知りたい

  • 遅ればせながら、Tiktokのアカウントを作ってみました。

    なので、さっそくTiktok動画をブログに貼り付けてみようと思ったら、YouTubeやInstagramより少しハードルが高そうだったので手順をシェアさせてください。

    @you_key69 https://you-key69.hatenadiary.jp/#はじめまして #サイクリング #VLOG ♬ オリジナル楽曲 - アオヤマユウキ

    このやり方を覚えておけば、こんなふうに埋め込めるようになるので、便利ですよ?

    さあ、目次へGO↓


    世の中はショートムービー戦国時代

    ↑中田敦彦先生によるすごく分かりやすい講義です


    YouTubeはよく見ますが、間違ってSHORTSをタップしてしまった日には無限に観てしまいます。

    そういう中毒性が短尺動画にはあるんです。


    そんな特性や風潮の後押しもあり、とりあえずひとつだけ投稿みたんですが、ブログに簡単に貼り付けられず、少してんやわんやしてしまいました。

    なので、後進のためにも、Tiktokをブログに貼り付ける方法を手順化しておきたいとおもいます。

    はてな記法が通用しない「Tiktok」

    はてなブログにはメディアをブログに埋め込むための便利な「embed」というはてな記法があります。

    [リンクURL:embed]

    というやつです。

    YouTubeやInstagramはこれが使えるんですが、Tiktokには通用しません


    Tiktokでやろうとするとこうなっちゃいます↓

    リンク先で再生するようになっちゃうんですよね。


    じゃあ、Tiktokの動画をブログ上でそのまま再生できるようにするにはどうしたらいいのでしょうか?


    必見!はてなブログの「埋め込み(embed)」がめっちゃ便利!

    Tiktok動画をブログに埋め込む手順

    Tiktok動画をブログに埋め込む方法は以下の5ステップです。

    1. 動画リンクをコピー
    2. コピーしたURLにアクセス
    3. PC版に表示切り替え
    4. 埋め込みコードをコピー
    5. 貼り付けるだけ

    詳述します。

    1. 動画リンクをコピー

    f:id:you_key69:20220116224633j:plain

    右下の「・・・」をタップして、「リンクをコピー」をタップします。

    2. コピーしたURLにアクセス

    f:id:you_key69:20220116224648j:plain

    アドレスバーにURLを貼り付けて、アクセス。

    3. PC版に表示切り替え

    f:id:you_key69:20220116224657j:plain

    ※Chromeでの表示です

    ブラウザの設定を「PC版サイト」に切り替えます。

    4. 埋め込みコードをコピー

    f:id:you_key69:20220116224720j:plain

    右側の「シェア」をタップして「埋め込む」を選択します。

    5. 貼り付けるだけ

    f:id:you_key69:20220116224735j:plain

    コードをコピー」すると、以下のようなコードが取得できるので、ブログの編集画面に貼り付けてください。

    <blockquote class="tiktok-embed" cite="https://www.tiktok.com/@you_key69/video/7053445819638304001" data-video-id="7053445819638304001" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@you_key69" href="https://www.tiktok.com/@you_key69">@you_key69</a> https:&#47;&#47;you-key69.hatenadiary.jp&#47;<a title="はじめまして" target="_blank" href="https://www.tiktok.com/tag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%BE%E3%81%97%E3%81%A6">#はじめまして</a> <a title="サイクリング" target="_blank" href="https://www.tiktok.com/tag/%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AA%E3%83%B3%E3%82%B0">#サイクリング</a> <a title="vlog" target="_blank" href="https://www.tiktok.com/tag/vlog">#VLOG</a> <a target="_blank" title="♬ オリジナル楽曲  - アオヤマユウキ" href="https://www.tiktok.com/music/オリジナル楽曲-アオヤマユウキ-7053446983066929922">♬ オリジナル楽曲  - アオヤマユウキ</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>

    以上です。


    実はこれ、ランナー御用達の「Relive」も同様の手順で貼り付けるので、ランニング系ブロガーの方はすぐに気づいたかもしれません ^^

    『Relive』とは何か?活用法を解説します!

    Tiktokのメリット・デメリット

    f:id:you_key69:20220116225617j:plain

    今さらですが、Tiktokアカウントを作ってみたので、少しいじってみて良さそうな点と、そうじゃなかった点を記しておきます。

    メリット

    いちばん②感じたのは何より

    編集のバリエーションの豊富さ
    です。

    テキストや音声、エフェクトの挿入もめちゃくちゃ簡単なんです。


    テンプレートに当てはめるだけで動画編集がカンタンにできてしまいます。

    そのぶん、Tiktokの動画は画一的にも見えるんですが。


    Instagramは多少の加工はできるけど、YouTubeはガッツリ編集した動画をアップロードするしかありません。

    テキスト(文字)を入れるなんてお茶の子さいさいだし、個人的にいいと思ったのはアフレコ機能まであることでした。


    これはYouTuberたちが手を出すのもわかります。

    デメリット

    一方で、私が立つ土俵ではないとも感じてしまいました。

    • 縦長動画
    • ジャンル
    特にこの2点ですね。


    それはポッドキャスト(stand.fm)に無謀に挑んだときよりも大きな疎外感でした。

    縦長動画

    ホント恥ずかしいんですが、ジェネレーションギャップのひと言に尽きます。

    オッサンはテレビ・PC世代=横長世代なので、どうも縦に動画を撮るということをしないのです。


    また、ブロガーとして画像や動画はアクセント的に入れるので、たくさんの画面を占有してしまう縦長動画はあまりブログとの相性もよくないと感じています。

    ジャンル

    あと、ジャンルも

    • おもしろ動画
    • ライフハック
    • 美女

    が席巻している感じなので、VLOG系は緋の目を見にくい(というかスキップされやすい)設計になっています。


    しかし、そもそもYouTuberじゃないので、ショートムービーからの流入はあまり期待していません。

    あくまで、ブロガーとしてのアクセントには、まだまだInstagramやYouTubeのほうが親和性が高そうだな〜という印象を受けました。

    まとめ

    そんなワケもあって、ブロガーがTiktokを始めました!ではなく、ブログを書きたいTiktoker向けに記事を書いてみました。

    参考になれば、幸いです!